WordPress管理画面に独立したカスタムメニューを追加する

2014/05/17
WordPress

WordPressで構築したサイトについて、その一部分、例えば「今日の一言」みたいなコンテンツを管理画面から更新したいというようなことは多いと思います.

更新内容を蓄積させていくのならカスタム投稿を使えば良いと思いますが、今回は管理画面のメニューに独立したページとして設定画面を作成してみます.

↑このあたりに追加します.

以下のコードをfunctions.phpなりに記述してください.

if( is_admin() && is_user_logged_in() ){
	// 設定画面におけるコンテンツ部分のhtmlを出力する
	function my_little_setting_html(){
		echo <<< EOD
			<div class="wrap">
				<h2>ちょっとした設定</h2>
				<form action="" method="post">
					<div>
						<h3>今日の一言</h3>
						<div><textarea style="width:60%;height:160px;" name="word_of_day"></textarea></div>
					</div>
					<div style="margin:16px 0 0 0;">
						<input type="submit" value="更新" class="button button-primary" />
					</div>
				</form>
			</div>
EOD;
	}

	// 管理画面のサイドメニューにオリジナルの項目を追加する
	function add_my_little_setting_custom_menu(){
		add_menu_page('ちょっとした設定', 'ちょっとした設定', 'edit_posts', 'menu_my_little_setting', 'my_little_setting_html');
	}

	// add_menu_page()をadmin_menuにフックする
	add_action('admin_menu', 'add_my_little_setting_custom_menu');
}

さて、実はこれだけで設定ページは追加されました.

アクセスしてみるとこんな感じです.

※更新はまだできません.

コードの解説

管理画面メニューにオリジナルのカスタムメニューを追加するにはadd_menu_page()を使用します.

Function Reference/add menu page « WordPress Codex

この記事の執筆時点(14/05/17, wp最新:3.9.1)において、日本語版のWordPress Codexの該当ページは古くなっていますので、英語版を参照してください(引数が違っていたりします).

正しい使用法はこのようになります.

<?php add_menu_page($page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position); ?>

add_menu_page()は、内部でadd_menu_page()を実行する任意の関数をadmin_menuにフックして使用します.

<?php add_action('admin_menu', 'add_my_little_setting_custom_menu'); ?>

「今日の一言」を更新できるようにする

上に書いたものだけでは、「設定するためのページを作っただけ」ですから、ちゃんと動くようにしてみましょう.

今回のような、ちょっとしたものをWordPressに保存しておきたい場合には、update_option() / get_option()が便利です.

Function Reference/update option « WordPress Codex
Function Reference/get option « WordPress Codex

update_optionはサイトオプションを更新するための関数です.

通常は「管理画面 > 設定 > 一般」などにおいてサイト名やサイトの説明などのオプション更新に使用されていますが、独自のオプション情報を保存することもできます.

使い方はこのようになります.

<?php update_option($key, $value); ?>

オプション情報はkey-value形式で保存されます.

$keyには他と被らない任意の文字列, $valueにはそのキーで保存する値(配列等も可能)を渡してください.

オプション情報を更新する仕組みを組み込んだものが以下です(コード全文).

if( is_admin() && is_user_logged_in() ){
	// menu_my_little_settingによるオプション情報の更新
	if( !empty($_POST['from_my_little_setting_html']) && current_user_can('edit_posts') ){
		if( isset($_POST['for_word_of_day']) ){
			update_option('word_of_day', $_POST['for_word_of_day']);// 保存
		}
	}

	// menu_my_little_settingのコンテンツを出力
	function my_little_setting_html(){
		$func = __FUNCTION__;
		$wod = get_option('word_of_day');// 読み込み
		echo <<< EOD
			<div class="wrap">
				<h2>ちょっとした設定</h2>
				<form action="" method="post">
					<div>
						<h3>今日の一言</h3>
						<div><textarea style="width:60%;height:160px;" name="for_word_of_day">{$wod}</textarea></div>
					</div>
					<div style="margin:16px 0 0 0;">
						<input type="hidden" name="from_{$func}" value="1" />
						<input type="submit" value="更新" class="button button-primary" />
					</div>
				</form>
			</div>
EOD;
	}

	// カスタムメニューを登録
	function add_my_little_setting_custom_menu(){
		add_menu_page('ちょっとした設定', 'ちょっとした設定', 'edit_posts', 'menu_my_little_setting', 'my_little_setting_html');
	}
	add_action('admin_menu', 'add_my_little_setting_custom_menu');
}

コードの解説

はじめのコードから、追加した点は以下の2つです.

オプション情報の更新処理
コンテンツの出力関数内で、オプション情報の取得と、更新処理に向けたフォーム項目の追加

current_user_can()の引数にはadd_menu_page()で指定したユーザー権限と同じものを設定するようにしてください.

以上です.

この記事へコメントする

※承認制のため、即時には反映されません。

WordPress管理画面に独立したカスタムメニューを追加する