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

WordPress

2025/12/31

WordPressの管理画面サイドバーに、独自のメニューと設定画面を追加する方法を解説します。
Settings APIを利用することで、設定値を安全に保存し、管理画面・フロント側の両方から利用できます。

実装場所

以下のコードはすべてfunctions.phpに記述します。
（テーマ・子テーマどちらでも可）

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

まずは、管理画面のサイドバーにオリジナルメニューを追加します。

PHP

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

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

メニューアイコンについて

省略、またはnullを指定した場合WordPressのデフォルトアイコンが使用される
Dashiconsや独自画像（SVG / PNGなど）も指定可能

Dashiconsを使う場合

PHP

'dashicons-admin-generic'

'dashicons-admin-generic'

Dashicons一覧（公式）

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

Dashicons以外に、独自のSVGファイルや画像URLを指定することもできます。

PHP

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

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

SVG作成時の注意点

サイズ目安：20×20px前後
viewBoxを必ず指定する
単色アイコン推奨
fill="currentColor"を使うと管理画面の色に追従する

※SVGはテーマやプラグイン配下に直接配置するのが安全です
（WordPressはデフォルトでSVGアップロードを制限しているため）

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,
);

$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,
);

メニューの表示位置について

第7引数$positionには数値を指定します。
省略した場合は管理画面サイドメニューの最下部に表示されます。

表示位置の公式一覧

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

次に、メニューをクリックしたときに表示される管理画面の内容を定義します。

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
}

// **********************************************
// メニュー画面のコンテンツ
// **********************************************
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');

// **********************************************
// 設定の登録
// **********************************************
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
}

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
}

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

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

register_setting()で保存された値は、get_option()を使ってどこからでも取得できます。
管理画面だけでなく、フロント側（テーマファイル）でも利用可能です。

基本的な取得方法

PHP

$value = get_option('field');

$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
}

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
}

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

header.phpやsingle.phpなど、テーマファイル内でも同様に取得できます。

PHP

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

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

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

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

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

オプションを配列で保存している場合も、取得方法は同じです。

PHP

$options = get_option('field');

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

$options = get_option('field');

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

参考リンク（WordPress公式ドキュメント）

管理画面メニューやSettings APIで使用した各関数の公式リファレンスです。

コメントを残す

一覧に戻る