PR

【WordPress】SettingsAPIでデータを配列にひとまとめ!チェックボックスはどうなる?

独自プラグインやワードプレスの管理画面に独自設定を追加する場合、SettingsAPIを使うと型に当てはめていくだけで慣れると簡単。

サンプルとして以下の記事で独自の設定画面を作ってみましたが、

ここでは完成したサンプルの設定画面に対して、
各設定値を1つの配列データとしてまとめてみます。

うまくいくか気になるのはやっぱり複数項目を持つチェックボックス。
果たしてすんなりと行くかな...

⇒「Settings APIの使い方まとめ」に戻る

サンプル設定画面のおさらい

今回作ったサンプルの設定画面はこちら。

2つのセクションを持ち、テキスト1行入力や、テキストエリア、ラジオボタン、複数チェックボックスといった6つのフィールドのある設定画面。

つまり変数は6つになりますが、これら個別の設定値を一つの配列にまとめてみます。

配列にするための変更箇所

Settings APIで作ったサンプル設定画面に対して、
設定値(変数)を配列に1まとめにするのに必要な変更箇所をまとめてみると、
以下のようになりますね。

設定画面の構成変更必要ありなし
(主な変更点)
手順1)
「メニュー情報」の関数名を指定
手順2)
「メニュー情報」の関数の具体的内容
手順3)
「設定画面」表示関数の具体的内容
セクションの追加
フィールドの追加
フィールドのコールバック関数
(テキスト入力やラジオボタンなどの表示)
変数を各々配列に変える
設定値と初期値を登録設定値と初期値を登録:
 初期値を配列(array)で指定する形式に変更
・register_setting の設定値名:
 個別の名前から、配列全体を指す共通の変数名へ変更
・register_setting の引数:
 最新の仕様に合わせ、データの型(type)が「array」であることを明示し、サニタイズ関数を1つにまとめて指定

全体をあれこれ変える必要はなく、直接関連するフィールドのコールバック関数や、Settings APIで使用する設定値(変数)を登録する register_setting の記述を見直すだけ。

ただし、1つの配列にまとめる場合は「サニタイズ(入力値のチェック)関数」も1つに統合されるため、配列内の各データ(テキスト、チェックボックスなど)に合わせた適切な検証処理をまとめて記述する必要があります。

ひとまとめにする配列

1まとめにする配列は以下と想定しておきます。

Code
$item_array	= array(
		'url'			=> '',		// ブログ情報:URL(input text)
		'title'			=> '',		// ブログ情報:タイトル(input text)
		'description'	=> '',		// ブログ情報:説明(textarea)
		'gender'		=> '',		// 管理者情報:性別(ラジオボタン)
		'interest'		=> array(),	// 管理者情報:興味(配列)(複数チェックボックス)
		'selfintro'	=> ''		// 管理者情報:自己紹介(textarea)
	);
Jin Simple Code Block

連想配列の形で、1まとめにした変数名は item_array。
キー「interest」のみが複数チェックボックスということで、あらかじめ空の配列( array() )をセットして、初期状態でエラーが出ないように準備しておきます。

この配列 item_array を使い、
フィールドのコールバック関数から順次修正してみましょう。

フィールドのコールバック関数の修正

ブログ情報)URL入力(input text)

【元のコード】

Code
//コールバック)ブログ情報:URL(1行テキスト入力:input(text))
function jin_test_setting_field_callback_url(){
    echo '<input name="item_url" id="field_id_url" type="text"
	maxlength="200" value="'.
	esc_url( get_option( 'item_url' ) ).'" />';
}
Jin Simple Code Block

【配列対応のコード】

Code
//コールバック)ブログ情報:URL(1行テキスト入力:input(text))
function jin_test_setting_field_callback_url(){
    // 保存されている配列を取得(なければ空の配列を代入)
    $options = get_option( 'item_array' ) ?: array();
    // キーが存在するか確認して値を取り出す(なければ空文字)
    $val = isset( $options['url'] ) ? $options['url'] : '';

    echo '<input name="item_array[url]" id="field_id_url" type="text"
	maxlength="200" value="' . esc_url( $val ) . '" />';
}
Jin Simple Code Block
  • 8行目:
    name属性を「item_array[url]」という形式に。こうすることで、WordPressが自動的に「item_array」という一つの配列の中に「url」というキーで値を保存してくれるようになる。
  • 4〜6行目:
    データの取得は get_option( 'item_array' ) で配列ごと取得。
    ただし、まだ一度も保存されていない場合にエラーが出るのを防ぐため、4行目で「空の配列」を準備し、6行目で「url」というキーがあるか確認してから値を取り出す、という安全な手順を踏んでいる。

