管理画面にサブメニューページの作成・追加方法

プラグインには、よく設定用のページが追加されているのを見かけるでしょうが、そういった管理画面にページを追加する方法を紹介していきます。

管理画面にページを追加することで、テーマカスタマイザー以外での設定を追加したり、ツールを設置することが出来るようになります。テーマの設定は、テーマカスタマイザーでも設定できますが、別に外観を気にしてライブプレビューで見る必要もないどころか、態々重いテーマカスタマイザーを開く必要もない設定項目に関しては、専用の設定ページを追加してやる方が管理する人にとっては操作しやすくなります。

それに必要最低限の設定に関する関数はワードプレス自体に備わっていますので、HTMLのinputタグの知識が少しあれば十分に活用できるはずです。

サブメニューページについて

先にちょっと「サブメニューページって何？」という話に触れておきます。

ここで説明することは「外観」などの下にページを作成することですが、一般的にこれらの追加されるページは「サブメニューページ」と呼ばれます。つまり、ここで紹介しているページの作成は、親となる「外観」や「プラグイン」、「投稿タイプ」や「設定」などの「メニューページ」に追加される「サブメニューページ」を作成することです。

ページを追加する場所も「外観」の下だけでなく、設定や投稿タイプなど、自由にページを追加することは可能ですが、「テーマ」に実装する際推奨されるのは「外観」の下です。

勿論自分のテーマを自分好みにカスタマイズする上では何の問題もありませんが、配布する場合を考慮にいれると、他の場所にページを追加しても気が付きにくいですから、ワードプレスの標準として「テーマに実装する場合は外観の下」というルールがあります。プラグイン「Theme Check」で試してみると「外観の下に作成しろ」と警告されます。

ただ、プラグインに実装する場合は問題ありませんので、自由に好きな箇所にページを作成してください。

管理画面にサブメニューページを追加・作成する方法

サブメニューページを追加するポイントは以下の通りです。

1. 「admin_menu」にフックさせる
2. ページを追加する関数を呼び出す関数を作成
3. ページに出力する関数を作成

非常にシンプルに書きましたが、実はこの３つの作業のみで管理画面にページは追加できます。

あまり触り慣れていない人が見ると難しそうに思うかもしれませんが、非常に簡単な手順で作成できてしまうんですよ。

以下、具体的な解説です。

管理画面にサブメニューページを追加する関数

ここでは一般的なサブメニューページを呼び出す方法として、「外観」の下ではなく、あらゆる「メニューページ」に追加することができるワードプレス関数「add_submenu_page」を使用して解説します。

まず、関数「add_submenu_page」の使い方ですが、基本的に以下の様な形で使用します。

add_submenu_page( 
	'themes.php', // 親メニューページのスラッグ
	'サブメニューページのタイトル', // titleタグに使用されるタイトル
	'サブメニューページのタイトル', // 管理画面の左サイドのサブメニューページのタイトルとして出力されます
	'manage_options', // 編集権限の設定
	'custom_settings_page', // 追加するページに与えるスラッグ
	'settings_page' // ページに設定などを出力する関数名
);

あとは、これを呼び出す関数を「admin_menu」にフックさせるだけですので、以下のように書いておきます。

// 「admin_menu」にフックさせる
add_action( 'admin_menu', 'add_custom_settings_page' );
function add_custom_settings_page() {
	add_submenu_page( 
		'themes.php', // 親となるメニューページのスラッグ
		'サブメニューページのタイトル', // titleタグに使用されるタイトル
		'サブメニューページのタイトル', // 管理画面の左サイドのサブメニューページのタイトルとして出力されます
		'manage_options', // 編集権限の設定
		'custom_settings_page', // 追加するページに与えるスラッグ
		'settings_page' // ページに設定などを出力する関数名
	);
}

こんな感じです。

ワードプレスに標準的に追加されている「外観」に追加する場合は「add_theme_page」、「設定」に追加する場合は「add_option_page」などが用意されており、親となるメニューページのスラッグの入力を必要としない関数もありますが、実はそれらの関数で「add_submenu_page」を呼び出しているだけですので、これを覚えておけば使う必要はありません。

また、追加したい親となるメニューページが「投稿タイプ」などの場合は「’edit.php?post_type=post’」のように設定すると追加できます。この例だと「投稿」の下にサブメニューページを追加できます。

WordPressの標準で用意されているサブメニュー作成関数

ワードプレス関数「add_submenu_page」を覚えておけばいいと書きましたが、「テーマ」に実装する場合は、「Theme Check」で「add_theme_page」を使うように警告されるかもしれませんので、その他の関数も紹介しておきます。

基本的には「add_submenu_page」の書き方と同じですが、最初の引数（親となるメニューページのスラッグ）は不要ですので、２つ目の引数から与えてやれば問題ありません。

つまり、

add_theme_page( 
	'「外観」用のサブメニューページのタイトル', // titleタグに使用されるタイトル
	'「外観」用のサブメニューページのタイトル', // 管理画面の左サイドのサブメニューページのタイトルとして出力されます
	'manage_options', // 編集権限の設定
	'custom_settings_page', // 追加するページに与えるスラッグ
	'settings_page' // ページに設定などを出力する関数名
);

といった形になります。

ワードプレスに標準で用意されているメニューページにサブメニューページを追加する関数は以下の通りです。

add_management_page()

「ツール」の下にサブメニューページを作成

add_options_page()

「設定」の下にサブメニューページを作成

add_theme_page()

「外観」の下にサブメニューページを作成

add_plugins_page()

「プラグイン」の下にサブメニューページを作成

add_users_page()

「ユーザー」の下にサブメニューページを作成

add_dashboard_page()

「ダッシュボード」の下にサブメニューページを作成

add_posts_page()

「投稿」の下にサブメニューページを作成

add_media_page()

「メディア」の下にサブメニューページを作成

add_links_page()

「リンク」の下にサブメニューページを作成 ※ 「リンク」は標準では非表示

add_pages_page()

「固定ページ」の下にサブメニューページを作成

add_comments_page()

「コメント」の下にサブメニューページを作成

「テーマ」に実装する際には「add_theme_page」を使うこともあるかもしれませんが、プラグインなら「add_submenu_page」を押さえていた方が柔軟にページを作成できますので、個人的には列挙した関数よりも「add_submenu_page」を勧めておきます。

出力する関数を作成

ここは自由に作成する場所ですので、特に解説する方法はありませんが一応例だけ載せておきます。

上で使用した関数「add_submenu_page」で使用した最後の引数で呼び出される関数の記述です。

function settings_page() {

	echo '<h1>設定ページ</h1>'

	// 処理や出力

}

これでちゃんと表示されていれば、あとは自由に作成するのみです。

また、設定ページを作成する場合、その手順も用意しておきましたので、参考にしてみてください。