WordPress のテーマを開発していると「管理画面からちょっとした設定を切り替えたい」と思う場面は多いです。
例：
- トップページのスライダーを表示するかどうか
- サイトのキャッチコピーを管理画面から編集したい
- 特定の機能のON/OFF
こうしたときに便利なのが WordPress標準の Settings API です。
Settings APIとは？
WordPressには「Settings API」と呼ばれる仕組みがあり、管理画面に設定ページを追加し、値を保存・取得するための関数群が用意されています。
代表的な関数は以下です：
register_setting(): 設定（オプション）を登録し、保存・バリデーション方法を定義するadd_settings_section(): ページに「まとまり」を追加するadd_settings_field(): セクション内に実際の入力項目を追加するsettings_fields():<form>内で hidden フィールドや nonce を自動出力するdo_settings_sections(): 登録済みのセクション・フィールドを出力する
これらの関数が「setting」を含むのは、Settings API に属しているからです。
自分で定義する関数はプレフィックスを付けて区別しましょう。
今回作る設定ページ
「外観」メニュー配下に「テーマ設定」というページを追加し、以下の設定を保存できるようにします。
- トップページのスライダーを表示するかどうか（チェックボックス）
- サイトのキャッチコピー（テキスト入力）
- お知らせセクションを有効化するかどうか（チェックボックス）
実装コード（functions.phpに追記）
以下のコードを functions.php に追加します。
プレフィックスは mytheme_ に統一しました。
/**
* 管理画面に「テーマ設定」ページを追加
*/
add_action('admin_menu', function () {
add_theme_page(
'テーマ設定ページ', // ページタイトル
'テーマ設定', // メニュータイトル
'manage_options', // 権限
'mytheme-settings', // スラッグ
'mytheme_render_settings_page' // コールバック関数
);
});
/**
* 設定項目の登録
*/
add_action('admin_init', function () {
// オプション登録
register_setting('mytheme_settings_group', 'mytheme_show_slider', [
'type' => 'boolean',
'default' => 1,
'sanitize_callback' => fn($v) => (int)!empty($v),
]);
register_setting('mytheme_settings_group', 'mytheme_site_catchcopy', [
'type' => 'string',
'default' => '',
'sanitize_callback' => 'sanitize_text_field',
]);
register_setting('mytheme_settings_group', 'mytheme_enable_notice', [
'type' => 'boolean',
'default' => 0,
'sanitize_callback' => fn($v) => (int)!empty($v),
]);
// セクション
add_settings_section(
'mytheme_display_section',
'サイト表示設定',
function () {
echo '<p>テーマの表示要素を切り替えることができます。</p>';
},
'mytheme-settings'
);
// フィールド1：トップスライダー
add_settings_field(
'mytheme_show_slider',
'<span class="nowrap-label">トップページのスライダーを表示</span>',
function () {
$val = (int) get_option('mytheme_show_slider', 1);
echo '<label><input type="checkbox" name="mytheme_show_slider" value="1" ' . checked($val, 1, false) . '> 表示する</label>';
},
'mytheme-settings',
'mytheme_display_section'
);
// フィールド2：キャッチコピー
add_settings_field(
'mytheme_site_catchcopy',
'<span class="nowrap-label">サイトのキャッチコピー</span>',
function () {
$val = esc_attr(get_option('mytheme_site_catchcopy', ''));
echo '<input type="text" name="mytheme_site_catchcopy" value="' . $val . '" class="regular-text">';
},
'mytheme-settings',
'mytheme_display_section'
);
// フィールド3：お知らせセクション
add_settings_field(
'mytheme_enable_notice',
'<span class="nowrap-label">お知らせセクションを有効化</span>',
function () {
$val = (int) get_option('mytheme_enable_notice', 0);
echo '<label><input type="checkbox" name="mytheme_enable_notice" value="1" ' . checked($val, 1, false) . '> 有効にする</label>';
},
'mytheme-settings',
'mytheme_display_section'
);
});
/**
* 設定ページの描画
*/
function mytheme_render_settings_page() {
if (!current_user_can('manage_options')) return;
?>
<div class="wrap">
<h1>テーマ設定</h1>
<form method="post" action="options.php">
<?php
settings_fields('mytheme_settings_group');
do_settings_sections('mytheme-settings');
submit_button();
?>
</form>
</div>
<?php
}
/**
* 管理画面用CSS（ラベルを折り返さないようにする）
*/
add_action('admin_head', function () {
echo '<style>.nowrap-label{white-space:nowrap;}</style>';
});値の反映方法
保存した値は get_option() で取得できます。
例えば home.php でスライダーのON/OFFを判定するなら：
<?php if (get_option('mytheme_show_slider', 1)) : ?>
<?php get_template_part('templates/parts/slider'); ?>
<?php endif; ?>キャッチコピーを出すなら：
<p class="catchcopy">
<?php echo esc_html(get_option('mytheme_site_catchcopy', '')); ?>
</p>まとめ
*_setting_*関数は WordPressコアの Settings API が提供する仕組み- 自作関数には必ずテーマ名やプレフィックスを付けて衝突を避ける
register_setting→add_settings_section→add_settings_fieldの流れで項目を作る- 値は
get_option()でテンプレートに反映できる
テーマに専用の「設定ページ」を持たせておくと、クライアントや運営者にとっても扱いやすいサイトになります。
コメント