プラグインや自作テーマに「独自の設定ページ」を用意したいとき、まず必要になるのが管理画面の左メニューへの項目追加です。WordPress には add_menu_page()(トップレベルのメニュー)と add_submenu_page()(その下のサブメニュー)という関数が用意されており、これらを使えばプラグインなしのコードだけでメニューと専用ページを作れます。この記事では、両関数の使い方・引数の意味・登録の手順を、動かせるコード例とあわせて解説します。
目次
メニュー追加は admin_menu フックで行う
メニューを追加する関数は、いつ呼んでもよいわけではありません。管理画面のメニューが組み立てられる admin_menu アクションフックのタイミングで呼ぶ必要があります。そのため、add_action('admin_menu', ...) に登録した関数の中で add_menu_page() などを呼ぶ、という形が基本になります。
<?php
// admin_menu フックでメニュー登録用の関数を呼ぶ
add_action('admin_menu', 'mytheme_register_menu');
function mytheme_register_menu() {
// この中で add_menu_page() などを呼ぶ
}
add_menu_page でトップレベルメニューを追加する
add_menu_page() は、管理画面の左サイドバーに新しいトップレベルメニュー(「投稿」「固定ページ」などと同じ階層の親メニュー)を追加します。基本の書き方は次のとおりです。
<?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 | メニューの表示位置(数値が小さいほど上) |
$capability に manage_options を指定すると、サイトの設定を変更できる管理者だけにメニューが表示されます。アイコンは WordPress 標準の Dashicons から選べ、dashicons-admin-generic や dashicons-chart-bar のように名前で指定します。
add_submenu_page でサブメニューを追加する
トップレベルメニューの下に項目を増やしたいときは add_submenu_page() を使います。第1引数に「どの親メニューにぶら下げるか」を表す親スラッグを渡すのがポイントです。先ほど作った mytheme-settings の下にサブメニューを足してみましょう。
<?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点を確認すれば、たいていの原因は見つかります。