【誰でもできる】ノンプログラマーでも出来るWordPressのダッシュボードにメニューを追加する方法(後編)

【誰でもできる】ノンプログラマーでも出来るWordpressのダッシュボードにメニューを追加する方法(後編)

WordPressを使ってサイト構築する際に、避けては通れないダッシュボードメニューに新しい項目を追加する方法を紹介する後編です!
前編と同じで、ノンプログラマーでも分かりやすい解説になっています。

前編と合わせて読んでください!
わかりやすい方法でhtmlでWEBサイトが作れる人だったらわかる方法で解説します!

(前編)

(1)Wordpressでダッシュボードメニューに入れる部分を決める。

(2)入れる部分を決めたらWordpressで組み込める形にする

(後編)

(3)ダッシュボードメニューのカスタマイズしやすいプラグインの準備

(4)Advanced Custom Fieldsの設定をする

(5)組み込む部分のPHPにAdvanced Custom Fieldsの設定をする

(まとめ -Comming Soon-)

めんどくせー、もっと短く話せや!という方はこちらw

WordPressのダッシュボードにメニューを追加する方法(後編)

ダッシュボードメニューのカスタマイズしやすいプラグインの準備

やり方はいくつかありますが、「簡単で誰でも分かる」も主旨の1つとしてますので、プラグインを使った方法を紹介します。

今回は「Advanced Custom Fields」のプラグインを使います。

インストールは他のプラグインと同様です。「プラグイン」「新規追加」で「Advanced Custom Fields」を検索。

画面の説明に沿って、インストールして「有効」にしてください。

プラグインを検索

ダッシュボードに下図の様なメニューが出ていれば、準備はOKです。
ダッシュボードメニューをクリックしても、空の状態ですが、今はこのままで大丈夫です。

カスタムフィールドインストール後

これで「Advanced Custom Fields」の準備は完了です。

Advanced Custom Fieldsの設定をする

ここでは画像とテキストを入力したものを、前編で書いた表示したい部分に入れる形で紹介します。

  1. ダッシュボードのメニューから「カスタムフィールド」をクリックした後、画面上にある「新規追加」をクリックします。
  2. カスタムフィールド新規追加
  3. タイトルをいれます。ここのタイトルはnews.phpで表示する内容のセットの名称です。(news.phpで表示する項目が入っている設定名です)
    function.phpで設定したnewsと言うファイル名をいれます。
  4. カスタムフィールドに名前を付ける
  5. +フィールドを追加」ボタンで項目を設定します。
    まずはテキストを入力する枠の設定です。「フィールドラベル」「フィールド名」をいれます。両方とも任意で好きな名前で入れられますが、フィールド名は半角英数でいれます。
    「フィールドタイプ」は「テキスト」とします。
    返り値は「画像ID」プレビューサイズは「フルサイズ」にします。
  6. カスタムフィールドにテキストを設定
  7. もう一度「+フィールドを追加」ボタンで項目を設定します。
    今度は画像を入れる枠の設定です。「フィールドラベル」「フィールド名」は上記と同じで任意でOKです。「フィールドタイプ」は「画像」にします。
  8. カスタムフィールドに画像を設定
  9. 位置のタブを開いてどのダッシュボードのメニューに、今回作ったカスタムフィールドを入れるようにするか決めます。
    どの投稿に「テキスト」「画像」の入力枠を追加するかという設定です。
    今回はnews枠にいれたいのでプルダウンにある「news」を選択します。
    ※function.phpで関連付けの設定をしている事が前提です。今回は前編で記載の方法でこの設定をしてます。
  10. カスタムフィールドの位置を選択
  11. 位置の設定までできたら、画面右上の「公開」ボタンをおします。
    これで「カスタムフィールド」の設定は完了です。

この時点で、ダッシュボードのメニューからNEWSまだ公開ページに反映されませんが、ここでNEWSメニューから新規登録で入力で何かテストでデータを入れてみてください。
「投稿」と同じような形で入力・保存ができていると思います。あとで表示確認でも使いますので、1、2つ入れておいてください。

組み込む部分のPHPにAdvanced Custom Fieldsの設定をする

この設定で最後!ちょっとややこしくなってきたかもしれませんが慣れですから大丈夫です。

FTPでアップした「news.php」のファイルに「カスタムフィールド」で設定した「テキスト」「画像」を読み込む設定をいれます。
前編の続きの状態ですと、今「news.php」には普通のhtmlが入っていると思います。
(例:divタグ~/divが入っている状態。)

ここからの作業はFTPは使わなくてもできます。
ダッシュボード」から「外観」→「テーマの編集」を選び、右のテンプレートメニューから「news.php」をクリックすると編集できる画面になりますので、そこで編集・保存をします。
ただし、ファイルが壊れてしまうことを気になるようでしたら、FTPでファイルをダウンロードしてバックアップを取ることをお勧めます。