ブログ情報)タイトル入力(input text)

【元のコード】

Code
//コールバック)ブログ情報:タイトル(1行テキスト入力:input(text))
function jin_test_setting_field_callback_title(){
    echo '<input name="item_title" id="field_id_title" type="text"
	maxlength="100" value="'.
	esc_attr( get_option( 'item_title' ) ).'" />';
}
Jin Simple Code Block

【配列対応のコード】

Code
//コールバック)ブログ情報:タイトル(1行テキスト入力:input(text))
function jin_test_setting_field_callback_title(){
    // 保存されている配列を取得(なければ空の配列を代入)
    $options = get_option( 'item_array' ) ?: array();
    // キーが存在するか確認して値を取り出す(なければ空文字)
    $val = isset( $options['title'] ) ? $options['title'] : '';

    echo '<input name="item_array[title]" id="field_id_title" type="text"
	maxlength="100" value="' . esc_attr( $val ) . '" />';
}
Jin Simple Code Block
  • 8行目:
    name属性を「item_array[title]」という形式に変更します。これで、複数の設定項目が「item_array」という一つの大きな箱(配列)の中に、「title」という名前の小部屋で整理されて保存されるようになる。
  • 4〜6行目:
    ここもURLの項目と同じ手順。まず4行目で設定データ全体を配列として読み込み、6行目で「title」というキーに値が入っているか確認してから取り出す。このひと手間を加えることで、設定がまだ空の状態でもエラーを出さずに安全に表示させることができるのだ。

ブログ情報)説明入力(textarea)

【元のコード】

Code
//コールバック)ブログ情報:説明(複数行テキスト入力:textarea)
function jin_test_setting_field_callback_description(){
    echo '<textarea name="item_description" id="field_id_description"
	rows="2" cols="30" maxlength="200">'.
	esc_textarea( get_option( 'item_description' ) ).'</textarea>';

	echo '<p>どんなブログかの簡単な説明</p>';
}
Jin Simple Code Block

【配列対応のコード】

Code
//コールバック)ブログ情報:説明(複数行テキスト入力:textarea)
function jin_test_setting_field_callback_description(){
    // 保存されている配列を取得(なければ空の配列を代入)
    $options = get_option( 'item_array' ) ?: array();
    // キーが存在するか確認して値を取り出す(なければ空文字)
    $val = isset( $options['description'] ) ? $options['description'] : '';

    echo '<textarea name="item_array[description]" id="field_id_description"
	rows="2" cols="30" maxlength="200">'.
	esc_textarea( $val ).'</textarea>';
 
	echo '<p>どんなブログかの簡単な説明</p>';
}
Jin Simple Code Block
  • 8行目:
    name属性を「item_array[description]」とし、これでtextareaの内容も一つの配列の中に格納されるようになる。
  • 4〜6行目:
    ここまでの項目と同様に、まずは get_option で配列全体を取得(4行目)。その後「description」というキーに値が入っているかを確認(6行目)してから表示。この手順を徹底することで、未入力時でもエラーが出ないプログラムになる。

管理者情報)性別選択(ラジオボタン)

【元のコード】

Code
//コールバック)管理者情報:性別(選択:ラジオボタン:input(radio))
function jin_test_setting_field_callback_gender(){
	$gender = esc_attr( get_option( 'item_gender' ) );
?>
	<label><input type="radio" name="item_gender" value="男性" 
	<?php checked( $gender, '男性' );  ?> >男性</label>
	
	<label><input type="radio" name="item_gender" value="女性" 
	<?php checked( $gender, '女性' );  ?> >女性</label>
	
	<label><input type="radio" name="item_gender" value="秘密" 
	<?php checked( $gender, '秘密' );  ?> >秘密</label>
	
<?php
}
Jin Simple Code Block

【配列対応のコード】

