2026年7月20日

WordPressのCustomize Control（カスタムコントロール）追加

カスタマイズ

はじめに

WordPressのテーマやプラグイン開発において、カスタムコントロールを追加することは高度なカスタマイズを行う上で重要なステップです。標準のカスタマイズ機能では提供されていないオプションをユーザーが簡単に操作できるようにすることで、サイトの柔軟性とユーザビリティを大幅に向上させることができます。

症状・背景

このテーマが必要になる主な場面:

カスタムデザイン要素やパラメータを管理する必要がある場合
複数の色設定やフォント選択が可能なオプションを追加したい場合
テーマ独自のショートコードまたはウィジェットをカスタマイズしたい場合

手順・設定方法

ステップ1: カスタムコントロール用PHPファイルを作成する

# テーマまたはプラグインディレクトリ内に新しいPHPファイルを作成します。
touch my-theme/inc/customize-controls.php

# 必要なWordPressクラスをインポートします。
echo 'use \WP_Customize_Control;' > my-theme/inc/customize-controls.php

ステップ2: カスタムコントロールクラスの定義

# 新しく作成したPHPファイルにカスタムコントロールクラスを定義します。
cat <<EOF >> my-theme/inc/customize-controls.php
class MyTheme_Customize_Control extends \WP_Customize_Control {
    public \$type = 'my_theme_custom_control';

    // フィールド設定の初期化処理
    public function enqueue() {
        wp_enqueue_script(
            'my-theme-custom-control-js',
            get_template_directory_uri() . '/js/customize-controls.js',
            array( 'jquery', 'customize-base' ),
            false,
            true
        );
    }
}
EOF

# カスタムコントロールのJavaScriptファイルを作成します。
touch my-theme/js/customize-controls.js

ステップ3: カスタムコントロールをカスタマイズAPIに登録する

# テーマのfunctions.phpかプラグインファイル内で次のコードを追加します。
cat <<EOF >> my-theme/functions.php
function my_theme_customize_register(\$wp_customize) {
    // カスタムコントロールクラスを登録
    \$wp_customize->register_control_type( 'MyTheme_Customize_Control' );

    // 新しいカスタムセクションとコントロールを作成します。
    \$wp_customize->add_section(
        'my_theme_custom_section',
        array(
            'title' => esc_html__( 'Custom Section', 'my-theme' ),
            'priority' => 10,
        )
    );

    \$wp_customize->add_setting(
        'theme_option',
        array(
            'default'   => '',
            'transport' => 'postMessage'
        )
    );

    \$wp_customize->add_control( new MyTheme_Customize_Control(
        \$wp_customize, 
        'my_theme_custom_control', 
        array(
            'label'       => esc_html__( 'Custom Control', 'my-theme' ),
            'section'     => 'my_theme_custom_section',
            'settings'    => 'theme_option'
        )
    ) );
}
add_action( 'customize_register', 'my_theme_customize_register' );
EOF

ステップ4: カスタムコントロールの表示と動作をカスタマイズする

# JavaScriptファイルに次のように記述します。
cat <<EOF >> my-theme/js/customize-controls.js
( function( \$, api ) {
    // カスタムコントロールのクラス名を指定してセレクタを作成
    var controlSelector = '.my_theme_custom_control';

    // 新しいコントロールが読み込まれたときに実行される関数
    wp.customize.bind( 'ready', function() {
        wp.customize(controlSelector, function(value) {
            value.setting.bind(function(to) {
                \$('input.my_theme_custom_control').val(to);
            });
        } );
    });

} )( jQuery, wp.customize );
EOF

注意事項

カスタムコントロールのJavaScriptファイルは必ずcustomize-base.jsを読み込むように指定してください。
カスタムコントロールのCSSも必要に応じてカスタマイズする必要があります。
セキュリティ上の注意: ユーザー入力データに対して適切なエスケープやバリデーションを行うこと
パフォーマンス/運用上の注意: 大量のカスタムコントロールを追加するとページが重くなる可能性があるため、必要なものだけを実装すること

まとめ

1. クラス定義: カスタムコントロール用に独自のPHPクラスを作成します。

2. 登録: customize_registerアクションを使ってカスタマイズAPIに新たなコントロールを登録します。

3. JavaScript: 必要な場合、カスタムコントロールの表示や動作を追加のJavaScriptでカスタマイズできます。

4. CSS: カスタムコントロールが正しく表示されるようにCSSも必要に応じて追加します。

5. テスト: テスト環境で新しいカスタムコントロールを試すことを忘れないでください。

Post Views: 3