ワードプレス（WordPress）の設定ページを作成する

本当であればClassを使ったりした方がいいんだろうけど、ちょっとまだPHPに詳しくないのでfunctions.phpに書いてなるべくカンタンに分かりやすく作れる最低限のものを書いてみる。
正直まだちょっとよく分からない部分があるので「たぶん」で書きます。

最終的なコードを最初に書いちゃうパターン。

<?php
function register_my_setting_page() {
	add_menu_page('ページタイトル', 'メニュータイトル', 'edit_themes', 'my_setting_page', 'create_my_setting_page', 'dashicons-editor-help', 26.6);
	add_action( 'admin_init', 'register_my_setting_init' );
	add_action( 'admin_enqueue_scripts', 'register_my_setting_script' );
}
add_action('admin_menu', 'register_my_setting_page');

function create_holiday_setting_page() {
?>
<div class="wrap">
	<h2>設定タイトル</h2>
	<form method="post" action="options.php">
		<?php settings_fields( 'my_setting_group' ); ?>
		<?php do_settings_sections( 'my_setting_group' ); ?>
		<input type="text" name="holiday_setting" value="<?php echo esc_attr(get_option('holiday_setting')); ?>" />
		<?php submit_button(); ?>
	</form>
</div>
<?php
}

function register_my_setting_init() {
	register_setting( 'my_setting_group', 'my_setting' );
}

function register_my_setting_script() {
	wp_enqueue_script( 'jquery' );
	wp_enqueue_script( 'jquery-ui-core' );
	wp_enqueue_script( 'jquery-ui-selectable' );
}
?>

要件

WordPress管理画面の左メニューの「設定」の中にメニューを作る方法もあるが、クライアントさんが使う用にメニューを制限するので、

  • リンクはTOPレベルのメニューとして設置
  • データはwp_optionsに保存される（get_optionで取得できる）

としてます。

WordPress管理画面にメニューを追加する関数

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

引数の説明

$page_title
ページタイトル。その設定ページを開いたときのTITLEタグのものだと思われる。

$menu_title
メニュータイトル。管理画面の左メニューに表示されるテキストだと思われる。

$capability
メニューを表示するユーザーの権限。これちょっとよく分からないけど、管理者なら「edit_themes」、編集者なら「edit_posts」あたりでいいのかなー？

$menu_slug
メニューのスラッグ。これ何に使うかちょっと分からないけど設定ページのURLパラメータにはなっていた。

$function
メニューページを表示した時に実行される関数。まあページ内のソースと思っててもいいかと。

$icon_url
メニューアイコン。管理画面の左メニューに出るリンクのアイコン。テーマとかに画像あげて呼び出してもいいらしいけどわざわざ作るほどの手間かけるときってあまりないので、Dashiconを指定でいいかと。「dashicons-admin-comments」とか。

$position
表示位置。小数点指定するとかぶらないからいいらしい。

ただこの「add_menu_page」をfunctions.phpにペロっと書いてもエラー出るので、admin_menuのアクションに引っ掛けて呼び出すみたいです。

<?php
function register_my_setting_page() {
	add_menu_page('ページタイトル', 'メニュータイトル', 'edit_themes', 'my_setting_page', 'create_my_setting_page', 'dashicons-editor-help', 26.6);
}
add_action('admin_menu', 'register_my_setting_page');
?>

これでとりあえずメニューは出ますが、実行される関数とかも何も書いてないので駄目です。早まるな。
とりあえず実行される関数「create_my_setting_page」を設定しましょう。

<?php
function create_holiday_setting_page() {
	echo '<div class="wrap">';
	echo '<h2>設定タイトル</h2>';
	echo '</div>';
}
?>

これこのまんま作成した設定ページに表示されます。
インクルードでもしたい時は、

<?php
function create_holiday_setting_page() {
	require TEMPLATEPATH . '/my_setting.php';
}
?>

