STEP 3: 管理画面を作る｜WordPressプラグイン開発ガイド

🎯 このステップで作るもの

管理メニューに「マイプラグイン設定」という項目を追加し、テキストを入力・保存できる設定ページを作ります。保存したテキストはサイトのフロントエンドに表示されます。

                💡 学べること
                管理メニュー・サブメニューの追加方法
Settings API を使った設定ページの作成
オプションの保存（add_option / update_option）と取得（get_option）
nonce を使ったフォームのセキュリティ対策

            

📋 管理メニューの追加

WordPress管理画面の左サイドバーにメニューを追加するには、add_menu_page() を使います。

// 管理メニューを追加する関数
function mfp_add_menu() {
    add_menu_page(
        'マイプラグイン設定',  // ページタイトル
        'マイプラグイン',      // メニュータイトル（左サイドバーに表示）
        'manage_options',     // 必要な権限（管理者のみ）
        'my-first-plugin',    // メニューのスラッグ（一意のID）
        'mfp_settings_page',  // ページを表示する関数
        'dashicons-admin-plugins', // アイコン
        80                      // メニューの表示位置（数値が大きいほど下）
    );
}
add_action( 'admin_menu', 'mfp_add_menu' );
            

add_menu_page() のパラメータ

パラメータ	説明	例
page_title	ブラウザのタブに表示されるタイトル	'マイプラグイン設定'
menu_title	サイドバーに表示されるメニュー名	'マイプラグイン'
capability	このメニューを表示できる権限	'manage_options'（管理者）
menu_slug	URLに使われる一意の識別子	'my-first-plugin'
callback	ページのHTMLを出力する関数名	'mfp_settings_page'
icon_url	メニューアイコン（dashiconsまたはURL）	'dashicons-admin-plugins'
position	メニューの表示順序	80

サブメニューの追加

メニューの下にサブメニューを追加するには add_submenu_page() を使います。

function mfp_add_menu() {
    // トップレベルメニュー
    add_menu_page(
        'マイプラグイン設定', 'マイプラグイン',
        'manage_options', 'my-first-plugin',
        'mfp_settings_page', 'dashicons-admin-plugins', 80
    );

    // サブメニュー（一般設定）
    add_submenu_page(
        'my-first-plugin',   // 親メニューのスラッグ
        '一般設定',           // ページタイトル
        '一般設定',           // サブメニュータイトル
        'manage_options',     // 必要な権限
        'my-first-plugin',   // スラッグ
        'mfp_settings_page'  // コールバック関数
    );
}
add_action( 'admin_menu', 'mfp_add_menu' );
            

⚙️ Settings API を使った設定ページ

Settings API は WordPress が提供する設定管理の仕組みです。フォームの処理やバリデーション、セキュリティ対策を自動でやってくれるので、初心者でも安全な設定ページを作れます。

Settings API の基本的な流れ

① 設定を登録する（register_setting）

保存するオプション名を WordPress に登録します。

② セクションを追加する（add_settings_section）

設定ページをグループ分けするセクションを追加します。

③ フィールドを追加する（add_settings_field）

入力フォームの各フィールドを追加します。

④ フォームを表示する（settings_fields / do_settings_sections）

設定ページにフォームを出力します。

完全なコード例

// Settings API で設定を登録
function mfp_register_settings() {
    // オプション名を登録
    register_setting(
        'mfp_options_group', // オプショングループ名
        'mfp_options',        // オプション名
        'mfp_sanitize'         // サニタイズ（入力値の清浄化）関数
    );

    // セクションを追加
    add_settings_section(
        'mfp_section_main',   // セクションID
        '基本設定',             // セクションタイトル
        'mfp_section_callback', // セクションの説明を出力する関数
        'my-first-plugin'      // 表示するページのスラッグ
    );

    // フィールドを追加
    add_settings_field(
        'mfp_message',         // フィールドID
        '表示メッセージ',       // フィールドのラベル
        'mfp_message_callback', // フィールドを出力する関数
        'my-first-plugin',     // ページのスラッグ
        'mfp_section_main'     // 所属するセクションID
    );
}
add_action( 'admin_init', 'mfp_register_settings' );

// セクションの説明
function mfp_section_callback() {
    echo '<p>プラグインの基本設定を行います。</p>';
}

// メッセージフィールドの出力
function mfp_message_callback() {
    $options = get_option( 'mfp_options' );
    $message = isset( $options['message'] ) ? $options['message'] : '';
    echo '<input type="text" name="mfp_options[message]" value="'
        . esc_attr( $message )
        . '" class="regular-text">';
    echo '<p class="description">サイトに表示するメッセージを入力してください。</p>';
}

