SNSフォローボタン

WordPress 管理メニューにオリジナルのメニューを追加する方法

WordPress 管理メニューにオリジナルのメニューを追加して、テーマごとの設定などを保存することができます。
functions.php に記入すると設定画面を作成することができるテンプレートです。

functions.php

<?php
add_action('admin_menu', 'custom_menu_page');
function custom_menu_page() {
     add_menu_page('共通設定画面', '共通設定', 'manage_options', 'custom_menu_page', 'add_custom_menu_page', 'dashicons-admin-generic', 4);
}

function add_custom_menu_page() {
?>

<div class="wrap">
<h2>共通設定画面</h2>
<?php
  if (isset($_GET['settings-updated'])) :
    if (true == $_GET['settings-updated']) :
      echo '<div id="settings_updated" class="updated notice is-dismissible"><p><strong>設定を保存しました。</strong></p></div>';
    endif;
  endif;
?>
<!-- この部分に表示する HTML を記述します -->
</div>
<?php
}
?>


上記のコードでは admin_menu のフックに custom_menu_page() を追加し、custom_menu_page() 内で、add_menu_page() を呼び出してメニューを追加しています。
add_menu_page() の引数は下記のようになっています。

add_menu_page(
   $page_title, : ページタイトル
   $menu_title, : メニュータイトル
   $capability, : メニュー表示するユーザーの権限
   $menu_slug, : メニューのスラッグ
   $function,  : メニュー表示時に使われる関数
   $icon_url,  : メニューのテキスト左のアイコン
   $position,  : メニューを表示する位置
);

参考:関数リファレンス/add menu page – WordPress Codex 日本語版

見やすくするために HTML 表示部分は別ファイルに分けることも可能です。

function.php

<?php
add_action('admin_menu', 'custom_menu_page');
function custom_menu_page() {
     add_menu_page('共通設定画面', '共通設定', 'manage_options', 'custom_menu_page', 'custom_file_path', 'dashicons-admin-generic', 4);
}

function custom_file_path() {
    $url = '../wp-content/themes/theme_directory/sample-page.php';
    return $url;
}

sample-page.php

<div class="wrap">
  <h2>テーマ設定</h2>

  <?php
  if (isset($_GET['settings-updated'])) :
    if (true == $_GET['settings-updated']) :
      echo '<div id="settings_updated" class="updated notice is-dismissible"><p><strong>設定を保存しました。</strong></p></div>';
    endif;
  endif;
  ?>

  <form method="post" action="options.php" enctype="multipart/form-data" encoding="multipart/form-data">
    <?php
      settings_fields('custom-menu-group');
      do_settings_sections('custom-menu-group');
    ?>
    <div class="metabox-holder" data-tab-content="general">
      <div class="postbox">
        <?php $value_general = get_option('general'); ?>
        <div class="inside">
          <table class="form-table">
            <tbody>
              <tr>
                <th scope="row"><label>テキスト</label></th>
                <td>
                  <input type="text" class="large-text" name="general[text]" value="<?php echo $value_general['text']; ?>">
                </td>
              </tr>
              <tr>
                <th scope="row"><label>テキストエリア</label></th>
                <td>
                  <textarea class="large-text" name="general[textarea]" rows="6"><?php echo $value_general['textarea']; ?></textarea>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <?php submit_button(); ?>
  </form>
</div>