こういう感じでテーマ内にphpファイル用意して呼び出せばいい。

そしたら次はフォーム項目を用意していきますが、その前に、そのデータの保存先となる箱を用意する必要があるようです。
正直これもよく分かってないんですが、とりあえず

<?php
register_setting( $option_group, $option_name, $sanitize_callback );
?>

引数の説明

$option_group
設定グループ名。これよく分からん。でもこのページで使うものひとまとめでグループにしちゃっていいかなと。

$option_name
オプションの名前。フロントだとたぶんこれで呼び出すはず。

$sanitize_callback
値を無害化する関数。これ全然わからん。たぶん整形して正しい形で保存するんだと思うけど、一旦使わない、使えない汗。

これもアクションに引っ掛けて呼び出すんですが、今度はadmin_initらしい。

<?php
function register_holiday_setting_init() {
	register_setting( 'my_setting_group', 'my_setting' );
}
?>

これ自体は最初に実行した関数内で、呼び出すみたいなの。
つまり今の時点でのコードは

<?php
function register_my_setting_page() {
	add_menu_page('ページタイトル', 'メニュータイトル', 'edit_themes', 'my_setting_page', 'create_my_setting_page', 'dashicons-editor-help', 26.6);
	add_action( 'admin_init', 'register_my_setting_init' );
}
add_action('admin_menu', 'register_my_setting_page');

function create_holiday_setting_page() {
	echo '<div class="wrap">';
	echo '<h2>設定タイトル</h2>';
	echo '</div>';
}

function register_my_setting_init() {
	register_setting( 'my_setting_group', 'my_setting' );
}
?>

ちなみに設定ページでjQueryUIとか独自のjsとか呼び出したいときは、wp_enqueue_scriptを使うんですが、それ自体は

<?php
function register_my_setting_script() {
	wp_enqueue_script( 'jquery' );
	wp_enqueue_script( 'jquery-ui-core' );
	wp_enqueue_script( 'jquery-ui-selectable' );
}
add_action( 'admin_enqueue_scripts', 'register_my_setting_script' );
?>

こういう感じなんですが、これも設定ページのみで実行したいので、合わせると

<?php
function register_my_setting_page() {
	add_menu_page('ページタイトル', 'メニュータイトル', 'edit_themes', 'my_setting_page', 'create_my_setting_page', 'dashicons-editor-help', 26.6);
	add_action( 'admin_init', 'register_my_setting_init' );
	add_action( 'admin_enqueue_scripts', 'register_my_setting_script' );
}
add_action('admin_menu', 'register_my_setting_page');

function create_holiday_setting_page() {
	echo '<div class="wrap">';
	echo '<h2>設定タイトル</h2>';
	echo '</div>';
}

function register_my_setting_init() {
	register_setting( 'my_setting_group', 'my_setting' );
}

function register_my_setting_script() {
	wp_enqueue_script( 'jquery' );
	wp_enqueue_script( 'jquery-ui-core' );
	wp_enqueue_script( 'jquery-ui-selectable' );
}
?>

あとはページの中身ですね。
ごちゃるとややっこしいので、中身はインクルードしたパターンで、べにょっと書きます。

<div class="wrap">
	<h2>設定タイトル</h2>
	<form method="post" action="options.php">
		<?php
			// 設定を保存したりするためのhiddenとかを表示してるんだと思われる
			settings_fields( 'my_setting_group' );
			// 正直これが何をしてるのか分からないけど、公式にはこう書かれてたので何かしてるのかな？なくてもいけるのはいける
			do_settings_sections( 'my_setting_group' );
		?>
		<input type="text" name="holiday_setting" value="<?php echo esc_attr(get_option('holiday_setting')); ?>" />
		<?php
			// 送信ボタン
			submit_button();
		?>
	</form>
</div>

こんな感じです。

たぶんきっと、更新後の完了メッセージとか色々やれることあるんだと思うけど、とりあえず力尽きたのでここまで…。

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です