[WP Plugin Dev] Settings API を利用した Custom Admin Menu の作り方

公開日: 2017/07/28
更新日: 2018/10/03

Settings API を利用するとフォームの作成で楽ができそうなので調べました。

Settings API

こちらで「WordPressのディフォルトのユーザーインターフェイスと親和性の高い管理画面を構築することができます。」と紹介されていました。

サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル
サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル

posted with amazlet at 17.07.28
SBクリエイティブ (2014-08-07)
売り上げランキング: 74,203
Amazon.co.jpで詳細を見る

著者さまのブログのフォロー記事と Codex の情報。

Settings APIは、テーマやプラグインから管理画面に独自の設定保存領域を作るためのAPIで、バリデーションや保存などの大部分をWordPressに任せることができる便利なものです。

なるほど、ということで Custom Admin Menu を作成して試そうと考えたのですが、イマイチどのようなコードを書けば良いのかイメージできませんでした。

Google 先生にたずねたところ、こんなジェネレータを発見。
参考にさせて頂きました。

サンプルの概要

ジェネレータのコードでうまく動かないところや変更点も含めたメモ。

  • 「ダッシュボード＞設定＞deadwood2」に Custom Admin Menu を表示します。
  • div.wrap を追加、 h1 を移動しました。
  • チェックボックス2つ。
  • null で Notice: Undefined index が発生するので、isset でチェックしています。
  • checked() のシンタックスがうまく動かないよう（$checked と $current が逆？）。Settings API のサンプルコードに寄せました。
  • add_settings_field() に引数をとって、render 関数をまとめました。
  • データは wp_options にこのような形式で入っていました。
option_id   option_name option_value    autoload
1708    dw2_settings    a:2:{s:20:"dw2_checkbox_field_0";s:1:"1";s:20:"dw2_checkbox_field_1";s:1:"1";}  yes

サンプルコード

チェックボックスをいっぱい作れるようになりましたね。:-)

<?php
add_action( 'admin_menu', 'dw2_add_admin_menu' );
add_action( 'admin_init', 'dw2_settings_init' );
// ------------------------------------------------------------------
// Add admin menu page in "admin_menu"
// ------------------------------------------------------------------
function dw2_add_admin_menu() {
    add_options_page( 'deadwood2', 'deadwood2', 'manage_options', 'deadwood2', 'dw2_options_page' );
}
// ------------------------------------------------------------------
// Add form fields & section description in "admin_init"
// ------------------------------------------------------------------
function dw2_settings_init() {
    register_setting( 'pluginPage', 'dw2_settings' );
    add_settings_section(
        'dw2_pluginPage_section',
        __( 'Your section description', 'deadwood2' ),
        'dw2_settings_section_callback',
        'pluginPage'
    );
    add_settings_field(
        'dw2_checkbox_field_0',
        __( 'Settings field description 0', 'deadwood2' ),
        'dw2_checkbox_field_render',
        'pluginPage',
        'dw2_pluginPage_section',
        array(
            'field_name' => 'dw2_checkbox_field_0',
            'label' => 'label 0',
        )
    );
    add_settings_field(
        'dw2_checkbox_field_1',
        __( 'Settings field description 1', 'deadwood2' ),
        'dw2_checkbox_field_render',
        'pluginPage',
        'dw2_pluginPage_section',
        array(
            'field_name' => 'dw2_checkbox_field_1',
            'label' => 'label 1',
        )
    );
}
// ------------------------------------------------------------------
// The callback functions for rendering
// ------------------------------------------------------------------
function dw2_checkbox_field_render( $args ) {
    $options = get_option( 'dw2_settings' );
    $field_name = $args['field_name'];
    $label = $args['label'];
    if ( isset( $options[ $field_name ] ) ) {
        $current = $options[ $field_name ];
    } else {
        $current = '';
    }
    echo '<input name="dw2_settings[' . $field_name . ']" id="dw2_settings[' . $field_name . ']" type="checkbox" value="1" class="code" ' . checked( 1, $current, false ) . ' />' . $label;
}
function dw2_settings_section_callback() {
    echo __( 'This section description', 'deadwood2' );
}
// ------------------------------------------------------------------
// The callback function for admin menu page
// ------------------------------------------------------------------
function dw2_options_page() {
    ?>
    <div class="wrap">
        <h1>deadwood2</h1>
        <form action='options.php' method='post'>
            <?php
            settings_fields( 'pluginPage' );
            do_settings_sections( 'pluginPage' );
            submit_button();
            ?>
        </form>
    </div>
    <?php
}