縦長ランディングページの効果測定しませんか詳細へ

WordPressプラグイン 独自プラグインで設定ページを作成する

ワードプレスではデータベースのテーブル「wp_options」に設定情報が保存されています。
設定を保存したり、呼び出したりする関数も用意されており、自前のオプションを管理するよりも簡単にできるようです。
ChatGPTにteサンプルソースをつくり、関数の役割を把握していきます。

目次

ChatGPTが生成したソース



function my_plugin_settings_page() {
    ?>
<div class="wrap">
	<h2>My Plugin Settings</h2>
	<form method="post" action="options.php">
		<?php
            // settings_fields関数を使用してnonceを生成し、設定項目を登録
            settings_fields( 'my_plugin_settings' );

            // セクションを表示
            do_settings_sections( 'my_plugin_settings_page' );

            // 保存ボタン
            submit_button();
            ?>
	</form>
</div>
<?php
}

// セクションを追加する関数
function my_plugin_section_callback() {
    echo '<p>これはセクションの説明です。</p>';
}

// フィールドを追加する関数
function my_plugin_field_callback() {
    $option = get_option( 'my_plugin_option' );
    echo '<input type="text" name="my_plugin_option" value="' . esc_attr( $option ) . '" />';
}

// 設定項目を登録
function my_plugin_register_settings() {
    // オプショングループを指定して設定項目を登録
    register_setting( 'my_plugin_settings', 'my_plugin_option' );

    // セクションを追加
    add_settings_section( 'my_plugin_section', 'セクションのタイトル', 'my_plugin_section_callback', 'my_plugin_settings_page' );

    // フィールドを追加
    add_settings_field( 'my_plugin_field', '設定項目のラベル', 'my_plugin_field_callback', 'my_plugin_settings_page', 'my_plugin_section' );
}

// 設定ページを追加
function my_plugin_menu() {
    add_menu_page( 'My Plugin Settings', 'Plugin Settings', 'manage_options', 'my_plugin_settings', 'my_plugin_settings_page' );
}

// 各種アクションフックを使用して設定ページを設定
add_action( 'admin_menu', 'my_plugin_menu' );
add_action( 'admin_init', 'my_plugin_register_settings' );

これで管理画面に「Plugin Settings」というメニューが追加され、クリックすると下記が表示されました。

testと入れて保存するとメッセージは表示されませんが、保存されているようです。
リロードしてもきちんとtestの文字が残ったままです。

データベースを確認するとwp_optionsテーブルにoption_name が「my_plugin_option」でoption_valueが「test」で登録されていました。

3つのテキストボックス、1つのラジオボタン、1つのセレクトボックス、1つのテキストエリアを含む設定ページ

こちらをへんこうすれば追加した設定ページに様々なフォームを表示できるのですが、ソースを見ても変数名が似ていて、よくわかりませんね。
条件を「3つのテキストボックス、1つのラジオボタン、1つのセレクトボックス、1つのテキストエリアを含む設定ページ」として再生成しています。

function my_plugin_settings_page() {
    ?>
    <div class="wrap">
        <h2>My Plugin Settings</h2>
        <form method="post" action="options.php">
            <?php
            // settings_fields関数を使用してnonceを生成し、設定項目を登録
            settings_fields('my_plugin_settings_group');

            // セクションを表示
            do_settings_sections('my_plugin_settings_page');

            // 保存ボタン
            submit_button('保存設定');
            ?>
        </form>
    </div>
    <?php
}

function text_field_callback($args) {
    $option = get_option($args['name']);
    echo '<input type="text" name="' . esc_attr($args['name']) . '" value="' . esc_attr($option) . '" />';
}

function radio_button_callback($args) {
    $option = get_option($args['name']);
    $checked = checked($option, $args['value'], false);
    echo '<label><input type="radio" name="' . esc_attr($args['name']) . '" value="' . esc_attr($args['value']) . '" ' . $checked . '> ' . esc_html($args['label']) . '</label><br>';
}

function select_box_callback($args) {
    $option = get_option($args['name']);
    echo '<select name="' . esc_attr($args['name']) . '">';
    foreach ($args['options'] as $value => $label) {
        $selected = selected($option, $value, false);
        echo '<option value="' . esc_attr($value) . '" ' . $selected . '>' . esc_html($label) . '</option>';
    }
    echo '</select>';
}

function textarea_callback($args) {
    $option = get_option($args['name']);
    echo '<textarea name="' . esc_attr($args['name']) . '">' . esc_textarea($option) . '</textarea>';
}

