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

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

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

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

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

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

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

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

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

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

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

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

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

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

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の状態から書き換える。上記で設定した「フィールド名」を入れてください。
  3. <?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();
    ?>
    
  4. 表示確認できたら完成

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

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

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

あわせて読むと効果的な記事
【誰でもできる】ノンプログラマーでも出来るWordPressのダッシュボードにメニューを追加する方法(後編)
【誰でもできる】ノンプログラマーでも出来るWordPressのダッシュボードにメニューを追加する方法(後編)
ダッシュボードメニューに新しい項目を追加する方法の最後!
2016-09-12 11:23
【誰でもできる】ノンプログラマーでも出来る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年に法人を設立。サイトの制作だけでなく運用保守や紙媒体も行う。専門学校の非常勤講師も経験。