Code
//コールバック)管理者情報:性別(選択:ラジオボタン:input(radio))
function jin_test_setting_field_callback_gender(){
    // 保存されている配列を取得(なければ空の配列を代入)
    $options = get_option( 'item_array' ) ?: array();
    // キーが存在するか確認して値を取り出す(なければ空文字)
    $gender = isset( $options['gender'] ) ? $options['gender'] : '';
?>
	<label><input type="radio" name="item_array[gender]" value="男性" 
	<?php checked( $gender, '男性' );  ?> >男性</label>
	
	<label><input type="radio" name="item_array[gender]" value="女性" 
	<?php checked( $gender, '女性' );  ?> >女性</label>
	
	<label><input type="radio" name="item_array[gender]" value="秘密" 
	<?php checked( $gender, '秘密' );  ?> >秘密</label>
<?php
}
Jin Simple Code Block
  • 3〜6行目:
    配列にまとめる前は個別の変数(item_gender)だったところ、まずは get_option( 'item_array' ) と、ひとまとめにした配列を取得。
    その後、isset() を使って配列の中に「gender」というキーがあるか確認してから変数 $gender に代入。この手順を踏むことで、初期状態でもエラーが出ない安全なコードになる。
  • 8行目, 11行目, 14行目:
    name属性は全て item_array[gender] と配列の形に変更。

管理者情報)趣味チェック(チェックボックス)

【元のコード】

Code
//コールバック)管理者情報:興味(複数選択:チェックボックス:input(checkbox))
function jin_test_setting_field_callback_interest(){	
	$interest = get_option( 'item_interest' );
	$interest = sanitize_item_interest( $interest );	// サニタイズ
    ?>
    <label><input type='checkbox' name='item_interest[]' 
	<?php checked( in_array( '旅行', $interest ), true ); ?> value='旅行'>旅行</label>

    <label><input type='checkbox' name='item_interest[]'
	<?php checked( in_array( 'IT', $interest ), true ); ?> value='IT'>IT</label>

    <label><input type='checkbox' name='item_interest[]'
	<?php checked( in_array( '遊び', $interest ), true ); ?> value='遊び'>遊び</label>

<?php
}
Jin Simple Code Block

【配列対応のコード】

Code
//コールバック)管理者情報:興味(複数選択:チェックボックス:input(checkbox))
function jin_test_setting_field_callback_interest(){
    // 保存されている配列を取得(なければ空の配列を代入)
    $options = get_option( 'item_array' ) ?: array();
    // キー「interest」があるか確認し、なければ空の配列をセット
    $interest = isset( $options['interest'] ) ? $options['interest'] : array();

    // 自作のサニタイズ関数を通す(念のため)
    $interest = sanitize_item_interest( $interest );
    ?>
    <label><input type='checkbox' name='item_array[interest][]' 
	<?php checked( in_array( '旅行', $interest ), true ); ?> value='旅行'>旅行</label>

    <label><input type='checkbox' name='item_array[interest][]'
	<?php checked( in_array( 'IT', $interest ), true ); ?> value='IT'>IT</label>

    <label><input type='checkbox' name='item_array[interest][]'
	<?php checked( in_array( '遊び', $interest ), true ); ?> value='遊び'>遊び</label>
<?php
}
Jin Simple Code Block
  • 3〜6行目:
    配列にまとめる前は個別の変数(item_interest)だったところ、まずは get_option( 'item_array' ) で全体の配列を取得。
    その後、キー「interest」があるかを確認し、もし空(未チェック)でもエラーにならないよう、空の配列 array() を代入。これで $interest が常に配列の状態になり、後の処理で不具合が起きなくなる。
  • 11行目, 14行目, 17行目:
    name属性は、元々 item_interest[] と1次元の配列で指定していたものを、全て  item_array[interest][] とキー「interest」の2次元配列の形に変更。

3行目で取得するデータは変更前と同じく「配列」の形ですが、今のPHP環境(8系以降)でもエラーが出ないよう、サニタイズ関数もより安全な形に整えておきましょう。

特にチェックボックスは「一つも選ばない」というケースがあるため、その場合に「空の配列」として正しく処理させる記述に書き換えます。

Code
// サニタイズ(チェックボックスの配列用)
function sanitize_item_interest( $args ){
    // 配列でない(何も選ばれていない)場合は空の配列を返す
    $args = is_array( $args ) ? $args : array();
    // 各要素を安全な形に変換
    $args = array_map( 'esc_attr', $args );
    return $args;
}
Jin Simple Code Block

管理者情報)自己紹介(textarea)

【元のコード】