function my_plugin_register_settings() {
    // オプショングループを指定して設定項目を登録
    register_setting('my_plugin_settings_group', 'text_field_1');
    register_setting('my_plugin_settings_group', 'text_field_2');
    register_setting('my_plugin_settings_group', 'text_field_3');
    register_setting('my_plugin_settings_group', 'radio_button');
    register_setting('my_plugin_settings_group', 'select_box');
    register_setting('my_plugin_settings_group', 'textarea');

    // セクションを追加
    add_settings_section('text_section', 'テキストボックス', '', 'my_plugin_settings_page');
    add_settings_section('radio_section', 'ラジオボタン', '', 'my_plugin_settings_page');
    add_settings_section('select_section', 'セレクトボックス', '', 'my_plugin_settings_page');
    add_settings_section('textarea_section', 'テキストエリア', '', 'my_plugin_settings_page');

    // フィールドを追加
    add_settings_field('text_field_1', 'テキストボックス 1', 'text_field_callback', 'my_plugin_settings_page', 'text_section', ['name' => 'text_field_1']);
    add_settings_field('text_field_2', 'テキストボックス 2', 'text_field_callback', 'my_plugin_settings_page', 'text_section', ['name' => 'text_field_2']);
    add_settings_field('text_field_3', 'テキストボックス 3', 'text_field_callback', 'my_plugin_settings_page', 'text_section', ['name' => 'text_field_3']);
    add_settings_field('radio_button', 'ラジオボタン', 'radio_button_callback', 'my_plugin_settings_page', 'radio_section', ['name' => 'radio_button', 'value' => 'option1', 'label' => 'オプション 1']);
    add_settings_field('select_box', 'セレクトボックス', 'select_box_callback', 'my_plugin_settings_page', 'select_section', ['name' => 'select_box', 'options' => ['option1' => 'オプション 1', 'option2' => 'オプション 2']]);
    add_settings_field('textarea', 'テキストエリア', 'textarea_callback', 'my_plugin_settings_page', 'textarea_section', ['name' => 'textarea']);
}

// 設定ページを追加
function my_plugin_menu() {
    add_menu_page('My Plugin Settings', 'Plugin Settings', 'manage_options', 'my_plugin_settings', 'my_plugin_settings_page');
}

// 各種アクションフックを使用して設定ページを設定
add_action('admin_menu', 'my_plugin_menu');
add_action('admin_init', 'my_plugin_register_settings');

複数の要素にしたことで変数名も別れて書く関数の役割も見えてきました。

my_plugin_settings_page関数では実際にHTMLを表示させる元ページですね。
do_settings_sectionsで登録されたフォームを一気に表示させています。

my_plugin_register_settings関数ではフォームの項目をオプショングループに登録しています。
my_plugin_settings_pageで呼び出しているのはこのオプショングループです。


次にadd_settings_section関数でセクションを登録しています。セクションは設定ページ上にセクションのタイトルや説明などの情報を表示するために使用されます。
ユーザーに対して設定項目がどのセクションに属しているかを明確に示します。
書式は add_settings_section( $id, $title, $callback, $page ) です。
 $id: セクションの一意のID。通常、セクションを識別するために使用されます。
 $title: セクションのタイトル。設定ページに表示されます。
 $callback: セクションの説明やカスタムHTMLを表示するためのコールバック関数(省略可能)。
 $page: セクションを追加する設定ページのスラッグ。

add_settings_field関数で各フィールドを定義しています。
書式は add_settings_field( $id, $title, $callback, $page, $section, $args )です。
 $id: カスタムフィールドの一意のID。通常、フィールドを識別するために使用されます。
 $title: カスタムフィールドのラベルまたはタイトル。設定ページに表示されます。
 $callback: カスタムフィールドの表示と値の取得および更新を処理するコールバック関数。この関数はカスタムフィールドを設定ページに表示するために使用されます。
 $page: カスタムフィールドを追加する設定ページのスラッグ。
 $section: カスタムフィールドを配置するセクションのID。セクションは add_settings_section で定義されます。
 $args(省略可能): カスタムフィールドの追加情報を含む配列。この引数を使用して、追加の設定をフィールドに渡すことができます。
ここで定義したコールバック関数がtext_field_callback、radio_button_callback、select_box_callback、textarea_callbackです。

コールバック関数は引数でadd_settings_fieldで指定した$argsを受け取ってHTMLを生成します。

my_plugin_menu関数でメニューとつなぎ込みをしています。

独自関数が定義されたらWordPressの関数でメニューの定義とフォームの定義の登録を行っています。

add_action(‘admin_menu’, ‘my_plugin_menu’); メニューの設定
add_action(‘admin_init’, ‘my_plugin_register_settings’);フォームの定義の登録

これでやり方は分かりました。
思ったより手続きが多く、もっと簡単にできるのではと思ったのですが、wp_options テーブルに直接値を追加し、呼び出す方法は非推奨で、セキュリティ上のリスクやプラグインの互換性の問題が発生する可能性があるため、慎重に扱う必要があるとのことです。

// オプションを追加
add_option(‘my_option_name’, ‘my_option_value’);

// オプションを取得
$option_value = get_option(‘my_option_name’);

// オプションを更新
update_option(‘my_option_name’, ‘new_option_value’);

// オプションを削除
delete_option(‘my_option_name’);

他のプログラムないで安全とわかっている変数であれば利用できそうですが、今回はフォームからの登録なので推奨に従ってregister_settingを利用してつくろうと思います。

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

株式会社ねこすけの代表をしています。
2005年に創業しWebマーケティングを実践するためのコンサルティング、サイト構築、サイト運用、システム開発を行っています。
会員・顧客属性を利用したコンテンツ管理を得意としており、協会サイト、多ブランドのECサイト、会員向けコンテンツサイトなどを構築運営しています。Webマーケティングのパートナーがほしいと感じている方、ご相談ください。
月に1度のミーティングから細かなサイト保守まで必要な部分での対応が可能です。 問い合わせ

目次