🎨 カスタマイザーAPI

functions.phpfunction mytheme_customize_register($wp_customize) { // ここに設定を追加 } add_action('customize_register', 'mytheme_customize_register');

functions.phpfunction mytheme_customize_register($wp_customize) { // セクションを追加 $wp_customize->add_section('mytheme_colors', array( 'title' => 'カラー設定', 'priority' => 30, )); // 設定を追加 $wp_customize->add_setting('main_color', array( 'default' => '#0073aa', 'transport' => 'refresh', )); // コントロール（入力欄）を追加 $wp_customize->add_control(new WP_Customize_Color_Control( $wp_customize, 'main_color', array( 'label' => 'メインカラー', 'section' => 'mytheme_colors', 'settings' => 'main_color', ) )); } add_action('customize_register', 'mytheme_customize_register');

header.php または functions.php<style> :root { --main-color: <?php echo get_theme_mod('main_color', '#0073aa'); ?>; } .site-header { background-color: var(--main-color); } a { color: var(--main-color); } </style>

functions.phpfunction mytheme_customize_register($wp_customize) { // ======================================== // カラー設定セクション // ======================================== $wp_customize->add_section('mytheme_colors', array( 'title' => 'カラー設定', 'priority' => 30, )); // メインカラー $wp_customize->add_setting('main_color', array( 'default' => '#0073aa', 'sanitize_callback' => 'sanitize_hex_color', 'transport' => 'postMessage', )); $wp_customize->add_control(new WP_Customize_Color_Control( $wp_customize, 'main_color', array( 'label' => 'メインカラー', 'section' => 'mytheme_colors', 'settings' => 'main_color', ) )); // アクセントカラー $wp_customize->add_setting('accent_color', array( 'default' => '#ff6b35', 'sanitize_callback' => 'sanitize_hex_color', 'transport' => 'postMessage', )); $wp_customize->add_control(new WP_Customize_Color_Control( $wp_customize, 'accent_color', array( 'label' => 'アクセントカラー', 'section' => 'mytheme_colors', 'settings' => 'accent_color', ) )); // ======================================== // レイアウト設定セクション // ======================================== $wp_customize->add_section('mytheme_layout', array( 'title' => 'レイアウト設定', 'priority' => 40, )); // サイドバー位置 $wp_customize->add_setting('sidebar_position', array( 'default' => 'right', 'sanitize_callback' => 'mytheme_sanitize_sidebar_position', )); $wp_customize->add_control('sidebar_position', array( 'label' => 'サイドバー位置', 'section' => 'mytheme_layout', 'type' => 'radio', 'choices' => array( 'left' => '左側', 'right' => '右側', 'none' => '非表示', ), )); // ======================================== // フッター設定セクション // ======================================== $wp_customize->add_section('mytheme_footer', array( 'title' => 'フッター設定', 'priority' => 50, )); // コピーライトテキスト $wp_customize->add_setting('copyright_text', array( 'default' => '© 2026 My Site. All Rights Reserved.', 'sanitize_callback' => 'sanitize_text_field', )); $wp_customize->add_control('copyright_text', array( 'label' => 'コピーライト', 'section' => 'mytheme_footer', 'type' => 'text', )); // SNSリンク（Facebook） $wp_customize->add_setting('facebook_url', array( 'default' => '', 'sanitize_callback' => 'esc_url_raw', )); $wp_customize->add_control('facebook_url', array( 'label' => 'Facebook URL', 'section' => 'mytheme_footer', 'type' => 'url', )); // SNSリンク（Twitter） $wp_customize->add_setting('twitter_url', array( 'default' => '', 'sanitize_callback' => 'esc_url_raw', )); $wp_customize->add_control('twitter_url', array( 'label' => 'Twitter URL', 'section' => 'mytheme_footer', 'type' => 'url', )); } add_action('customize_register', 'mytheme_customize_register'); // サニタイズ関数 function mytheme_sanitize_sidebar_position($input) { $valid = array('left', 'right', 'none'); return in_array($input, $valid) ? $input : 'right'; }

js/customizer.js（新規作成）(function($) { // メインカラーのリアルタイム更新 wp.customize('main_color', function(value) { value.bind(function(newval) { $(':root').css('--main-color', newval); }); }); // アクセントカラーのリアルタイム更新 wp.customize('accent_color', function(value) { value.bind(function(newval) { $(':root').css('--accent-color', newval); }); }); // コピーライトのリアルタイム更新 wp.customize('copyright_text', function(value) { value.bind(function(newval) { $('.copyright').text(newval); }); }); })(jQuery);

functions.php に追加function mytheme_customize_preview_js() { wp_enqueue_script( 'mytheme-customizer', get_template_directory_uri() . '/js/customizer.js', array('customize-preview'), '1.0', true ); } add_action('customize_preview_init', 'mytheme_customize_preview_js');

functions.php// ヘッダー画像 $wp_customize->add_setting('header_image_custom', array( 'default' => '', 'sanitize_callback' => 'esc_url_raw', )); $wp_customize->add_control(new WP_Customize_Image_Control( $wp_customize, 'header_image_custom', array( 'label' => 'ヘッダー画像', 'section' => 'mytheme_header', 'settings' => 'header_image_custom', ) ));

header.php<?php $header_image = get_theme_mod('header_image_custom'); if ($header_image) : ?> <div class="header-image"> <img src="<?php echo esc_url($header_image); ?>" alt="ヘッダー画像"> </div> <?php endif; ?>

functions.php// サイドバーの表示/非表示 $wp_customize->add_setting('show_sidebar', array( 'default' => true, 'sanitize_callback' => 'mytheme_sanitize_checkbox', )); $wp_customize->add_control('show_sidebar', array( 'label' => 'サイドバーを表示', 'section' => 'mytheme_layout', 'type' => 'checkbox', )); // サニタイズ関数 function mytheme_sanitize_checkbox($input) { return ($input === true || $input === '1') ? true : false; }

テンプレートファイル<?php if (get_theme_mod('show_sidebar', true)) : ?> <?php get_sidebar(); ?> <?php endif; ?>

functions.php// フォントファミリーの選択 $wp_customize->add_setting('body_font', array( 'default' => 'default', 'sanitize_callback' => 'mytheme_sanitize_font', )); $wp_customize->add_control('body_font', array( 'label' => '本文フォント', 'section' => 'mytheme_typography', 'type' => 'select', 'choices' => array( 'default' => 'デフォルト', 'noto-sans' => 'Noto Sans JP', 'yu-gothic' => '游ゴシック', 'meiryo' => 'メイリオ', 'hiragino' => 'ヒラギノ角ゴ', ), )); function mytheme_sanitize_font($input) { $valid = array('default', 'noto-sans', 'yu-gothic', 'meiryo', 'hiragino'); return in_array($input, $valid) ? $input : 'default'; }