// 入力値のサニタイズ（不正な文字を除去）
function mfp_sanitize( $input ) {
    $output = array();
    if ( isset( $input['message'] ) ) {
        $output['message'] = sanitize_text_field( $input['message'] );
    }
    return $output;
}
            

設定ページのHTMLを出力する

function mfp_settings_page() {
    // 権限チェック
    if ( ! current_user_can( 'manage_options' ) ) {
        return;
    }
    echo '<div class="wrap">';
    echo '<h1>マイプラグイン設定</h1>';
    echo '<form method="post" action="options.php">';
    settings_fields( 'mfp_options_group' );  // nonce等のhidden項目を出力
    do_settings_sections( 'my-first-plugin' );  // セクションとフィールドを出力
    submit_button( '設定を保存' );            // 送信ボタンを出力
    echo '</form></div>';
}
            

💡 settings_fields() がやっていること

settings_fields() は、フォームに必要な nonce（後述）や action などの hidden フィールドを自動で出力してくれます。これにより、安全なフォーム送信が実現します。

💾 オプションの保存・取得

WordPress では設定値を「オプション」として wp_options テーブルに保存します。主に3つの関数を使います。

// オプションを保存（初回のみ）
add_option( 'mfp_options', array( 'message' => 'こんにちは！' ) );

// オプションを更新（存在しない場合は新規作成）
update_option( 'mfp_options', array( 'message' => 'こんにちは！' ) );

// オプションを取得
$options = get_option( 'mfp_options' );
$message = $options['message'] ?? 'デフォルトメッセージ';

// オプションを削除
delete_option( 'mfp_options' );
            

🎯 get_option() のデフォルト値

get_option( 'mfp_options', $default ) と書くと、オプションが存在しない場合に $default を返します。初回起動時のエラー防止に活用しましょう。

🔒 nonce によるセキュリティ対策

nonce（Number Used Once）は、フォーム送信が正規のユーザーによる操作かどうかを検証するための使い捨てトークンです。CSRF攻撃（クロスサイトリクエストフォージェリ）を防ぎます。

⚠️ なぜ nonce が必要か

nonce がないと、悪意あるサイトがあなたの管理画面を操作するリクエストを勝手に送信できてしまいます。Settings API を使う場合は settings_fields() が自動で nonce を出力してくれますが、独自フォームを作る際は必ず nonce を実装しましょう。

独自フォームでの nonce の使い方

// フォームに nonce フィールドを追加（出力側）
function mfp_custom_form() {
    echo '<form method="post">';
    // nonce フィールドを出力
    wp_nonce_field( 'mfp_save_action', 'mfp_nonce' );
    echo '<input type="text" name="mfp_text" value="">';
    echo '<button type="submit" name="mfp_submit">保存</button>';
    echo '</form>';
}

// フォーム送信の処理（受信側）
function mfp_handle_form() {
    // 送信ボタンが押されたか確認
    if ( ! isset( $_POST['mfp_submit'] ) ) {
        return;
    }
    // nonce を検証
    if ( ! wp_verify_nonce( $_POST['mfp_nonce'], 'mfp_save_action' ) ) {
        wp_die( '不正なリクエストです。' );
    }
    // 権限チェック
    if ( ! current_user_can( 'manage_options' ) ) {
        wp_die( '権限がありません。' );
    }
    // 入力値をサニタイズして保存
    $text = sanitize_text_field( $_POST['mfp_text'] );
    update_option( 'mfp_custom_text', $text );
}
add_action( 'admin_init', 'mfp_handle_form' );
            

💡 セキュリティの3点セット

フォーム処理では必ず以下の3つをセットで実装してください：

nonce の検証（wp_verify_nonce()）
権限の確認（current_user_can()）
入力値のサニタイズ（sanitize_text_field() など）

✏️ 演習：色を設定できる画面を作ろう

📝 課題

以下の機能を持つ設定ページを作成してください：

管理メニューに「テキスト色設定」を追加
カラーコード（例: #FF0000）を入力できるフィールドを用意
保存した色を get_option() で取得してフロントエンドに適用
nonce による検証を実装

✅ 次のステップに進む前のチェックリスト

add_menu_page() でメニューを追加できた
Settings API を使った設定ページを作成できた
オプションの保存・取得ができた
nonce の役割と使い方を理解した
サニタイズの必要性を理解した
演習問題に取り組んだ