htmlの内容が崩れない様に入れ込む部分に以下のようにソースを入れます。
ソース下の説明を確認しながら入れてみてください。

<?php 
    query_posts( array('post_type' => 'news' ,'showposts' => 1 ) );

    while(have_posts()) {
        the_post();

    $newsimg = get_field('news-img'); //画像のフィールド名
    $newstext = get_field('news-text'); //テキストのフィールド名
    $thumbnail = wp_get_attachment_image_src($newsimg, 'full');

	echo '<img src="'.$thumbnail[0].'" />';
	echo '<p>'.$newstext.'</p>';
    }

    wp_reset_query();
?>

細かい説明は今回は抜きにして説明します。

  1. 1行目:PHPを書くルールなのでこのまま気にせず。
  2. 2行目:ファイル名をnews.phpにしたら、function.phpも含めて全部newsとしてますので「news」のままで。
  3. 4~5行目:ここもルールなのでこのまま気にせず。
  4. 7行目:カスタムフィールドで「画像」に付けた「フィールド名」を入れます。
    フィールド名「news-img」を「$newsimg」に言い換えていると思ってください。
  5. 8行目:カスタムフィールドで「テキスト」に付けた「フィールド名」を入れます。
    フィールド名「news-text」を「$newstext」に言い換えていると思ってください。
  6. 9行目:投稿された画像を表示するための行なのでそのままで。画像なので7行目の「$newsimg」を入れてます。画像として扱いやすい様に「$thumbnail」に言い換えていると思ってください。
  7. 11行目:htmlの記載:画像を表示してます。気にせずこのままで。
  8. 12行目:hmtlの記載:入力されたテキストをpタグで表示します。
  9. 13~16行目:PHPを書くルールなのでこのまま気にせず。

11、12行目のhtmlを書く部分では、前編でnews.phpの中身はhtmlで書いてあると思いますのでそのまま移すように入れてください。

echo ‘ ここにhtmlを書く ‘;

この書き方で元のhtmlを入れていきます。
例えば、こんな感じになります。

<div style="margin:5px">

↓↓↓ 以下の様に書き換えます ↓↓↓

echo '<div style="margin:5px">';

htmlの状態で書かれていた「news.php」を、上記の「echo…」の形に書き換えたら、画面下にある「ファイルを更新」ボタンを押します。
すべての設定が上手くできていて、ページの崩れもなければ、先にテストデータを入れていれば、その内容が表示されているハズです。

表示されていれば完成です!!

なんとなーく、Wordpressの構造に触れた感じになりませんか? 構造の理屈がわかれば、好きなところに、好きなデータを入れて表示させることができます。

今回のポイントと
紹介アイテム

小さいところでも繰り返し入れていくことで大分カスタマイズに慣れてくると思います。僕もまだ入口に入っただけで勉強中ですが、ここが慣れると一線を越えられる感じでいろいろと出来る自信ができますw 今回は本当に単純な説明なので、他の記事も参考にカスタマイズに自信を持ってください!

あわせて読むと効果的な記事
【誰でもできる】ノンプログラマーでも出来るWordPressのダッシュボードにメニューを追加する方法(前編)
【誰でもできる】ノンプログラマーでも出来るWordPressのダッシュボードにメニューを追加する方法(前編)
ダッシュボードメニューに新しい項目を追加する方法を紹介します。
2016-09-11 18:28
【コピペOK】query_postsでランダムや日付順を指定する方法
【コピペOK】query_postsでランダムや日付順を指定する方法
大体の場合は「query_posts」の設定で解決できる場合が多いです。
2016-08-31 00:13
【コピペOK】Wordpress(ワードプレス)投稿画像からランダムで指定数だけ画像表示する
【コピペOK】Wordpress(ワードプレス)投稿画像からランダムで指定数だけ画像表示する
投稿された記事でアップした画像を、右カラムにランダムで指定
2016-07-10 10:03
【超簡単】WordPress(ワードプレス)にテキストエディタ使わずにメモを作る方法
【超簡単】WordPress(ワードプレス)にテキストエディタ使わずにメモを作る方法
ちょっとしたブログを書くポイントや参考にするサイトなどメモをとるとき多いですよね。
2016-08-28 17:18

ABOUTこの記事をかいた人

1998年からWEB関連の仕事に従事。角川グループのWEB会社に入社し、ディレクター、デザイナーとして経験を積む。2004年よりフリーランスとして活動し、2008年に法人を設立。サイトの制作だけでなく運用保守や紙媒体も行う。専門学校の非常勤講師も経験。