Code
//コールバック)管理者情報:自己紹介(複数行テキスト入力:textarea)
function jin_test_setting_field_callback_selfintro(){
    echo '<textarea name="item_selfintro" id="field_id_selfintro" 
	rows="2" cols="30" maxlength="200">'.
	esc_textarea( get_option( 'item_selfintro' ) ).'</textarea>';
	
	echo '<p>ブログの管理者はどんな人か簡単な自己紹介</p>';
}
Jin Simple Code Block

【配列対応のコード】

Code
//コールバック)管理者情報:自己紹介(複数行テキスト入力:textarea)
function jin_test_setting_field_callback_selfintro(){
    // 保存されている配列を取得(なければ空の配列を代入)
    $options = get_option( 'item_array' ) ?: array();
    // キーが存在するか確認して値を取り出す(なければ空文字)
    $val = isset( $options['selfintro'] ) ? $options['selfintro'] : '';

    echo '<textarea name="item_array[selfintro]" id="field_id_selfintro" 
	rows="2" cols="30" maxlength="200">'.
	esc_textarea( $val ).'</textarea>';
	
	echo '<p>ブログの管理者はどんな人か簡単な自己紹介</p>';
}
Jin Simple Code Block
  • 8行目:
    ここも他の項目と同じ。name属性を「item_array[selfintro]」として、配列の中に保存されるようにする。
  • 4〜6行目:
    データの取得もこれまでと同じ手順。
    get_option で配列全体を取得してから、「selfintro」というキーがあるか確認して値を取り出す。この「型」さえ覚えておけば、項目が増えても怖くない。

以上でフィールドのコールバック関数は配列への修正完了!

設定値と初期値を修正

設定値を配列のひとまとめにするので、初期値の指定などはガラっと変わります。

初期値の設定

【元のコード】

Code
//
// 初期値設定
//

//$item_url_init			= '';	// ブログ情報:URL
$item_title_init		= '';			// ブログ情報:タイトル
$item_description_init	= '';			// ブログ情報:説明
$item_gender_init		= '秘密';		// 管理者情報:性別
$item_interest_init	= array();		// 管理者情報:興味(空の配列を初期値としておく)
$item_selfintro_init	= '';			// 管理者情報:自己紹介

// URL:初期(まだ変数自体がない)または空の文字列では「http://」を表示する
if( esc_url( get_option( 'item_url' ) ) == false ){
	update_option( 'item_url' , 'http://' );
}
Jin Simple Code Block

【配列対応のコード】

Code
//
// 初期値設定
// (設定値はすべて配列 $item_array でひとまとめ)
//
	$default = array(
		'url' => 'http://', // ブログ情報:URL
		'title' => '', // ブログ情報:タイトル
		'description' => '', // ブログ情報:説明
		'gender' => '秘密', // 管理者情報:性別
		'interest' => array(), // 管理者情報:興味(空の配列を初期値としておく)
		'selfintro' => '' // 管理者情報:自己紹介
	);

//
// データベースに登録
//(まだデータベースに item_array がなければ登録して初期値を設定)
//
if ( false === get_option( 'item_array' ) ) {
    add_option( 'item_array', $default );
}
Jin Simple Code Block
  • 5行目~12行目:
    連想配列の形で初期値を指定。
    複数チェックボックスの「interest」は配列にしておく。
  • 18行目~20行目:
    元のコードでは url の設定値に限って、何も入力されてない場合には「http://」をガイド代わりに表示したい、ということから、まだデータベースに設定項目が登録されてない場合、または空文字の場合には初期値「http://」としてデータベースに登録していた。

    配列で一塊のデータとして扱うようにしたことから、配列全体を初期値とともに登録する形に変更し、url項目に空文字列が設定された場合の対応は、下方にあるサニタイズ関数にまとめてみた。

設定値の登録(register_setting)

【元のコード】

Code
//
// 設定値の登録
//

