WordPressに独自のサブメニューの追加する

2023年10月20日 2023年11月2日

わかっち

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

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

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

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

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

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

1. WordPressに新規のサブメニューを追加する
1.1. トップメニューにサブメニューを追加する
1.1.1. トップメニューを追加
1.1.2. サブメニューを追加
2. 既存のトップメニューにサブメニューを追加する
2.1.1. 親スラッグ名の種類
3. まとめ

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()の引数や戻り値については、前回の記事をご参照ください。

サブメニューを追加

追加した管理メニューに、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に組み込まれている既存のトップメニューに、サブメニューを追加することができます。

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

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

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

親スラッグ名の種類

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

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

ダッシュボード	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による実装が必要ですが、思ったよりも簡単だったかと思います。

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

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

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

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

WordPressでブログを始めるならXserver

取り急ぎブログを始めるなら、レンタルサーバでWordPressを構築することをおすすめします。
サーバの構築が不要のため、レンタルサーバを契約後すぐにWordPressでブログを始められます。

そしてレンタルサーバは、国内シェアNo.1、サーバ速度No.1のXserverがおすすめです！

XSereverの公式サイトはこちら

※ 初期費用が無料になります！

Webエンジニアを養成するオンラインプログラミングスクール	Webエンジニアを養成するためのシステム開発会社初オンラインプラグラミングスクール。まずはオンライン説明会への参加から！
ドメイン取得ならXserver Domain	国内最安値！取得も更新も！ドメイン名取得サービス
未経験から初めてのプラグラミングで副業	Web制作を勉強・学習して短期間でWeb制作の副業ができるようになる講座。Web制作副業のお仕事を必ずGET！