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

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

WordPressのカスタマイズの入り口の大事な部分なので、解説を分けたりまとめたり。PVからもちょっとつまらないかなぁとテンションダウン中ですが、最後なので頑張りますw

WordPressを使ってサイト構築する際に、避けては通れないダッシュボードメニューに新しい項目を追加する方法を紹介するまとめです!
僕もそうですが、めんどくせー要点だけ知りたいという方はこちらでどうぞー

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

ダッシュボードメニューに入れる部分を決める。

  1. html上で表示したい部分を切り分けて表示の崩れがないかを「確認」します。
  2. html上で表示したい部分ができたら、その部分の名称を考えます
  3. 名前をつけたファイル(news.php)をFTPで他のPHPファイルと同じ階層(function.phpと同じ階層)にアップします。
  4. 元のファイルに以下のソースを入れます。こうすることで、news.phpをこの部分に読み込むという形になります。
[php]
<!--?php get_template_part('news')?-->;
[/php]

この部分の詳細が書かれている記事はこちら ≫(1)Wordpressでダッシュボードメニューに入れる部分を決める。

htmlに慣れている方はここは飛ばしても良い部分です。

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

  1. news.phpをダッシュボードメニューにいれます。
  2. FTPでfunction.phpをダウンロードしてバックアップをとります。
  3. function.phpに以下を記載。
[php title="function.phpに追記"]
add_action('init', 'add_news_post_type');
function add_news_post_type() {
$params = array(
'labels' =&amp;amp;amp;amp;gt; array(
'name' =&amp;amp;amp;amp;gt; 'News',
'singular_name' =&amp;amp;amp;amp;gt; 'news',
'add_new' =&amp;amp;amp;amp;gt; '新規追加',
'add_new_item' =&amp;amp;amp;amp;gt; 'サイトを新規追加',
'edit_item' =&amp;amp;amp;amp;gt; 'サイトを編集する',
'new_item' =&amp;amp;amp;amp;gt; '新規サイト',
'all_items' =&amp;amp;amp;amp;gt; 'サイト一覧',
'view_item' =&amp;amp;amp;amp;gt; 'サイトの説明を見る',
'search_items' =&amp;amp;amp;amp;gt; '検索する',
'not_found' =&amp;amp;amp;amp;gt; 'サイトが見つかりませんでした。',
'not_found_in_trash' =&amp;amp;amp;amp;gt; 'ゴミ箱内にサイトが見つかりませんでした。'
),
'public' =&amp;amp;amp;amp;gt; true,
'supports' =&amp;amp;amp;amp;gt; array(
'title',
),
);
register_post_type('news', $params);
}
[/php]

この部分の詳細が書かれている記事はこちら ≫(2)入れる部分を決めたらWordpressで組み込める形にする

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

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

この部分の詳細が書かれている記事はこちら(3)ダッシュボードメニューのカスタマイズしやすいプラグインの準備

Advanced Custom Fieldsの設定をする

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

この部分の詳細が書かれている記事はこちら ≫(4)Advanced Custom Fieldsの設定をする

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

    1. FTPでアップした「news.php」のファイルに「カスタムフィールド」で設定した「テキスト」「画像」を読み込む設定をいれます。
    2. 以下の様に「news.php」をhtmlの状態から書き換える。上記で設定した「フィールド名」を入れてください。
[php title="news.phpに記載される内容"]
&amp;amp;lt;?php
query_posts( array('post_type' =&amp;amp;amp;amp;gt; 'news' ,'showposts' =&amp;amp;amp;amp;gt; 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 '&amp;amp;lt;img src="'.$thumbnail[0].'" /&amp;amp;gt;';
echo '&amp;amp;lt;p&amp;amp;gt;'.$newstext.'&amp;amp;lt;/p&amp;amp;gt;';
}

wp_reset_query();
?&amp;amp;gt;
[/php]
  1. 表示確認できたら完成

この部分の詳細が書かれている記事はこちら ≫(5)組み込む部分のPHPにAdvanced Custom Fieldsの設定をする

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

今回はカスタマイズする入口の記事なので、なるべく詳細に書きました。おかげでページ数が増え、専門的な内容なのでPVも上がらず、テンションが下がりましたw やっぱり面白い記事じゃないとだめだなーと実感しました。

タイトルとURLをコピーしました