こんにちわ、サイト管理者のわかっち (@wakatchi_tech) です。

WordPressで開発したサイトを運営していると、サイト独自の設定を保存したり、運用しながら設定を変更したいことがあります。

前回の記事では、WordPressのトップメニューの追加方法をご紹介いたしました。

WordPressに独自の管理メニューを追加する① トップメニューの追加

WordPress の管理画面に独自のトップメニューを追加する方法を、add_menu_page() の引数・アイコン・表示位置の決め方までコード付きで解説します。add_submenu_page との…

わかっちウォッチ

この記事では、以前ご紹介したトップメニューに続き、WordPressのサブメニューの追加方法をご紹介します。

この記事は次のような方にお勧めです

  • WordPressのサイト開発者で、サイト全体の設定をWordPressの管理メニューで設定したい人
  • WordPressのテーマやプラグインの開発者
目次

WordPressに新規のサブメニューを追加する

add_submenu_page() は、既存または新規のトップメニューにサブメニュー（管理画面のページ）を追加するWordPress関数です。単体で使う場合の書式は次のとおりです。

add_submenu_page(
    $parent_slug,
    $page_title,
    $menu_title,
    $capability,
    $menu_slug,
    $callback
);
  • $parent_slug（必須）：サブメニューを組み込む親メニューのスラッグ
  • $page_title（必須）：ページのタイトル
  • $menu_title（必須）：管理画面のメニューに表示されるテキスト
  • $capability（必須）：このメニューを表示するために必要な権限
  • $menu_slug（必須）：このメニューを参照するスラッグ
  • $callback（任意）：ページの内容を出力する関数

それぞれの引数の詳細や、実際の実装例は以降で解説します。

WordPressの管理コンソールに追加した「トップメニューサンプル」という管理メニューに、「サブメニューサンプル」というサブメニューを追加します。サブメニューとは、トップメニューに含まれるページです。

WordPress管理画面にサブメニューが追加された状態のスクリーンショット

下記のソースコードでWordPressにサブメニューを組み込めます。
function.phpやCode Snippetsプラグインなどを使ってそのままコピペしてみてください。

<?php
add_action(
	'admin_menu',
	function(){
        add_menu_page(
            '管理メニュータイトル' ,
            'トップメニューサンプル' ,
            'manage_options' ,
            'top_menu_sample' ,
            'render_topmenu_contents' ,
            'dashicons-calendar' ,
            0
        );
        
        add_submenu_page(
            'top_menu_sample' ,
            'サブメニュータイトル' ,
            'サブメニューサンプル' , 
            'manage_options' , 
            'sub_menu_sample' , 
            'render_submenu_contents'
        );
    }
);

function render_topmenu_contents() {
    ?>
        <div class="wrap">
            <h1>トップメニュー設定</h1>
            <p>Hello admin TOP menu !!</p>
        </div>
    <?php
}

function render_submenu_contents() {
    ?>
        <div class="wrap">
            <h1>サブメニュー設定</h1>
            <p>Hello admin SUB menu !!</p>
        </div>
    <?php
}

トップメニューにサブメニューを追加する

add_menu_page()で作成したトップメニューに、add_submenu_page()を使うことでサブメニューを組み込めます。

トップメニューを追加

管理メニューを追加するための関数を、add_action()でフック名admin_menuに追加します。

<?php
add_action(
    'admin_menu',
    function(){
        // your code
    }
);

管理メニューを追加する関数に、add_menu_page()に使って管理メニューを追加を実装します。

<?php
add_menu_page(
    '管理メニュータイトル' , 
    'トップメニューサンプル' , 
    'manage_options' , 
    'top_menu_sample' , 
    'render_topmenu_contents' , 
    'dashicons-calendar' ,
    0
);

function render_topmenu_contents() {
    ?>
        <div class="wrap">
            <h1>トップメニュー設定</h1>
            <p>Hello admin TOP menu !!</p>
        </div>
    <?php
}

add_menu_page()の引数や戻り値については、前回の記事をご参照ください。

WordPressに独自の管理メニューを追加する① トップメニューの追加

WordPress の管理画面に独自のトップメニューを追加する方法を、add_menu_page() の引数・アイコン・表示位置の決め方までコード付きで解説します。add_submenu_page との…

わかっちウォッチ

サブメニューを追加

追加した管理メニューに、add_submenu_page()に使ってサブメニューを追加します。

<?php
add_submenu_page(
    'top_menu_sample' ,
    'サブメニュータイトル' ,
    'サブメニューサンプル' ,
    'manage_options' ,
    'sub_menu_sample' ,
    'render_submenu_contents'
);

function render_submenu_contents() {
    ?>
        <div class="wrap">
            <h1>サブメニュー設定</h1>
            <p>Hello admin SUB menu !!</p>
        </div>
    <?php
}

それではadd_submenu_page()の仕様を見てみましょう。

