WordPress 独自メニュー作成

class-admin-menu.php

<?php
// WordPress 独自メニュー作成: section, field追加版
class Admin_Menu {

  private $options;
  private $option_name = 'my-menu';

  public function __construct() {
    // メニューを追加する
    add_action('admin_menu', array($this, 'add_menu'));
    // メニューを初期化する
    add_action('admin_init', array($this, 'init'));

    $this->options = get_option($this->option_name);
  }

  /////////////////////////////////////////////////////////////////////////////////////

  //  メニューを追加

  /////////////////////////////////////////////////////////////////////////////////////

  // メインメニューを追加

  public function add_menu() {
    // add_menu_page(
    //   タイトルタグに表示されるタイトル,
    //   メニュー名,
    //   権限（manage_options, administrator など）,
    //   スラッグ,
    //   htmlを出力する関数名,
    //   アイコン名, https://developer.wordpress.org/resource/dashicons/
    //   メニューの順番
    // );

    add_menu_page(
      'マイメニュー',
      'マイメニュー',
      'manage_options',
      'my-menu-slug',
      array($this, 'menu_callback'),
      'dashicons-carrot',
      2
    );

    // サブメニューを追加

    // add_submenu_page(
    //   親メニューのスラッグ,
    //   タイトルタグに表示されるタイトル,
    //   メニュー名,
    //   権限,
    //   スラッグ,
    //   htmlを出力する関数名
    // );

    add_submenu_page(
      'my-menu-slug',
      'サブメニュー',
      'サブメニュー',
      'manage_options',
      'my-submenu-slug',
      array($this, 'submenu_callback')
    );
  }

  /////////////////////////////////////////////////////////////////////////////////////

  // 設定ページの初期化

  /////////////////////////////////////////////////////////////////////////////////////

  public function init() {
    // 設定を登録

    // register_setting(
    //   設定のグループ名
    //   設定項目名（DBに保存される名前）
    //   サニタイズ（入力値調整）する関数名
    //);
    register_setting(
      'my-group-name',
      $this->option_name,
      array($this, 'sanitize_callback')
    );

    // メニューにセクションを追加

    // add_settings_section(
    //   ID。タグのid属性に使用する文字列,
    //   セクション名(h3で表示される),
    //   セクションを出力するコールバック関数,
    //   表示させるメニューのスラッグ（add_menu_pageで設定したスラッグ）
    // );
    add_settings_section(
      'my-section-id',
      'セクション名',
      array($this, 'section_callback'),
      'my-menu-slug'
    );

    add_settings_section(
      'my-sub-section-id',
      'セクション名2',
      array($this, 'sub_section_callback'),
      'my-submenu-slug'
    );

    // セクションにフィールドを追加

    // add_settings_field(
    //   ID。タグのid属性に使用する文字列,
    //   フィールドの見出し(th)
    //   コールバック
    //   どのページに追加するか（add_menu_page で設定したスラッグ）
    //   どのセクションに表示するか（add_settings_section で設定したID）または既存のセクションID
    // );
    add_settings_field(
      'my-field-id',
      'フィールド名',
      array($this, 'field_callback'),
      'my-menu-slug',
      'my-section-id'
    );

    add_settings_field(
      'my-sub-field-id',
      'フィールド名2',
      array($this, 'sub_field_callback'),
      'my-submenu-slug',
      'my-sub-section-id'
    );

    // 同じフィールドを複数のセクションに追加できる
    add_settings_field(
      'my-sub-field-id',
      'フィールド名2',
      array($this, 'sub_field_callback'),
      'my-menu-slug',
      'my-section-id'
    );
  }

  /////////////////////////////////////////////////////////////////////////////////////

  // Callback関数 コンテンツ

  /////////////////////////////////////////////////////////////////////////////////////

  protected function menu_init() {
    if(!current_user_can('manage_options')) {
      wp_die(__('You do not have sufficient permissions to access this page.') );
    }

    // add_options_page()で設定のサブメニューとして追加している場合は
    // 問題ありませんが、add_menu_page()で追加している場合
    // options-head.phpが読み込まれずメッセージが出ない(※)ため
    // メッセージが出るようにします。
    // ※ add_menu_page()の場合親ファイルがoptions-general.phpではない
    global $parent_file;
    if($parent_file != 'options-general.php') {
      require_once ABSPATH . 'wp-admin/options-head.php';
    }
  }

  public function menu_callback() {
    $this->menu_init();
    ?>
    <div class="wrap">
      <h2>マイメニュー</h2>
      <form method="post" action="options.php">
        <?php $name = isset($this->options['name']) ? $this->options['name'] : ''; ?>
        <?php settings_fields('my-group-name'); ?>
        <?php do_settings_sections('my-menu-slug'); ?>
        <?php submit_button(); ?>
      </form>
    </div>
    <?php
  }

  public function submenu_callback() {
    $this->menu_init();
    ?>
    <div class="wrap">
      <h2>サブメニュー</h2>
      <form method="post" action="options.php">
        <?php settings_fields('my-group-name'); ?>
        <?php do_settings_sections('my-submenu-slug'); ?>
        <?php submit_button(); ?>
      </form>
    </div>
    <?php
  }

  public function section_callback() {
    ?>
    <p>これはセクションです。</p>
    <?php
  }

  public function sub_section_callback() {
    ?>
    <p>これはセクション2です。</p>
    <?php
  }

  public function field_callback() {
    $name = isset($this->options['name']) ? $this->options['name'] : '';
    ?>
    <input type="text" name="<?php echo $this->option_name; ?>[name]" value="<?php echo esc_attr($name); ?> ">
    <?php
  }

  public function sub_field_callback() {
    $name = isset($this->options['subname']) ? $this->options['subname'] : '';
    ?>
    <input type="text" name="<?php echo $this->option_name; ?>[subname]" value="<?php echo esc_attr($name); ?> ">
    <?php
  }

  /////////////////////////////////////////////////////////////////////////////////////

  // Sanitize

  /////////////////////////////////////////////////////////////////////////////////////

  // データ検証用
  public function sanitize_callback($input) {
    // 複数ページで$options[]を使ってるので、マージさせてるだけ
    return wp_parse_args($input, $this->options);
  }
}

if(is_admin()) $admin_page = new Admin_Menu();