WordPressで管理画面にテーマ用の設定ページを作成する方法

投稿日: by keruu

WordPressで管理画面にテーマ用の設定ページを作る方法です。

作るもの

下の画面のように、管理パネルにテーマ用の設定メニューを追加していきます。

設定ページは、シンプルに文字列の設定値だけがあるものを作っていきます。

流れ

大きく次の流れになります。

  • テーマ設定メニューを作ります。
  • 設定を保存しておく設定値を作ります。
  • 設定値をサニタイズする関数を作ります。(エラーチェック)
  • テーマ設定ページを作ります。

1. 作成開始

次のファイルを作って、そこにコードを入れていきます。

wp-content/themes/{対象テーマ}/theme-option.php

2. テーマ設定メニューと設定値を作る

次のような感じで、add_menu_page()関数でメニューを作成し、register_setting()関数でテーマ用の設定値を作ります。

// 管理パネルならテーマ設定メニューを配置します。
if ( is_admin() ) {
  add_action( 'admin_menu', 'add_mytheme_menu' );
  add_action( 'admin_init', 'register_mytheme_settings' );
}

/**
 * テーマ用の設定メニューを管理メニューに追加します。
 */
function add_mytheme_menu() {
  add_menu_page(
    'テーマ設定', // メニューページのタイトル文字列
    'テーマ設定', // メニュー文字列
    'manage_options', // メニューの表示権限
    'mytheme-settings', // メニューのスラグ(URLのパス)
    'create_mytheme_settings_page' // メニューページの表示用の関数
  );
}

/**
 * テーマ用の設定値を作成します。
 */
function register_mytheme_settings(){
  register_setting(
    'mytheme_options_group', // 設定値のグループ名
    'mytheme_options', // 設定値の名前
    'sanitize_mytheme_options' // サニタイズ用の関数
  );
}

3. 設定値のサニタイズ関数を作る

サニタイズ関数は、意図しない値が保存されないようにチェックするための関数です。

今回は文字列の設定値なので、sanitize_text_field()関数で文字列をサニタイズしています。文字列設定値の名前は something にしています。

/**
 * 設定値をサニタイズします。
 */
function sanitize_mytheme_options( $options ) {

  $new_options = array();

  // 文字列設定値のサニタイズ
  if ( isset( $options['something'] ) ) {
    $new_options['something'] = sanitize_text_field( $options['something'] );
  }

  return $new_options;
}

4. 設定ページを作る

下のようになります。保存回りは、WordPress自体に用意されている options.php が処理してくれますので、form の action には options.php を指定します。

/**
 * テーマ設定ページを描画します。
 */
function create_mytheme_settings_page() { ?>

  <div class="wrap">

    <h1>テーマ設定</h1>

    <?php /* 設定用のフォームを作成します。 */ ?>
    <form method="post" action="options.php">

      <?php /* 設定値のグループを指定し、設定値を取得します。 */ ?>
      <?php settings_fields( 'mytheme_options_group' ); ?>
      <?php do_settings_sections( 'mytheme_options_group' ); ?>
      <?php $options = get_option( 'mytheme_options' ); ?>

      <?php /* 設定値を表示します。 */ ?>
      <table class="form-table">
        <tr valign="top">
          <th scope="row">文字列設定値</th>
          <td>
            <?php /* 設定値をエスケープして表示します。 */ ?>
            <?php $option = isset( $options['something'] ) ? esc_attr( $options['something'] ) : '' ?>
            <input type="text" name="mytheme_options[something]" value="<?php echo $option; ?>">
          </td>
        </tr>
      </table>

      <?php submit_button(); ?>

    </form>
  </div><!-- .wrap -->

<?php }

5. 実行する

次のファイルを開いて。

wp-content/themes/{対象テーマ}/functions.php

次のコードを追記します。

// テーマオプションを読み込みます。
require_once ( get_stylesheet_directory() . '/theme-options.php' );

動作確認

新しいメニューと設定ページが表示されることを確認したら、文字列設定値の値を変えて、保存されることを確認します。

以上です。

WordPress