2020-10-20/2023-05-23

管理画面メニューで設定画面を作成する

管理画面メニューで設定画面を作成する

管理画面に追加したメニューに実際に設定を保存するためのUIを作成します。

ほとんどをWordPressの機能を使用して作成できるため、1から作成するより負担が少なく、ユーザーに優しいです。

管理画面のメニューの

「追加」「非表示」「並び替え」「名前変更」

管理画面のメニュー追加、削除方法を参考にしてください。

設定画面の作成

独自で作成したメニューに設定画面の作成をします。

今回はアナリティクスのコードを挿入してもらう前提とします。

そこに入力すると自動でヘッダーに出力しますよっていう比較的テーマによくついている機能です。

まず、独自のメニュー部分です。

add_action( 'admin_menu', function() {
add_menu_page( 'サンプル設定', 'サンプル設定', 'manage_options', 'sample_setting', 'sample_callback', 'dashicons-hammer', 61 );
} );
function sample_callback() {
?>
<div>
<h2>サンプル設定</h2>
<form action="options.php" method="post">
<?php
settings_fields( 'sample_setting' );
do_settings_sections( 'sample_setting' );
submit_button();
?>
</form>
</div>
<?php
}

コールバック部分で設定画面作成のコードを呼び出しています。

setting_fields( $option_group );

hiddenフィールドをフォームに追加します。$option_groupはあとで紹介する「register_setting」で設定する値と同一にします。

do_settings_sections( $page );

登録されているセクションを表示させる関数です。$pageの値をあとで紹介する「add_settings_section」「add_settings_field」では指定します。

submit_button();

変更を保存ボタンが出力されます。

次にadmin_menuのフックしている関数に実際のフィールドを表示させる関数を追加します。

add_action( 'admin_menu', function() {
add_menu_page( 'サンプル設定', 'サンプル設定', 'manage_options', 'sample_setting', 'sample_callback', 'dashicons-hammer', 61 );
} );
add_action( 'admin_init',
register_setting( 'sample_setting', 'sample_tags');
add_settings_section( 'sample_setting_section', 'セクションタイトル', 'sample_section_setting_callback', 'sample_setting' );
add_settings_field( 'sample_setting_field', 'フィールドタイトル', 'sample_setting_field_callback', 'sample_setting', 'sample_setting_section');
);
function sample_section_setting_callback() {
?>
<p>サンプルの設定をしてください。</p>
<?php
}
function sample_setting_field_callback() {
$setting = wp_parse_args( get_option( 'sample_tags' ),
[
'tag' => '',
'analytics' => ''
]
);
?>
<p>サンプルタグ</p>
<textarea name="sample_tags[tag]" cols="60" rows="10">
<?php echo esc_attr( $setting['tag'] ); ?>
</textarea>
<p>アナリティクスタグ</p>
<textarea name="sample_tags[analytics]" cols="60" rows="10">
<?php echo esc_attr( $setting['analytics'] ); ?>
</textarea>
<?php
}
register_setting( $option_group, $option_name );

設定ページを登録する関数です。

$option_group」は先の「setting_field」と同じ値です。

$option_name」はフィールドの「name」属性で使用する名前になります。

add_settings_section( $id, $title, $callback, $page )

セクションの登録を行う関数です。

$id」はセクションのidを指定します。

$title」はセクションのタイトルを指定します。必要ない場合は「null」を代入しましょう。

$callback」はセクションに関する関数を指定します。必要ない場合は「null」で問題ありません。設定方法の案内等に使用するイメージです。

$page」は「do_settings_sections」に指定した値を指定します。

add_settings_field( $id, $title, $callback, $page, $section )

セクションにフィールドを出力する関数です。

$id」はフィールドのidを指定します。

$title」はフィールドのタイトルを指定します。

$callback」はセクションに関する関数を指定します。この部分で実際に出力させる「input」「select」などの記述を行います。

$page」は「do_settings_sections」に指定した値を指定します。

$section」はセクションidを指定します。

セクションのコールバックでは「wp_parse_args」を使用して初期値を指定しています。

「get_option」で取得できなかった部分を初期値で補うことが可能です。

今回はテキストエリアで空の文字列にしていますが、チェックボックスや、セレクトなどでは指定しておいた方が良いです。

また、name属性には「register_settings」で指定した値を入れますが、複数使用したい場合もあると思います。

その場合は、[]を使用し、配列にすると対応可能です。

以上の設定を行うと管理画面にはこのようになると思います。

実際に値の保存も可能です。

setting-field - setting-form
2020 KumaTechLab.