WordPressでアクションフックを使ってオリジナル設定画面を追加してみる

WordPressで管理画面にオリジナルの設定画面を追加してみます。

主にプラグインを作成する場合に、設定画面を追加する必要が生じると場合があります。
ただ、設定画面の追加は、アクションフックをプラグインに記述する事で実現できますが、functions.php上に記述しても同じ結果が得られます。

具体的なステップとしては、画面を構成するHTMLを含んだ関数1を構築し、その関数1をメニューに登録する処理を記述した関数2を記述し、そして関数2をアクションフックに登録するという流れになります。
初めてだと、この感覚を理解するのは難しいと思います。以下のサンプルを見ながら確認しましょう。

実際に静的な設定画面を追加してみる

以下のように、「オリジナル設定画面！！」とだけ表示する、特に意味をもたない静的な画面を記述します。

function option_test() {
  echo '<div class="wrap">';
  echo '<h2>オリジナル設定画面！！</h2>';
  echo '</div>';
}

上記関数をメニューに登録する関数「option_menu_test」を記述します。

function option_menu_test() {
  add_options_page('Title Test', 'Menu Test', 8, 'slug', 'option_test');
}

「add_options_page」は管理画面のメニュー「設定」のサブメニューとしてリンクを追加する関数です。
それぞれ引数には、ページタイトル、権限、スラッグ、そして設定画面のコールバック関数を設定します。

ちなみにメニュー「ツール」のサブメニューとする場合は「add_management_page」、「外観」の場合は「add_theme_page」で登録できます。

最後に、この関数をアクションフックで登録します。

add_action('admin_menu', 'option_menu_test');

実際に管理画面から確認して、以下のように表示されれば成功です。

オリジナルのオプション値を設定してみる

オリジナルのオプション値を設定するコードを試してみます。
先ほど設定画面としてコールバック関数に登録した「option_test()」内にページの内容を記述します。
以下、WordPressの公式ページを参考にした設定画面です。

function option_test() {

    $opt_val = get_option('my_option_test');

    if( $_POST['submit_flag'] == 'Y' ) {
        $opt_val = $_POST['my_option_test'];
        update_option('my_option_test', $opt_val);

?>
<div class="updated"><p><strong><?php _e('Options saved.', 'mt_trans_domain' ); ?></strong></p></div>
<?php
    }
?>

<div class="wrap">
<h2>オリジナル設定画面！！</h2>
<form name="form1" method="post" action="<?php echo str_replace( '%7E', '~', $_SERVER['REQUEST_URI']); ?>">
<input type="hidden" name="submit_flag" value="Y">
<p>テスト設定値：<input type="text" name="my_option_test" value="<?php echo $opt_val; ?>" size="20">
</p>
<hr />
<p class="submit">
<input type="submit" name="Submit" value="更新" />
</p>

</form>
</div>

<?php
}

3行目はDBから既存のオプション値を取得しています。関数update_optionで値を保存して、関数get_optionで取り出します。ここで名前を
「my_option_test」に指定していますが、DBのテーブル「wp_options」のカラム「option_name」が「my_option_test」のレコードのカラム「option_value」を参照しています。
5行目の判定では、更新ボタンを押したことでPOSTされる「submit_flag」のデータを読み取って、オプション値の保存処理を実行しています。
10行目はオプション値が更新された場合に出力されるメッセージです。
15行目～27行目で画面を構成しています。

以下、実際に管理画面を表示させてみたところです。

値を入力し「更新」ボタンを押した後に、実際にDBに値がセットされていれば成功です。

ちなみに、ページソースをテンプレートファイル「original_admin_page.php」などにまとめて、以下のようにして呼び出すことも可能です。このほうがソースもスッキリしますね。

function option_test() {
	include 'original_admin_page.php';
}

オプション値を呼び出す

上記サンプル画面で設定した値については、以下のようにして各種テンプレートで呼び出すことができます。

	get_option('my_option_test');