WordPress の管理画面にオリジナルの設定ページを追加する方法

h2ham

6年前

オリジナルの設定メニューを追加

まずは管理画面のメニューにオリジナルの項目を追加する方法から。

Administration Menus « WordPress Codex

管理画面のメニューを追加するにはメニューを作るコードを含んだ関数を作り、 admin_menu にフックさせます。

今回自分は簡易的に使えるページを作りたかっただけなので、functions.php に追加しました。

functions.php

add_action('admin_menu', 'banner_menu');

function banner_menu() {
  add_options_page('バナー管理', 'バナー管理', 8, 'banner_menu', 'banner_options_page');
  add_action( 'admin_init', 'register_banner_settings' );
}

function banner_options_page() {
  // HTML を表示させるコード
}

これで、設定の項目内に「バナー管理」という項目が追加されます。

HTML を表示させるコードは、設定ページの作成を参考にしました。

設定ページの作成

追加の方法を検索してみて、日本語版の Codex にたどりつきました。

設定ページの作成 - WordPress Codex 日本語版

しかし、翻訳前の英語版の Codex と差分があるようなので、上記リンク先は参考にせず、下記英語版を参考にして作成しようと思います。

Creating Options Pages « WordPress Codex

ページの枠と見出し・フォーム

設定で最低限必要なタグは、ページの枠と見出し、それに options.php を action 属性にいれたフォームタグらしいです。

また、フォームで登録する項目は register_setting で管理するようなので必要分用意しておきます。

HTML はページとして用意したほうがいいのですが、今回は簡易的に PHP に追加してしまいます。

functions.php（先ほどのコードに追加）

<?php

add_action('admin_menu', 'banner_menu');

function banner_menu() {
  add_options_page('バナー管理', 'バナー管理', 8, 'banner_menu', 'banner_options_page');
  add_action( 'admin_init', 'register_banner_settings' );
}

function register_banner_settings() {
  register_setting( 'banner-settings-group', 'banner_url' );
  register_setting( 'banner-settings-group', 'banner_image' );
}

function banner_options_page() {
?>
  <div class="wrap">
    <h2>バナー設定</h2>
    <form method="post" action="options.php">
      <?php 
        settings_fields( 'banner-settings-group' );
        do_settings_sections( 'banner-settings-group' );
      ?>
      <table class="form-table">
        <tbody>
          <tr>
            <th scope="row">
              <label for="banner_url">リンク</label>
            </th>
              <td><input type="text" id="banner_url" class="regular-text" name="banner_url" value="<?php echo get_option('banner_url'); ?>"></td>
          </tr>
          <tr>
            <th scope="row">
              <label for="banner_image">バナー画像</label>
            </th>
              <td><input type="text" id="banner_image" class="regular-text" name="banner_image" value="<?php echo get_option('banner_image'); ?>"></td>
          </tr>
        </tbody>
      </table>
      <?php submit_button(); ?>
    </form>
  </div>
<?php
}
?>

一度 PHP の記述を終わらせて HTML タグを入れて表示させる仕組みです。

テーブルタグは 3.8 の設定ページの HTML をそのまま拝借。

ページを用意してみて気づいたポイントは主に２箇所。

ポイント１

register_setting で設定した名前を input の name 属性に入れること。また、既に登録していた場合それを value にセットするために get_option で echo。

名前を登録していても、 name 属性を入れ忘れたり違う名前にしていると登録できなかったです。

ポイント２

form タグの内側に register_setting で設定しておいた１つ目の引数のグループ名を settings_fields と do_settings_sections で指定。

form タグの内側に入れておく必要があるので忘れずに入れておくように。

過去バージョンだとこのあたりで必要な情報が違うのですが、3.8 現在はここで紹介している通り。その他は不要です。このあたりが日本語版の Codex との違いかなと。総復習に記載されているような hidden の input 要素と wp_nonce_fieldg は、先に書いた２つの関数がまとめて設定してくれるので現在は不要に。

あと、登録のボタンは WordPress 3.1 から用意された submit_button(); のみでOK。

これでオリジナルの設定ページが追加されます。

最後に

設定を間違えたりすると、登録した情報が入っていなかったり、入っているのに取り出せなかったり、さらには設定一覧ページに飛ばされてしまったりなどなど。

うまく登録されない時は一度設定を確認してみてください。

それと、本エントリーは現状の最新バージョンの 3.8.1 で利用できた話を記載しています。もしも期間がたって、情報が古くなったら必ず最新のドキュメンを確認するようにしてください。また、古いバージョンでは別な書き方だったりするので、利用のバージョンで使えるかどうかも確認するようにしてください。

参照：