WordPressに独自のページを設置する

WordPressに独自のページを設置する
Image by Pexels from Pixabay

2021.05.03(更新日:2021.05.18)

Wordpressには便利なプラグインがたくさんあるけれど、クライアントが使いやすく管理画面をカスタマイズしたい時にどうしても操作が複雑になってしまったり、ちょっとした設定が足りなかったりが出てくる。
なので、まとめて簡潔に操作出来る設定ページが作れたらとても素敵なのです。
今更ネタだけど、忘れていたのでまとめておく。

この記事は1年以上経過しています。内容的に古い場合があります。

add_menu_pageとadd_submenu_page

WordPressには簡単に独自ページを作れる関数「add_menu_pageとadd_submenu_page」がある。
それぞれ使い方を見てみる。

トップレベルのメニューページを追加

まず必要なのは管理画面の左にあるメニュー。引数がいっぱいあるけど順を追って入れていけば容易い。

add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position );

  • $page_title・・・メニューページのタイトル(日本語OK)
  • $menu_title・・・メニュー名(日本語OK)
  • $capability・・・メニューを扱えるか否かの権限。とりあえずmanage_optionsと書いておけばOK
  • $menu_slug・・・メニューのスラッグ。ユニークな小文字の英数字。(記事のスラッグと同じ扱い)
  • $function・・・メニューページの中身を表示させるための関数名。
  • $icon_url・・・メニュー横に表示されるアイコン(dashicons
  • $position・・・メニューの追加位置を示す番号

サブメニューページを追加

トップレベルのメニューページにサブメニューを追加するための方法。
今回は上記のサブメニューを想定しているが「parent_slug」を変更すれば、すでにあるメニューにも追加出来る。

add_submenu_page( $parent_slug, $page_title, $menu_title, $capability, $menu_slug, $function);

  • $parent_slug・・・親メニューのスラッグ
  • $page_title・・・サブメニュー名(日本語OK)
  • $menu_title・・・プルダウンに表示されるメニュー名(日本語OK)
  • $capability・・・メニューを扱えるか否かの権限。とりあえずmanage_optionsと書いておけばOK
  • $menu_slug・・・メニューのスラッグ。ユニークな小文字の英数字。(記事のスラッグと同じ扱い)
  • $function・・・メニューページの中身を表示させるための関数名。

add_actionを使用してメニューを登録

アクションフック(add_action)ってものを利用して上記の関数たちを登録させてメニューを表示させる。
説明の流れで前後してしまうが「add_menu_pageの$function」と「add_submenu_pageの$function」も当然作成しておくこと。取り急ぎ空の関数でも用意しておく。

なお各$capabilityは「manage_options」でOKとしてあるが、必要に応じて変更可能。
(権限はいっぱいありすぎてわからん! 正直「level」の方が良かったなぁ・・・)
見本のコードは以下。functions.phpなどに書く。

/* PHP */
add_action('admin_menu', 'custom_menu_page');

function custom_menu_page(){
  add_menu_page(
    'トップレベルメニュー',
    'トップレベルメニュー',
    'manage_options',
    'custom-menu-settings',
    'create_custom_top_page',
    'dashicons-admin-generic',
    4
  );
  add_submenu_page(
    'custom-menu-settings',
    'サブメニュー',
    'サブメニュー',
    'manage_options',
    'custom-submenu-settings',
    'create_custom_sub_page'
  );
  // 必要があればadd_submenu_pageを更に追加
}

// トップレベルメニューを表示するための関数
function create_custom_top_page(){
  //処理
}

// サブメニューを表示するための関数
function create_custom_sub_page(){
  //処理
}

独自のメニュー表示は完了だが…

メニュー表示は出来たが、それぞれのページ内にフォームを設置して操作出来るようにするのが最終目的。
次回は「Settings API」なるものを用いてデータを出し入れする内容を書くつもり。