#はじめに

WordPressサイトをなんのために作るか。
だいたいの場合その答えは「パソコンの分からない人が楽に管理できるウェブサイトをつくる」に集約される。言い換えれば、クライアントが電話で「ここ分からないんですけど……」と聞いてくるようなサイトなら、それは存在する意味がないのだ。
だからこそ、作り手には「見つけやすい、迷いにくい、操作しやすい」設定ページを作ることが求められる。と思う。筆者は。

……とはいえ、初心者にとっては設定ページを作ることさえ簡単ではないというのも事実。
ここではタイトルの通りウェブサイトの特定の箇所を素人でも簡単に変更できるシステムの作り方について説明するので、「これウチで使えそう！」と思ったら使ってみて欲しい。

#やること

##STEP１：その部分を操作するための固定ページをつくる

いつも通り、左メニューの「固定ページ」→「新規追加」から編集画面に入り、右側にある「公開」ボタンを押して専用の固定ページを作ってやればよい。
肝心なのは、このとき公開状態を「非公開」にしておくこと。というのも、この固定ページそれ自体はユーザーに見せないからだ。
あくまでここで利用するのは、ここで入力した項目のほうなのである。

ちなみに今回は「トップページバナー」という項目を作っている。
※このあと筆者はなんやかんやあってこの固定ページの名前を「設定：トップページバナー」に変えました。

##STEP２：管理画面の見えるところに固定する

固定ページを編集画面として流用している関係上、そのままだと先ほど作った「トップページバナー」は他の固定ページに埋もれることになる。
それでは困るので、先ほど作ったページを管理画面の見やすい位置……ようは左に見えてる黒いメニューに持ってこよう。

まずは先ほど作った「設定：トップページバナー」を開いてみよう。

このような画面が出るはずだが、注目してほしいのは以下の部分。

これが必要になるのでどこかにメモしておく。
そして、functions.phpに以下のコードを記述しよう。

functions.php


//管理画面に優先度メニューを追加
function mt_add_pages() {
    add_menu_page( '設定：トップページバナー', '設定：トップページバナー', 'edit_pages', 'post.php?post=8&action=edit', '', 'dashicons-admin-customizer', 3);
}
add_action('admin_menu', 'mt_add_pages');

成功すると、管理画面が以下のように様変わりする。

あとは、新しく表示された「設定：トップバナー」をクリックすればいつでもこの編集画面に移動できる。

###余談

ちなみに、先ほどの関数のカスタマイズ方法も載せておく。

functions.php


//管理画面に優先度メニューを追加
function mt_add_pages() {
    add_menu_page( '[管理画面で表示されるタイトル]', '[管理画面で表示されるタイトル]', 'edit_pages', '[固定ページのURL、一部分でもOK]', '', '[タイトルの左に来るアイコンを指定]', [半角数字で、このメニューを表示する順番を書く]);
}
add_action('admin_menu', 'mt_add_pages');

※アイコンはこちらのページ、表示する順番はこのページに掲載されている。
※編集画面がウチのとなんか違う！と不安になった人は「Classic Editor」でググれ。

##STEP３：固定ページに入力項目を作成する

ところで今の固定ページ、そのままだと「タイトル」「パーマリンク」「本文」くらいしか入力項目がない。
ということは、この入力項目を設定することも必要となる。
方法は色々あるが、今回はプラグイン「Advanced Custom Field」、通称ACFを使って項目の設定を行おう。

プラグインに頼らない手もあるにはあるが、今回コレを選んだのには訳がある。
このACF、入力項目を簡単に「作る」ことができるだけでなく、「消す」こともできるからだ。

ACFの詳しい使い方はこちらのブログとこのブログに載っている。
細かい部分はそちらに譲るとして、今回はざっくり説明しよう。

まず、フィールドタイプを選択する。
次に、フィールド名に英数字でてきとうな内容を入力する。（フィールドラベルではないので注意だ。）
以上。これで終わりだ。

###おまけ
上述した「消す」とは、以下の画像にあるステータスのことを指す。（下の方にあります）

このようにチェックを入れることで、本来あったはずの「アイキャッチ」や「コンテンツエディタ」を消すことができるぞ。
たとえばこんなふうに。

##STEP４：出力コードをかく

さて、入力項目を作った以上、それを出力する必要も当然ある。
今回、独自の内容を挿入したい場所はトップページ(index.php)だから、index.phpを操作する。

まずは見た目を整えてやり。。。

次に、以下のコードを文章を記入したい場所に記述する。

index.php


<?php echo get_field('mycomment', 8); ?>

すると……

よし。うまくできた。

ところで、先ほどのコードで出てきた8、なんの数字か覚えているだろうか？

上の方で使ったページID。
ＡＣＦはこのように「フィールド名」と「入力画面となるページのページＩＤ」を入力することで、特定の固定ページに記入した内容を無関係な別のページに表示することができる。
この仕組みを応用することで、あたかも特定のページから別のページの一部分だけを編集できるような仕組みを作り上げることができるのだ。
なお、最終的に出来上がったのは以下のようなコードになる。

index.php


<style>
.in_the_sukima{
    background-color: #ffffff;
    border: double 6px #cd2653;
    width: 90%;
    margin: 1em auto 0 auto;
    padding: 1em 2em;
}
</style>
<div class="in_the_sukima">
    <p><?php echo get_field('mycomment', 8); ?></p>
</div>

もしあなたがこの記事を利用するつもりなら、'mycomment'のところをあなたが設定したフィールド名に、8のところを設定ページのページIDに変えればうまくいくはずだ。

#おわりに

分かりにくい点などあれば編集リクエストをお願いします。

#参考文献