1. ホーム
  2. WordPress

【WordPress】add_menu_page・add_submenu_page で管理画面にメニューを追加する方法

Share

プラグインや自作テーマに「独自の設定ページ」を用意したいとき、まず必要になるのが管理画面の左メニューへの項目追加です。WordPress には add_menu_page()(トップレベルのメニュー)と add_submenu_page()(その下のサブメニュー)という関数が用意されており、これらを使えばプラグインなしのコードだけでメニューと専用ページを作れます。この記事では、両関数の使い方・引数の意味・登録の手順を、動かせるコード例とあわせて解説します。

メニュー追加は admin_menu フックで行う

メニューを追加する関数は、いつ呼んでもよいわけではありません。管理画面のメニューが組み立てられる admin_menu アクションフックのタイミングで呼ぶ必要があります。そのため、add_action('admin_menu', ...) に登録した関数の中で add_menu_page() などを呼ぶ、という形が基本になります。

functions.php
<?php
// admin_menu フックでメニュー登録用の関数を呼ぶ
add_action('admin_menu', 'mytheme_register_menu');

function mytheme_register_menu() {
    // この中で add_menu_page() などを呼ぶ
}

add_menu_page でトップレベルメニューを追加する

add_menu_page() は、管理画面の左サイドバーに新しいトップレベルメニュー(「投稿」「固定ページ」などと同じ階層の親メニュー)を追加します。基本の書き方は次のとおりです。

functions.php
<?php
add_action('admin_menu', 'mytheme_register_menu');

function mytheme_register_menu() {
    add_menu_page(
        'マイ設定',              // ページのタイトル(<title> に入る)
        'マイ設定',              // メニューに表示するラベル
        'manage_options',        // 表示に必要な権限(ケイパビリティ)
        'mytheme-settings',      // メニューのスラッグ(一意の識別子)
        'mytheme_settings_page', // ページ本体を出力する関数名
        'dashicons-admin-generic', // アイコン
        80                       // 表示順(位置)
    );
}

// ページの中身を出力する関数
function mytheme_settings_page() {
    echo '<div class="wrap"><h1>マイ設定</h1><p>ここに設定項目を置きます。</p></div>';
}

これで左メニューに「マイ設定」が追加され、クリックすると mytheme_settings_page() が出力した内容が表示されます。各引数の意味を表で整理します。

引数意味
$page_titleページを開いたときのブラウザのタイトル
$menu_titleメニューに表示されるラベル
$capability表示を許可する権限。管理者向けなら manage_options
$menu_slugメニューを識別する一意の文字列(URL に使われる)
$callbackページ本体を出力する関数名
$icon_urlアイコン。dashicons- 系の名前や画像 URL
$positionメニューの表示位置(数値が小さいほど上)

$capabilitymanage_options を指定すると、サイトの設定を変更できる管理者だけにメニューが表示されます。アイコンは WordPress 標準の Dashicons から選べ、dashicons-admin-genericdashicons-chart-bar のように名前で指定します。

add_submenu_page でサブメニューを追加する

トップレベルメニューの下に項目を増やしたいときは add_submenu_page() を使います。第1引数に「どの親メニューにぶら下げるか」を表す親スラッグを渡すのがポイントです。先ほど作った mytheme-settings の下にサブメニューを足してみましょう。

functions.php
<?php
add_action('admin_menu', 'mytheme_register_menu');

function mytheme_register_menu() {
    add_menu_page(
        'マイ設定', 'マイ設定', 'manage_options',
        'mytheme-settings', 'mytheme_settings_page',
        'dashicons-admin-generic', 80
    );

    // 「マイ設定」の下にサブメニューを追加
    add_submenu_page(
        'mytheme-settings',       // 親メニューのスラッグ
        '詳細オプション',          // ページのタイトル
        '詳細オプション',          // サブメニューのラベル
        'manage_options',         // 権限
        'mytheme-advanced',       // このサブメニューのスラッグ
        'mytheme_advanced_page'   // ページ本体を出力する関数
    );
}

function mytheme_advanced_page() {
    echo '<div class="wrap"><h1>詳細オプション</h1></div>';
}

親メニュー自身もサブメニューになる

add_menu_page() でトップレベルメニューを作ると、その親メニューと同じ内容の項目が、サブメニューの一番上に自動で表示されます。ラベルが「マイ設定 > マイ設定」のように重複して見えるのはこのためです。最初のサブメニューのラベルを変えたい場合は、親と同じスラッグを add_submenu_page() の第1引数と第5引数の両方に指定して、ラベルだけ上書きします。

既存メニューの下に追加することもできる

add_submenu_page() の親スラッグには、自分で作ったメニューだけでなく WordPress 標準のメニューも指定できます。たとえば「設定」メニューの下に追加したいなら、親スラッグに options-general.php を渡します。設定系のページを1つ足したいだけなら、専用の add_options_page() を使うと同じことがより簡潔に書けます。代表的な親スラッグは次のとおりです。

親メニュー親スラッグ
設定options-general.php
ツールtools.php
外観themes.php
投稿edit.php

メニューが表示されないときの確認点

コードを書いたのにメニューが出てこない、というときは次の点を順に確認してみてください。

admin_menu フックで呼んでいるか

関数を admin_menu フックの外で直接呼ぶと、メニューの組み立てが終わったあとになり反映されません。必ず add_action('admin_menu', ...) 経由で呼びましょう。

権限(capability)が合っているか

$capability にログイン中のユーザーが持っていない権限を指定すると、その人にはメニューが表示されません。管理者向けのページなら manage_options が無難です。編集者にも見せたい場合は edit_posts など、対象に合った権限を指定します。

スラッグが重複していないか

メニューのスラッグは一意である必要があります。他のメニューと同じスラッグを使うと、意図しないページに上書きされたり表示が崩れたりします。プラグイン名やテーマ名を接頭辞に付けて、ぶつからない名前にしておくと安心です。

まとめ

管理画面に独自ページを追加するには、トップレベルメニューを作る add_menu_page() と、その下に項目を足す add_submenu_page() を使います。どちらも admin_menu フックの中で呼ぶこと、表示を許可する権限とページ本体を出力する関数を指定することが基本です。既存の「設定」「ツール」メニューの下に追加することもできます。メニューが出ないときはフック・権限・スラッグの3点を確認すれば、たいていの原因は見つかります。

参考ページ