add_submenu_page()の引数

  • $parent_slug（必須）
    サブメニューを組み込む親スラッグ名。
  • $page_title（必須）
    サブメニューのページタイトル。
    本記事では、管理コンソールの左側に「テスト用トップメニュー」と表示されます。
  • $menu_title（必須）
    メニューのタイトルに使用するテキスト。
    本記事では、管理コンソールの左側に「テスト用トップメニュー」と表示されます。
  • $capability（必須）
    このメニューをユーザーに表示するために必要な権限。
    本記事では、管理メニューへのアクセスを許可するmanged_options権限を付与しています。
  • $menu_slug（必須）
    このメニューを参照するスラッグ名。
    このメニューページに対して一意である必要があります。また、使用できる文字は 小文字の英数字、ダッシュ、およびアンダースコア文字のみです。$parent_slugで指定した文字を指定すると、トップメニューのデフォルトがサブメニューの画面になります。
  • $function（任意）
    このページのコンテンツを出力するために呼び出される関数。
  • $hook_suffix
    この管理メニューで表示されるページの処理結果を受け取る関数の接頭子。

既存のトップメニューにサブメニューを追加する

add_submenu_page()の親スラッグ名を指定することで、WordPressに組み込まれている既存のトップメニューに、サブメニューを追加することができます。

WordPress既存のトップメニューにサブメニューが組み込まれた例のスクリーンショット

下記のソースコードで既存のトップメニューにサブメニューを組み込めます。

<?php
add_action(
    'admin_menu',
    function(){
        add_submenu_page(
             'options-general.php', // 組み込みのトップメニュー
              'サブメニュータイトル' ,
              'サブメニューサンプル' , 
              'manage_options' , 
              'sub_menu_sample' ,
              'render_submenu_contents'
            ); 
    }
);
    
function render_submenu_contents() {
    ?>
        <div class="wrap">
            <h1>サブメニュー設定</h1>
            <p>Hello admin SUB menu !!</p>
        </div>
    <?php
}

管理メニューをクリックした時に表示される画面を、サブメニューすることができます。

add_submenu_page() だけを使った最小実装例

add_menu_page() を呼ばずにadd_submenu_page() だけでサブメニューを追加したい場合は、既存のトップメニューのスラッグを親スラッグに指定します。以下はそのままコピペで動作する最小構成です。

<?php
add_action(
    'admin_menu',
    function(){
        add_submenu_page(
            'tools.php' , // 組み込みの「ツール」メニュー
            'サブメニュータイトル' ,
            'サブメニューサンプル' ,
            'manage_options' ,
            'my_tools_submenu' ,
            'render_my_tools_submenu'
        );
    }
);

function render_my_tools_submenu() {
    ?>
        <div class="wrap">
            <h1>サブメニュー設定</h1>
            <p>Hello admin SUB menu !!</p>
        </div>
    <?php
}

function.phpに貼り付けるだけで、管理画面の「ツール」メニュー配下にサブメニューが追加されます。add_menu_page() を呼ばなくても動作する点がポイントです。

親スラッグ名の種類

前述のソースコードは、元々組み込まれている設定メニューに組み込みました。

親スラッグを変えることで他の組み込みメニューにもサブメニューを追加できますので、ぜひ試してみてください。

ダッシュボードindex.php
投稿edit.php
メディアupload.php
固定ページedit.php?post_type=page
コメントedit-comments.php
テーマthemes.php
プラグインplugins.php
ユーザusers.php
ツールtools.php
設定options-general.php
親スラッグ名のリスト

まとめ

今回は、WordPressの管理コンソールにサブメニューを追加する方法をご紹介しました。トップメニューと同様にPHPによる実装が必要ですが、思ったよりも簡単だったかと思います。

次回からメニューページでの設定更新やデータのダウンロードなど、より実践的な方法を記載していきます。

わかっち

管理メニューを作る目的は、運用に関する設定の保存やサイト運営者によるデータの取得だからね。

よくある質問

add_menu_page で作ったトップメニューの最初のサブメニューが、親と同じ名前になるのはなぜ？

add_menu_page() はトップメニューを作ると同時に、同じスラッグの最初のサブメニューを自動で作ります。名前を変えたいときは、親と同じスラッグをparent_slug と menu_slug の両方に渡して add_submenu_page() を呼ぶと上書きできます。

既存のメニューに追加したいのですが、親スラッグが分かりません

本記事の「親スラッグ名の種類」で一覧にしています。設定は options-general.php、ツールは tools.php、外観は themes.php です。カスタム投稿タイプの下に付けたい場合は edit.php?post_type=スラッグ を指定します。

サブメニューの画面に設定フォームを作るには？

Settings API を使います。register_setting() で保存先を登録し、add_settings_section() でセクション、add_settings_field() で項目を定義します。画面側では settings_fields() と do_settings_sections() を呼ぶだけでフォームが出ます。

トップメニュー自体の作り方は？

WordPressに独自の管理メニューを追加する① トップメニューの追加で解説しています。add_menu_page() の引数とアイコンの指定まで扱っています。

本記事が少しでもお役に立てれば幸いです。

最後までお読みいただき、ありがとうございました！

カテゴリー
WordPress
タグ
前の記事
Ultimate Member 2.7.0がリリースされました
2023年10月18日
次の記事
WordPressに値を設定する独自の管理メニューを追加する
2023年10月25日