plugin-5納品の為投稿画面を使いやすくしよう

目次

投稿、固定ページをすぐコピーできるようにしよう

似たような記事を書く場合に便利なコピー用プラグイン

下記必要プラグインを新規追加して有効化するだけでok

  • Duplicate Post

ダッシュボードメニュー名称変更

ダッシュボードの名称はwordpressをはじめてつかう方にはメニューの名称が分かりにくいかもしれません

下記必要プラグインを新規追加して有効化

  • Admin menu editor (ダッシュボードサイドバーの名称を変更できる)

ダッシュボード → 設定 → menu editor → 名前を付ける 例:)ダッシュボードを管理画面に変更 → Save Change

カスタムフィールドを設定しておく

現在のビジュアルエディタは一パソコンに慣れていない人には使いにくいかもしれません。
あらかじめ入力する項目が決まっているのなら投稿画面にわかりやすくしておいてあげるのが親切です。

必要プラグインを新規追加して有効化

  • Advanced Custom Fields (投稿画面に項目を増やすことができる)

ダッシュボード → カスタムフィールド → 新規追加
→ 名前を付ける 例:)物件登録
→ 「フィールドを追加」をクリック
→ 複数ある場合はどんどん「フィールドを追加」をクリック
→ 完成したら保存して新規投稿画面を見てみよう

入力フィールドが増えているのですべてを入力し、公開。
記事を見てみてもまだ追加したフィールドに入力したものは表示されません。

single.phpに呼び出すコードを追加。

テキストの場合

<?php the_field("フィールド名", $post->ID); ?>

フィールド名の個所には自分がつけたフィールド名を記入

画像の場合

<?php
	$attachment_id = get_field('フィールド名');
	$image = wp_get_attachment_image_src( $attachment_id, $size );
	$attachment = get_post( get_field('フィールド名') );
	$alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
	$image_title = $attachment->post_title;
?>
<img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>" alt="<?php echo $alt; ?>" title="<?php echo $image_title; ?>" />

フィールド名の個所には自分がつけたフィールド名を記入

画像の幅はcssで調整

img {
	max-width: 300px;
	height: auto;
}
追記

バージョンアップしてたら上記で表示されなくなった?

全部Wysiwyg エディタにして表示箇所には

<?php the_field('フィールド名'); ?>

 で表示されました。

 htmlも編集する人のためにソースコードにも色を付けておこう

少しでもhtmlが使えるクライアントならば、wordpressのソースコードは色分けがされていないのでタグを見分けるのが困難です。

下記必要プラグインを新規追加して有効化するだけでok

  • HTML Editor Syntax Highlighter

既にあるページの編集

テキストエディタで見てみましょう

wordpressでもcssを追加したい!ここだけclassで囲みたい!!

あらかじめ入力するclass項目が決まっているのなら登録しておいてあげるのが親切です。

必要プラグインを新規追加して有効化

  • AddQuicktag (よく使う項目をビジュアルエディタに追加)

ダッシュボード → 設定 → AddQuicktag
→ ボタン名、ラベル名を付ける 例:)トピックス(黄色)
→ 開始タグを記入

例:↓)

<div class="yellow">

→ 終了タグを記入

例:↓)

</div>

すべてのページのビジュアルエディタに表示されるようチェックボックスにチェックを入れて、保存。

投稿画面を見てみよう

ビジュアルエディタにQuicktagというドロップダウンメニューが増えているので、囲みたい部分をドラッグで選択し、スタイルを選ぶ。

更新。スタイルが適用されているか確認しましょう。

見ていただいてありがとうございます。↓ポチしてくださいませ。
  • 見た (0)
  • もう少し詳しく書いて! (0)
  • 見たけど役立たず (0)
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次