YURI TORIYAMA Portfolio

管理画面のサイドバーにオリジナルメニューを追加する

WordPress
menu

管理画面サイドメニューを追加する

PHP
// **********************************************
// サイドメニューの追加
// **********************************************
function add_custom_menu()
{
    add_menu_page(
        'title', // 管理画面のページタイトル
        'menu', // サイドバーに表示されるメニュー名
        'administrator', // メニューを表示できるユーザー権限
        'menu', // メニューのスラッグ（ページ識別子）
        'menu_func', // ページ内容を出力するコールバック関数
        null, // メニューアイコン
        25, // メニューの表示位置
    );
}
add_action('admin_menu', 'add_custom_menu');

Dashiconsを使う場合

PHP
'dashicons-admin-generic'

Dashicons一覧（公式）

独自SVGアイコンを使う場合

PHP
add_menu_page(
    'title',
    'menu',
    'administrator',
    'menu',
    'menu_func',
    get_template_directory_uri() . '/images/menu-icon.svg',
    25,
);

Data URI（インラインSVG）を使う場合

PHP
$svg = 'data:image/svg+xml;utf8,' . rawurlencode(
    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
        <path d="..." />
    </svg>'
);

add_menu_page(
    'title',
    'menu',
    'administrator',
    'menu',
    'menu_func',
    $svg,
    25,
);

表示位置の公式一覧

メニュークリック時に表示される画面

PHP
// **********************************************
// メニュー画面のコンテンツ
// **********************************************
function menu_func()
{
    // 権限チェック
    if (!current_user_can('administrator')) {
        wp_die('このページにアクセスするための十分な権限がありません。');
    }
?>
    <div class="wrap">
        <h1>メニュー</h1>

        <form action="options.php" method="post">
            <?php
            settings_fields('menu'); // register_setting()で指定した設定グループ名
            do_settings_sections('menu'); // add_settings_section()で指定したページスラッグ
            submit_button(); // 保存ボタン
            ?>
        </form>
    </div>
<?php
}

設定セクション・フィールドの登録

PHP
// **********************************************
// 設定の登録
// **********************************************
function settings()
{
    // セクションの追加
    add_settings_section(
        'section', // セクションID（一意）
        '見出し', // セクション見出し
        'section_description', // セクション説明のコールバック（不要ならnull）
        'menu', // 表示するページのスラッグ
    );

    // 入力フィールドの追加
    add_settings_field(
        'field', // フィールドID（HTMLのidとは別）
        'フィールド', // 管理画面に表示されるラベル
        'field', // 入力欄を出力するコールバック関数
        'menu', // 表示するページのスラッグ
        'section', // 所属させるセクションID
    );

    // 設定の登録
    register_setting(
        'menu', // 設定グループ名（settings_fields()と一致させる）
        'field', // 保存されるオプション名（wp_options.option_name）
    );
}
add_action('admin_init', 'settings');

セクション説明文（任意）

PHP
function section_description()
{
?>
    <p>セクション見出し直下に表示される説明文</p>
<?php
}

入力フィールドの定義

PHP
function field()
{
    // name属性の値はregister_setting()の第2引数（option_name）と一致させる
?>
    <textarea name="field" rows="5" cols="40"><?php form_option('field'); ?></textarea>
<?php
}

get_option()を使って保存した値を表示する

PHP
$value = get_option('field');
  • 'field'はregister_setting()の第2引数（option_name）
  • 保存されていない場合はfalseが返る

管理画面内で表示する

PHP
function menu_func()
{
    if (!current_user_can('administrator')) {
        wp_die('このページにアクセスするための十分な権限がありません。');
    }

    $value = get_option('field');
?>
    <div class="wrap">
        <h1>メニュー</h1>

        <p>現在の保存値：</p>
        <pre><?php echo esc_html($value); ?></pre>

        <form action="options.php" method="post">
            <?php
            settings_fields('menu');
            do_settings_sections('menu');
            submit_button();
            ?>
        </form>
    </div>
<?php
}

フロント側（テーマファイル）で使う

PHP
<?php
$value = get_option('field');

if (!empty($value)) {
    echo esc_html($value);
}
?>

配列として保存している場合

PHP
$options = get_option('field');

echo esc_html($options['example']);

Loading...