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>

スポンサーリンク

渡邉 剛(Watanabe Go)

EC サイトを簡単に構築できる Welcart プラグインのカスタマイズ対応を始めとして、WordPress サイトの制作、修正カスタマイズを承っております。静岡県掛川市在住。

お問い合わせ

WordPress やプラグインのカスタマイズについてのご相談、ご依頼がございましたらこちらよりお問い合わせいただければと思います。サイトの修正のご相談のみでも大丈夫です。お気軽にご連絡ください。こちらで入力された内容は外部には公開されません。

お名前 *

ポジション

メールアドレス *

内容 *

記事のシェアはこちらからどうぞ。