// ブログ情報:URL
register_setting(
	'jin-test-setting-field-group',	// ① グループ名(settings_fieldsで設定されたもの)
	'item_url',	// ② inputやtextareaなどのname要素と合わせる
	'esc_url' 	// ③ サニタイズ関数
);
// ブログ情報:タイトル
register_setting(
	'jin-test-setting-field-group',	// ① グループ名(settings_fieldsで設定されたもの)
	'item_title',	// ② inputやtextareaなどのname要素と合わせる
	array(
		'sanitize_callback' => 'esc_attr', 	// ③ サニタイズ関数
		'default' => $item_title_init			// ④ 初期値
	)
);
// ブログ情報:説明
register_setting(
	'jin-test-setting-field-group',	// ① グループ名(settings_fieldsで設定されたもの)


  ( ----- 以下省略 ----- )

Jin Simple Code Block

【配列対応のコード】

Code
//
// 設定値の登録
//(Settings API で扱う設定値を登録)
//
register_setting(
	'jin-test-setting-field-group',	// ① グループ名
	'item_array',			// ② 設定値名(配列名)
	array(
		'type'              => 'array',	     // データ型が配列であることを明示
		'sanitize_callback' => 'item_sanitize' // ③ サニタイズ関数
	)
);
Jin Simple Code Block
  • 5行目~13行目:
  • 登録時には type => array を指定。これでWordPress側へ「このデータは配列として扱う」と正しく伝えられ、安全に処理されるようになる。
  • ②には共通の配列名「item_array」を設定。
  • ③のサニタイズも1つに集約。以前のように項目ごとに esc_url などを書くのではなく、次で作成する「item_sanitize」という関数の中で、配列の中身をまとめて一気にお掃除する形に変更。

見た目が一気にスッキリしましたが、
これは「サニタイズ(安全化/無害化)のタイミング」が変わったから。

以前:登録(register_setting)する時に、項目ごとに「esc_url」などを指定してましたが、今回登録時は「item_sanitizeという関数でまとめて無害化する」と予約だけしておき、実際の無害化の中身は次で作る関数の中にすべて集約している。

つまり、register_setting の見た目は変わっても、守りの固さは変わらない。

サニタイズ関数

【元のコード】

Code
//
// 設定値の登録
//

// ブログ情報:URL
register_setting(
	'jin-test-setting-field-group',	// ① グループ名(settings_fieldsで設定されたもの)
	'item_url',	// ② inputやtextareaなどのname要素と合わせる
	'esc_url' 	// ③ サニタイズ関数
);
// ブログ情報:タイトル
register_setting(
	'jin-test-setting-field-group',	// ① グループ名(settings_fieldsで設定されたもの)
	'item_title',	// ② inputやtextareaなどのname要素と合わせる
	array(
		'sanitize_callback' => 'esc_attr', 	// ③ サニタイズ関数
		'default' => $item_title_init			// ④ 初期値
	)
);
// ブログ情報:説明
register_setting(
	'jin-test-setting-field-group',	// ① グループ名(settings_fieldsで設定されたもの)
	'item_description',	// ② inputやtextareaなどのname要素と合わせる
	array(
		'sanitize_callback' => 'esc_textarea', 	// ③ サニタイズ関数
		'default' => $item_description_init		// ④ 初期値
	)
);

以下略
Jin Simple Code Block

【配列対応のコード】

Code
// ③ サニタイズ関数(データの安全化処理をまとめて行う)
function item_sanitize( $args ){
    // データが配列でない場合は空の配列として扱う(エラー防止)
    if ( ! is_array( $args ) ) {
        return array();
    }

    foreach( $args as $key => $value ){
        switch( $key ){
            case 'url':          // ブログ情報:URL
                // 空文字だったら「http://」を補完
                if( $value == '' ){
                    $value = "http://";
                }
                $args[ $key ] = esc_url( $value );
                break;

            case 'title':        // ブログ情報:タイトル
            case 'gender':       // 管理者情報:性別
                $args[ $key ] = sanitize_text_field( $value );
                break;

            case 'description':  // ブログ情報:説明
            case 'selfintro':    // 管理者情報:自己紹介
                $args[ $key ] = sanitize_textarea_field( $value );
                break;
                
            case 'interest':     // 管理者情報:興味(複数選択)
                $args[ $key ] = sanitize_item_interest( $value );
                break;

            default:
                // 未定義のキーが含まれていた場合は、安全のため削除するかそのまま通す
                break;
        }
    }
    
    return $args;
}
Jin Simple Code Block
  • 全体
  • 以前は設定項目ごとに register_setting で安全化処理(サニタイズ)を指定していたが、配列化に伴い1つの関数「item_sanitize」に集約。
  • 配列データを受け取り、foreach と switch case を使って、各項目(キー)ごとに最適な安全化関数を割り当てる形に変更。

  • 10行目~14行目:
  • URLの項目が空だった場合に「http://」を自動補完する処理も、この共通関数の中に移動。
  • こうして一箇所にまとめることで、どの項目にどの安全化処理を適用しているかが一目で把握できるようになり、メンテナンス性が大幅に向上。

こうして一箇所にまとめることで、どの項目にどの安全化処理を適用しているかが一目で把握できるようになり、メンテナンス性も大幅に向上!

コード全体で変更箇所をチェック!

データを配列にひとまとめにした修正コード全体像は以下。

黒マーカーの箇所が変更したところですが、
全体で見ると部分的な修正で配列への変更ができました。

Code
<?php
// ------------------------------------
// 手順1)「メニュー情報」の関数名を指定(関数Bを指定)
// ------------------------------------
add_action( 'admin_menu', 'jin_test' );


// ------------------------------------
// 手順2)「メニュー情報」の関数の具体的内容(関数B)
// ------------------------------------
function jin_test(){
	add_options_page(
		'JIN Test Settings',		// ① ページタイトル
		'JINテスト用設定',			// ② メニュー名
		'manage_options',			// ③ メニューが表示されるユーザー権限
		'jin-test-setting-slug',	// ④ メニューのスラッグ
		'jin_test_setting_func'	// ⑤ 「設定画面」表示の関数名(関数Aを指定)
	);
}

// ------------------------------------
// 手順3)「設定画面」表示関数の具体的内容(関数A)
// ------------------------------------
function jin_test_setting_func(){ ?>
 
	<div class="wrap">
	<h1>JINのテスト用設定画面なのだ</h1>
	<form method="post" action="options.php">
	 
	<?php settings_fields( 'jin-test-setting-field-group' ); ?>
	<?php do_settings_sections( 'jin-test-setting-slug' ); ?>
	<?php submit_button(); ?>
	 
	</form>
	</div>
 
<?php
};

/* ------------------------------------
セクションの追加
------------------------------------ */
//admin_initフックを使って呼び出す
function jin_test_setting_section_init() {
	
	//ブログ情報のセクション1
	add_settings_section(
		'jin_test_setting_section_id1', 		// ① ID
		'ブログ情報', 							// ② セクションのタイトル
		'jin_test_setting_section_callback1', // ③ コールバック関数1
		'jin-test-setting-slug' 				// ④ 設定ページSlug
	);
	
	//管理者情報のセクション2
	add_settings_section(
		'jin_test_setting_section_id2', 		// ① ID
		'管理者情報', 							// ② セクションのタイトル
		'jin_test_setting_section_callback2', // ③ コールバック関数2
		'jin-test-setting-slug' 				// ④ 設定ページSlug
	);
 
}
add_action('admin_init', 'jin_test_setting_section_init');
 
// ③ コールバック関数
// ブログ情報用
function jin_test_setting_section_callback1() {
    echo '<p>ブログの情報を入力してね</p>';
}
// 管理者情報用
function jin_test_setting_section_callback2() {
    echo '<p>管理者の情報を入力してね</p>';
}

/* ------------------------------------
フィールドの追加
------------------------------------ */
//admin_initフックを使って呼び出す
function jin_test_settings_fields_init(){
	//フィールド(ブログ情報):URL
	add_settings_field(
		'field_id_url',	// ① id:⑥でlabel_forを指定する場合、inputタグなどのid属性に同じ文字列を設定する
		'URL',				// ② フィールドのタイトル(設定項目のラベル)
		'jin_test_setting_field_callback_url',	// ③ input要素などを表示するコールバック関数
		'jin-test-setting-slug',					// ④ 設定画面のスラッグ
		'jin_test_setting_section_id1',			// ⑤ 表示するセクションのID
		array( 'label_for' => 'field_id_url' )	// ⑥ 配列:省略可。'label_for'を指定して①のidを入れると、項目名をlabelタグで囲んでくれる
	);
	//フィールド(ブログ情報):タイトル
	add_settings_field(
		'field_id_title',		// ① id:⑥でlabel_forを指定する場合、inputタグなどのid属性に同じ文字列を設定する
		'タイトル',				// ② フィールドのタイトル(設定項目のラベル)
		'jin_test_setting_field_callback_title',	// ③ input要素などを表示するコールバック関数
		'jin-test-setting-slug',					// ④ 設定画面のスラッグ
		'jin_test_setting_section_id1',			// ⑤ 表示するセクションのID
		array( 'label_for' => 'field_id_title' )	// ⑥ 配列:省略可。'label_for'を指定して①のidを入れると、項目名をlabelタグで囲んでくれる
	);
	//フィールド(ブログ情報):説明
	add_settings_field(
		'field_id_description',	// ① id:⑥でlabel_forを指定する場合、inputタグなどのid属性に同じ文字列を設定する
		'説明',					// ② フィールドのタイトル(設定項目のラベル)
		'jin_test_setting_field_callback_description',	// ③ input要素などを表示するコールバック関数
		'jin-test-setting-slug',					// ④ 設定画面のスラッグ
		'jin_test_setting_section_id1',			// ⑤ 表示するセクションのID
		array( 'label_for' => 'field_id_description' )	// ⑥ 配列:省略可。'label_for'を指定して①のidを入れると、項目名をlabelタグで囲んでくれる
	);

	//フィールド(管理者情報):性別
	add_settings_field(
		'field_id_gender',	// ① id:⑥でlabel_forを指定する場合、inputタグなどのid属性に同じ文字列を設定する
		'性別',				// ② フィールドのタイトル(設定項目のラベル)
		'jin_test_setting_field_callback_gender',	// ③ input要素などを表示するコールバック関数
		'jin-test-setting-slug',					// ④ 設定画面のスラッグ
		'jin_test_setting_section_id2',			// ⑤ 表示するセクションのID
	);
	//フィールド(管理者情報):興味
	add_settings_field(
		'field_id_interest',	// ① id:⑥でlabel_forを指定する場合、inputタグなどのid属性に同じ文字列を設定する
		'興味',					// ② フィールドのタイトル(設定項目のラベル)
		'jin_test_setting_field_callback_interest',	// ③ input要素などを表示するコールバック関数
		'jin-test-setting-slug',						// ④ 設定画面のスラッグ
		'jin_test_setting_section_id2',				// ⑤ 表示するセクションのID
	);
	//フィールド(管理者情報):自己紹介
	add_settings_field(
		'field_id_selfintro',	// ① id:⑥でlabel_forを指定する場合、inputタグなどのid属性に同じ文字列を設定する
		'自己紹介',				// ② フィールドのタイトル(設定項目のラベル)
		'jin_test_setting_field_callback_selfintro',	// ③ input要素などを表示するコールバック関数
		'jin-test-setting-slug',						// ④ 設定画面のスラッグ
		'jin_test_setting_section_id2',				// ⑤ 表示するセクションのID
		array( 'label_for' => 'field_id_selfintro' )	// ⑥ 配列:省略可。'label_for'を指定して①のidを入れると、項目名をlabelタグで囲んでくれる
	);
}
add_action('admin_init', 'jin_test_settings_fields_init');

// ------------------------------------
// フィールドのコールバック関数
// label_forを使う場合、input要素のidはadd_settings_fieldのidと同じにする
// ------------------------------------
//コールバック)ブログ情報:URL(1行テキスト入力:input(text))
function jin_test_setting_field_callback_url(){
    echo '<input name="item_array[url]" id="field_id_url" type="text"
	maxlength="200" value="'.
	esc_url( get_option( 'item_array' )['url'] ).'" />';
}
//コールバック)ブログ情報:タイトル(1行テキスト入力:input(text))
function jin_test_setting_field_callback_title(){
    echo '<input name="item_array[title]" id="field_id_title" type="text"
	maxlength="100" value="'.
	esc_attr( get_option( 'item_array' )['title'] ).'" />';
}
//コールバック)ブログ情報:説明(複数行テキスト入力:textarea)
function jin_test_setting_field_callback_description(){
    echo '<textarea name="item_array[description]" id="field_id_description"
	rows="2" cols="30" maxlength="200">'.
	esc_textarea( get_option( 'item_array' )['description'] ).'</textarea>';

	echo '<p>どんなブログかの簡単な説明</p>';
}

//コールバック)管理者情報:性別(選択:ラジオボタン:input(radio))
function jin_test_setting_field_callback_gender(){
	$gender = esc_attr( get_option( 'item_array' )['gender'] );
?>
	<label><input type="radio" name="item_array[gender]" value="男性" 
	<?php checked( $gender, '男性' );  ?> >男性</label>
	
	<label><input type="radio" name="item_array[gender]" value="女性" 
	<?php checked( $gender, '女性' );  ?> >女性</label>
	
	<label><input type="radio" name="item_array[gender]" value="秘密" 
	<?php checked( $gender, '秘密' );  ?> >秘密</label>
	
<?php
}
//コールバック)管理者情報:興味(複数選択:チェックボックス:input(checkbox))
function jin_test_setting_field_callback_interest(){	
	$interest = get_option( 'item_array' )[ 'interest' ];
	$interest = sanitize_item_interest( $interest );	// サニタイズ
    ?>
    <label><input type='checkbox' name='item_array[interest][]' 
	<?php checked( in_array( '旅行', $interest ), true ); ?> value='旅行'>旅行</label>

    <label><input type='checkbox' name='item_array[interest][]'
	<?php checked( in_array( 'IT', $interest ), true ); ?> value='IT'>IT</label>

    <label><input type='checkbox' name='item_array[interest][]'
	<?php checked( in_array( '遊び', $interest ), true ); ?> value='遊び'>遊び</label>

<?php
}
// サニタイズ(チェックボックスの配列用)
function sanitize_item_interest( $args ){
	$args = isset( $args ) ? (array) $args : [];
	$args = array_map('esc_attr', $args);
	return $args;
}

//コールバック)管理者情報:自己紹介(複数行テキスト入力:textarea)
function jin_test_setting_field_callback_selfintro(){
    echo '<textarea name="item_array[selfintro]" id="field_id_selfintro" 
	rows="2" cols="30" maxlength="200">'.
	esc_textarea( get_option( 'item_array' )['selfintro'] ).'</textarea>';
	
	echo '<p>ブログの管理者はどんな人か簡単な自己紹介</p>';
}

/* ------------------------------------
設定値と初期値を登録
------------------------------------ */
//admin_initフックを使って呼び出す
function jin_test_settings_values_init(){
	//
	// 初期値設定
	// (設定値はすべて配列 $item_array でひとまとめ)
	//
	$default	= array(
			'url'			=> 'http://',	// ブログ情報:URL
			'title'			=> '',			// ブログ情報:タイトル
			'description'	=> '',			// ブログ情報:説明
			'gender'		=> '秘密',		// 管理者情報:性別
			'interest'		=> array(),		// 管理者情報:興味(空の配列を初期値としておく)
			'selfintro'	=> ''			// 管理者情報:自己紹介
		);

	//
	// データベースに登録
	//(まだデータベースに item_array がなければ登録して初期値を設定)
	//
	if( get_option( 'item_array' ) == false ){
		update_option( 'item_array', $default );
	}
	
	//
	// 設定値の登録
	//(Settings API で扱う設定値を登録)
	//
    register_setting(
		'jin-test-setting-field-group',	// ① グループ名(settings_fieldsで設定されたもの)
		'item_array',	// ② 設定値名:inputやtextareaなどのname要素と合わせる
		'item_sanitize' 	// ③ サニタイズ関数
	);

}
add_action('admin_init', 'jin_test_settings_values_init');

// ③ サニタイズ関数
function item_sanitize( $args ){
	foreach( $args as $key => $value ){
		switch( $key ){
			case 'url':			// input text	:ブログ情報)URL
				// 空文字だったら「http://」を付ける
				if( $value == ''){
					$value = "http://";
				}
				
				$args[ $key ] 		= esc_url( $value );
				break;

			case 'title':			// input text	:ブログ情報)タイトル
			case 'description':	// textarea	:ブログ情報)説明
			case 'gender':			// input radio	:管理者情報)性別
			case 'selfintro':		// textarea	:管理者情報)自己紹介
				$args[ $key ] 		= esc_attr( $value );
				break;
				
			case 'interest':		// input checkbox:管理者情報)興味
				// コールバックの所で定義したサニタイズ(チェックボックスの配列用)
				$args[ $key ] 		= sanitize_item_interest( $value );
				break;

			default:				// エラー表示
				echo '<br>no case:'.$key.'<br>';
		}
	}
	
	return $args;
}
?>
Jin Simple Code Block

あとは作った設定画面のデザインをCSSでちょっとだけ整える、
みたいなことをしてみましょう。(別記事でやってみます)

⇒「Settings APIの使い方まとめ」に戻る

早期退職して海外で奮闘する JIN のメールマガジン

時間や場所に縛られず稼いだJINが教える

~ 最短で月収10万円稼げるようになる方法 ~

お名前/ニックネーム

隣のあの人にも、思わず教えたくなる秘密

配信停止は、いつでもできます

迷惑メールは一切配信されませんので、ご安心くださいね

自らの手で未来を変える力を手に入れる!

コメント