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

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

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

ぜーんぶ、一気に話すとめっちゃ長いページになるので、前編と後編に分けますよ~
わかりやすい方法でhtmlでWEBサイトが作れる人だったらわかる方法で解説します!

組み込む過程でサイトが崩れてしまったら意味はありません。
そのあたりもやり易い方法で一緒にお伝えします。

(前編)

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

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

(後編)

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

(4)組み込む部分のPHPにAdvanced Custom Fieldsの値を当てはめる

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

(まとめ -Comming Soon-)

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

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

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

主にWEBサイトを作るときに、サイトデザインから入っている人向けになります。

最近では、出来上がった状態のテンプレートはよくあるので、なかなか難しいゼロからやることはないかもしれませんが、
Wordpressである、無料の簡易なテーマでも同じ考えなので、ぜひ参考にしてください。

テーマやデザインの中で「この部分に投稿して表示できる部分を作ろう」と決めます。

この部分に投稿して表示できる部分を作ろう

まず、html上で表示したい部分を切り分けて表示の崩れがないかを「確認」します。

[aside type=”normal”]

確認」は1つ元になっているhtmlファイルを2つに分けて、分けた側のファイルを外部ファイルとして読み込んで表示した時に崩れないようにという事です。
この部分はhtml制作・構造の話になると思いますので、ここではhtmlは分かっている前提です。「考え方」としていただければと思います。

[/aside]

いきなりWordpress上でやっても良いのですが、ブラウザーにドラッグアンドドロップで更新しながらすぐ確認できますし、WordpressはPHPでできているのでノンプログラマーにはちょっと抵抗もあるかと思うからです。

html上で表示したい部分ができたら、その部分の名称を考えます

必須ではないのですが、後でwordpress化した時にわかりやすくなります。
例えば、ニュースを入れる部分だったら、「news」という具合です。

newsという名前にする

名前を決めたら、テキストファイルに表示したい部分のhtmlをコピペして、「名前(news).php」という具合にファイル名を付けます。

名前(news).php」という具合にファイル名をつける

名前をつけたファイル(news.php)をFTPで他のファイルと同じ階層にアップします。

ファイルをアップする階層

アップしたら、管理画面の「外観」「テーマの編集」を開き、右のテンプレートの一覧に、news.phpがあることを確認します。

管理画面の「外観」「テーマの編集」で確認

元のファイルに以下のソースを入れます。
こうすることで、news.phpをこの部分に読み込むという形になります。

[css title=”PHP”]
<?php get_template_part(‘news’); ?>
[/css]

この時点で読み込みが出来ていれば、公開サイトを見たときにちゃんと一体化して崩れずに表示されてます。
表示されていれば、うまくカスタマイズしたい部分を切り分けて、カスタマイズできる形になりました!

試しに、news.phpを右のテンプレート一覧からクリックで選んで、変更をかけてみてください。
そのままファイルを保存更新すると公開ページに反映されるハズです。

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

WordPress(ワードプレス)にテキストエディタ使わずにメモを作る方法

WordPress(ワードプレス)にテキストエディタ使わずにメモを作る方法の記事で使った画像ですw 同じ内容になりますので、合わせてチェックしてください!

先に組み込んだ、news.phpをダッシュボードメニューにいれます。

まず、FTPでfunction.phpをダウンロードしてバックアップをとります。

または、「外見」「テーマの編集」から、テンプレート一覧から、function.phpをクリックしてファイルの中身を表示します。
表示されたfunction.phpのソースをすべてコピーして、テキストファイルにペーストして取っておきます。

function.phpに以下を記載。

[php title=”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);
}
[/php]

このままコピペして入れます。その際に、PHPのファイル名と同じ名前を入れます。

他は、ひとまずこのままでOKです。
細かい設定は、また後日ご紹介します。

function.phpを保存した後に、エラー表示でなければ成功です。

もしエラー表示や、ページが見れなくなったら、バックアップしたPHPを上書きでFTPでアップしてください。
それで元に戻ります。

表示に成功したら準備は完了です。ここまでの状態を確認。

  1. 「外見」「テーマの編集」のテーマに一覧にnews.phpがある。
  2. news.phpをクリックして、表示内容の変更(編集)をすることができる。
  3. 左のダッシュボードメニューにnews.phpがあり、クリックで投稿と同じ新規入力できる画面が表示する。
  4. ダッシュボードに表示されている状態

上記の3点ができていれば、この前編は終了です。
(後編へ-Comming Soon-)どうぞ!!

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

簡単に図も入れたのでわかるかと思います。少し面倒ですが、1つずつやっていけば問題なくできると思います!

あわせて読むと効果的な記事
[nlink url=”https://laplace.link/wordpress-cms/wordpress-dashboard-2/” title=”【誰でもできる】ノンプログラマーでも出来るWordPressのダッシュボードにメニューを追加する方法(後編)” excerpt=”ダッシュボードメニューに新しい項目を追加する方法の最後!”]

[nlink url=”https://laplace.link/wordpress-cms/wordpress-query-posts/” title=”【コピペOK】query_postsでランダムや日付順を指定する方法” excerpt=”大体の場合は「query_posts」の設定で解決できる場合が多いです。”]

[nlink url=”https://laplace.link/wordpress-cms/wordpress-randimg/” title=”【コピペOK】Wordpress(ワードプレス)投稿画像からランダムで指定数だけ画像表示する” excerpt=”投稿された記事でアップした画像を、右カラムにランダムで指定”]

[nlink url=”https://laplace.link/wordpress-cms/wordpress-memo/” title=”【超簡単】WordPress(ワードプレス)にテキストエディタ使わずにメモを作る方法” excerpt=”ちょっとしたブログを書くポイントや参考にするサイトなどメモをとるとき多いですよね。”]