WordPress

WordPressの管理画面に独自の設定ページを作り変数として利用する

投稿日:

WordPress の管理画面に独自の設定ページを作る方法になかなか苦戦したのですが、やり方さえわかれば簡単な事でした。独自の設定ページで設定した内容をサイト上で使う事も可能です。

独自の設定ページを作る理由

ブログサイトをやる上で独自の設定ページは必要ないかもしれません。また php の知識があって自分で触れるなら尚更必要ありません。

必要になるのは自分で更新しないサイトを作ってあげる場合です。php の知識がない人がソースを開いて編集するのはハードルが高すぎます。

その為、独自の設定ページを作れば誰でも簡単に内容を編集できるわけです。

独自の設定画面の作り方

独自の設定画面を作るには、テーマ編集で function.php を編集します。

メニュー追加

add_action( 'admin_menu', 'my_setting_page' );
function my_setting_page() {
	add_menu_page('ページの名前', 'メニューの名前', '権限', 'メニューの識別子', '呼び出す関数', 'アイコン', 順番);
}

まずはこれだけで管理画面に独自の項目を追加できます。

  • ページの名前:タイトルタグに表示されるページの名前
  • メニューの名前:管理画面のメニューに表示される名前
  • 権限:管理画面で設定を行うには「manage_options」にする
  • メニューの識別子:php ソース上でメニューを識別する名前
  • 呼び出す関数:内容を表示する関数
  • アイコン:メニューのアイコンを指定
  • 順番:管理画面のメニューに表示する順番

デフォルトで存在するメニューの項目にも順番となる数字が割り当てられています。空いている数字に独自の設定メニューを追加していけます。

  • 2 - ダッシュボード
  • 5 - 投稿
  • 10 - メディア
  • 15 - リンク
  • 20 - 固定ページ
  • 25 - コメント
  • 60 - 外観(テーマ)
  • 65 - プラグイン
  • 70 - ユーザー
  • 75 - ツール
  • 80 - 設定

それらを踏まえるとこのようなソースになります。

add_menu_page('独自設定', '独自設定', 'manage_options', 'my_setting', 'add_my_setting', 'dashicons-welcome-learn-more', 3);

呼び出す関数名や識別子はアルファベットで何でも構いません。

設定ページの中身

設定ページの中身は前述の呼び出す関数から行います。同様にテーマ編集の function.php の中に記載します。

function add_my_setting() {
	include TEMPLATEPATH ."/my-setting.php";
}

function.php の中に書くとダラダラと長くなって見づらくなるので、外部の php を読み込むと見やすくなります。

TEMPLATEPATH は WordPress のテーマのパスが格納されている定数です。

以下は include で読み込んだ php ファイルです。

add_option('num1');
if ($_REQUEST['num1']) update_option('num1', $_REQUEST['num1']);
echo '<form method="post" action="admin.php?page=my_setting">';
echo '設定:<input type="text" name="num1" value="'. get_option('num1') .'" />';
submit_button();
echo '</form>';

ただテキストボックス1個と保存ボタンがあるだけのシンプルなものです。

add_option で num1 というサイトで使えるオプション(変数)を追加します。

2行目は num1 に更新があったら変数を更新しています。

3行目の action 内には、独自で作った設定画面の URL を入力します。page = の後は、前述のメニューの識別子です。

4行目は現在の設定値を最初から表示しておくために value の中に get_option で num1 を表示しています。

submit_button で保存ボタンを表示しています。

変数の利用

テーマの中で独自の設定画面で設定した内容を使うには、以下のようにします。

echo get_option('num1');

これだけでサイト上に表示できます。

保存後に設定を保存しましたという表示を出したい

現在のままだと保存ボタンを押しても、何も変化が起きぬまま保存されるだけです。どうせなら「保存しました」など通知してほしいですよね。

そんな時にはこれを追加します。

if(isset($_POST['num1'])){ 
    echo '<div id="settings_updated" class="updated notice is-dismissible"><p><strong>設定を保存しました。</strong></p></div>';
}

更新ボタンを押すと POST メソッドで設定値を通信します。独自の設定ページを開いた時点では $_POST['num1'] には何も入っていません。

isset は変数の中身が存在しているかを判定します。更新ボタンを押した時だけ $_POST['num1'] の中身が存在する事になりますから、更新ボタンを押した時に「設定を保存しました。」が表示される仕組みです。

-WordPress

Copyright© ウェブミスト(Webmist) , 2020 AllRights Reserved Powered by STINGER.