完全解説！WordPressのテーマカスタマイザーを自作・カスタマイズする方法(サンプルコード付き)

みなさんこんにちは！エンジニアの高澤です！

今回は テーマカスタマイザーをカスタマイズする方法について解説していきたいと思います。

テーマカスタマイザーとは、WordPress管理画面にてサイトのプレビューをリアルタイムで閲覧しつつデザインをクリック操作一つでカスタマイズできる大変便利な機能のことをいいます。

例えば、ロゴ画像やサイトのカラー、メインビジュアルやメニュー項目などをカスタマイズすることができます。

テーマカスタマイザーはWordPressの標準機能（コア機能）として提供されており、WordPressテーマごとに独自の機能を持っていたりしますが、開発者はテーマを開発すると同時にテーマカスタマイザーのカスタマイズして編集項目を追加したりすることができます。

当記事では、まさにテーマカスタマイザーの項目を自由に追加して高度にテーマをカスタマイズできる様に構成し執筆いたしました。

ぜひご自身のテーマ開発やお仕事などに当記事を活用していただけましたら幸いです。

テーマカスタマイザーとは

テーマカスタマイザーとは、WordPress管理画面からプレビューをリアルタイムに閲覧しながらサイトのページのレイアウトやデザインをクリックするだけで簡単にカスタマイズできる機能のことをいいます。

WordPressではあらかじめ標準で備わっているコア機能であり、WordPressの管理画面の「外観」→「 カスタマイズ」から設定ページを開いて使用できます。

下図の画面がテーマカスタマイザーになります。

テーマカスタマイザーではほんの一例として、以下のような設定をサイト運営者が簡単に変更できる機能を提供します。

• ロゴやヘッダー画像の設定
• サイト全体のカラーやフォントの調整
• ウィジェットやメニューの配置…など

テーマカスタマイザーは、主に提供されているテーマごとに独自の設定項目を追加できます。（プラグインでもカスタマイザーを提供している場合があります）

テーマカスタマイザーをカスタマイズすることで、サイト運営者にとって使いやすいWordPressサイト環境を作成できます。

基本的な設定項目の追加からリアルタイムプレビューの実装まで、ポイントを押さえれば初心者でも簡単に実装が可能です。ぜひテーマカスタマイザーを活用して、より魅力的なWordPressサイトを作りましょう。

テーマカスタマイザーを自作するとは

テーマカスタマイザーを自作するとは、具体的にはご自身の開発しているテーマに独自のサイトに必要なデータ項目を設定できる様に追加し、それをテーマのPHPテンプレートファイル内でget_theme_mod()関数などで呼び出して、自由に表示できる様にすることをいいます。

例えば、ロゴ画像の横にサブタイトルのような文字を編集できる様にテーマカスタマイザーに独自にテキストフィールドを追加したり、サイドバーに画像やURLを追加できる様にしてバナーを設定できるようにしたりと、非常に多くのパターンでカスタマイズできる様にできます。

テーマカスタマイザーは画面左メニューから設定を変更するとすぐにプレビューに反映されるので、非常に使い心地も良く便利です。

一般販売されている有料テーマでは、よくこのテーマカスタマイザーを中心に実装されてサイト運営者がサイトを自分色にカスタマイズしやすくしてくれていることがほとんどです。

テーマカスタマイザーで使用するテンプレートタグ(関数)

テーマカスタマイザーの実装方法を解説する前に、事前に実装に必要なテンプレートタグなどについて確認しておきましょう。

get_theme_mod()関数

get_theme_mod()関数は、テーマカスタマイザーで設定した値を取得します。

例えば以下のコードを、サイトページ上のカスタマイザーのデータを表示させたい箇所にコピー＆ペーストしてデータを出力します。

<?php
$custom_value = get_theme_mod('setting_name', 'default_value');
echo esc_html($custom_value);

第一引数はカスタマイザー設定のキー（例：setting_name）を指定します。
第二引数はデフォルト値です（省略可）。

テーマカスタマイザーの実装では、頻繁にこのget_theme_mod()関数を使用します。

set_theme_mod()関数

set_theme_mod()関数は、テーマの設定値を保存します。

例えば以下のコードを、フックなどと組み合わせて、どこかの処理のタイミングで実行させて何かしらのデータを保存する際に使用します。

set_theme_mod('setting_name', 'new_value');

主にテーマ初期設定時やインストール直後に使います。

テーマカスタマイザーで使用するフック

テーマカスタマイザーの実装にはフックが必要です。ここでは実装に必要なフックについて解説いたします。

customize_preview_init

customize_preview_initフックは、カスタマイザーのライブプレビュー用スクリプト（JSやCSSなど）を読み込みます。

使用する際は、例えば以下のコードをfunctions.phpに記述します。

<?php
function mytheme_customize_live_preview() {
    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_live_preview');

customize_register

customize_registerフックは、カスタマイザーの設定やコントロールを登録します。

使用する際は、例えば以下のコードをfunctions.phpに記述します。

<?php
function mytheme_customize_register($wp_customize) {
    $wp_customize->add_setting('setting_name', array(
        'default'   => '',
        'transport' => 'refresh',
    ));
    $wp_customize->add_control('control_id', array(
        'label'    => 'ラベル',
        'section'  => 'section_id',
        'settings' => 'setting_name',
        'type'     => 'text',
    ));
}
add_action('customize_register', 'mytheme_customize_register');

これらテンプレートタグやフックを理解していれば、問題なくテーマカスタマイザーの実装は可能です。

次からはテーマカスタマイザーの実装方法について解説いたします。

テーマカスタマイザーに独自の項目を追加する方法

それでは早速、テーマカスタマイザーに独自の項目を追加する方法について解説いたします。

テーマカスタマイズーへ独自の項目を追加するには、以下の実装が必要になります。

• パネルの追加（省略可）
• セクションの追加
• セッティングの追加
• コントロールの追加

上記の内容を実現するコードを記述することで、テーマカスタマイザーに好きな項目を追加して設定できるようになります。

当記事では解説用に非常にシンプルなテーマ（index.phpに「WordPress Theme」と記述されている）を用意し、テーマカスタマイザーをまっさらな状態から実装していきたいと思います。

下図がそのイメージですが、WordPress標準の項目が追加された状態になりますが、テーマのPHPテンプレートにget_theme_mod()関数などで表示の実装は行なっていないため何も機能しない状態です。

何も機能しない項目は一旦無視して、独自の項目を追加してページに表示できるようにしていきたいと思います。

パネルの追加方法

まず最初に、WordPressのカスタマイザーで「パネル」を追加する方法を解説します。

パネルは、セクション（項目グループ）をまとめて整理するためのコンテナのような役割を果たします。以下のコードを用いることで、新しいパネルを作成できます。

    $wp_customize->add_panel(
		'mytheme_custom_panel',
		array(
			'title'    => 'カスタムパネル',
			'priority' => 1,
		)
	);

$wp_customize->add_panel()の部分は、add_panel()メソッドを使用してカスタマイザーに新しいパネルを追加します。

第一パラメータの「mytheme_custom_panel」はパネルの識別IDです。このIDはユニークでなければなりません。他のパネルやセクションと重複しない名前を付けましょう。

第二パラメータの配列の中身の「title」はパネルに表示される名前を指定します。この例では「カスタムパネル」となります。「priority」は表示順序を決める数値です。数値が小さいほど上位に表示されます。

このコードをfunctions.phpやテーマ内のカスタマイズ関連ファイルに追加すると、WordPressのカスタマイザー画面に「カスタムパネル」という名前の新しいパネルが表示されます。

上記コードによって実装されるのは下図の様なイメージです。「カスタムパネル」という項目が追加されているかと思います。

このパネル内にセクションを追加することで、カスタマイズ項目を整理できます。

次はそのセクションを追加する方法についてです。

セクションの追加方法

WordPressのカスタマイザーに「セクション」を追加する方法を解説します。

セクションは、カスタマイザー内で個別の設定項目（コントロール）をグループ化するための単位です。以下のコードを使用して新しいセクションを追加できます。

    // セクションを追加
    $wp_customize->add_section('mytheme_custom_section', array(
        'title'       => 'カスタムセクション',
        'description' => 'テーマ独自の設定を管理します。',
        'priority'    => 30,
        'panel'       => 'mytheme_custom_panel',
    ));

$wp_customize->add_section()は、add_section()メソッドを使用してカスタマイザーに新しいセクションを追加します。

第一パラメータの「mytheme_custom_section」は、セクションを識別するためのユニークなIDです。他のセクションIDと重複しないように設定してください。

第二パラメータの配列内の設定項目の「title」はセクションのタイトル（表示名）を指定します。この例では「カスタムセクション」が表示されます。（__()関数を使用して翻訳対応を行っています）

「description」は、セクションの説明文を指定します。説明はセクションの下部に表示されます

「priority」は、カスタマイザー内での表示順序を決めます。値が小さいほど上に表示されます。

「panel」は、セクションが所属するパネルのIDを指定します。この例では先ほどの「mytheme_custom_panel」に追加されています。

上記コードによって実装されるのは下図の様なイメージです。「カスタムセクション」という項目が追加されているかと思います。

このコードをテーマのfunctions.phpやカスタマイズ用ファイルに追加すると、WordPressのカスタマイザーに先ほどの「カスタムパネル」の中に「カスタムセクション」という新しいセクションが表示されます。

このセクションに対して設定項目（コントロール）を追加することで、カスタマイザーに独自の設定を組み込むことができます。

セッティングの追加方法

WordPressのカスタマイザーに「セッティング（設定）」を追加する方法を解説します。

セッティングは、ユーザーがカスタマイザーで変更した値を保存・管理するためのデータ構造です。
以下のコードを使うと、新しいセッティングを簡単に追加できます。

    // 設定を追加
    $wp_customize->add_setting('mytheme_custom_setting', array(
        'default'   => '',
        'transport' => 'refresh',
    ));

$wp_customize->add_setting()は、カスタマイザーに新しいセッティングを登録するために使用します。このコードでは、[mytheme_custom_setting」というユニークなIDでセッティングが登録されています。このIDは、後でコントロールやテーマ内で値を参照する際に利用されます。

設定には、いくつかの重要な項目があります。

まず、defaultはこの設定の初期値を指定するもので、この例では空文字（''）が設定されています。デフォルトのスタイルや値が必要な場合は適切な値を指定することができます。

次に、transportは、カスタマイザーで値が変更された際に画面にどのように反映するかを決める項目です。

refreshはページ全体をリロードして変更を反映するデフォルトの動作であり、postMessageを指定するとJavaScriptを用いてページの一部を即時に更新するライブプレビュー機能が利用できます。

このコードを追加すると、「mytheme_custom_setting」という名前のセッティングが登録され、デフォルト値として空文字が設定され、値の変更はrefreshモードで更新されます。

ただし、このセッティング単独では機能しないため、コントロールを追加して画面に反映する必要があります。また、postMessageを使用する場合は、JavaScriptでカスタマイザーAPIを拡張する必要がある点に注意が必要です。

コントロールの追加方法

コントロールの追加方法について解説します。

コントロールは、カスタマイザーでユーザーが設定を操作するためのUI要素を定義します。このコードでは、新しい「チェックボックス」タイプのコントロールを追加しています。

以下のコードを使用して新しいコントロールを追加できます。

    $wp_customize->add_control(
        new WP_Customize_Control(
            $wp_customize,
            'my_control_checkbox',
            array(
                'label' => 'カスタムチェックボックス',
                'section'  => 'mytheme_custom_section',
                'settings' => 'mytheme_custom_setting',
                'type'     => 'checkbox',
            )
        )
    );

$wp_customize->add_control()は、カスタマイザーに新しいコントロールを追加するために使用されます。このメソッドでは、WP_Customize_Controlクラスをインスタンス化してコントロールを定義します。

コード中の「my_control_checkbox」はコントロールのユニークなIDであり、カスタマイザーやテーマ内でコントロールを参照する際に使用されます。

コントロールの設定は、配列で定義されます。

「label」は、カスタマイザー画面に表示されるコントロールのラベル名を指定し、この例では「カスタムチェックボックス」となります。

「section」は、コントロールが属するセクションのIDを指定するもので、この例では先ほど作成した「mytheme_custom_section」セクションに配置されます。

「settings」は、このコントロールが関連付けられるセッティングのIDを指定し、この例では「mytheme_custom_setting」が対応しています。

最後に、「type」は、コントロールのタイプを指定するもので、この例では「checkbox（チェックボックス）」です。その他にも、textやradio、selectなどのタイプを選択することが可能です。

コードを追加すると、下図のようにテーマカスタマイザー内の「mytheme_custom_section」セクションに「カスタムチェックボックス」というラベルのチェックボックスが表示されます。

このチェックボックスは先ほどの「mytheme_custom_setting」セッティングと紐づけられており、チェック状態が保存・反映されます。

カスタマイザーを使って、テーマに独自のUI要素を追加することで、ユーザーに柔軟なカスタマイズオプションを提供できます。

customize_registerフックで項目を追加

ここまでの流れで解説してきたコードをまとめていただき、customize_registerフックで実行するようにします。

以下のコードをfunctions.phpにコピー＆ペーストしていただくと、ここまでの項目追加の実装が反映されるのが確認できます。

<?php
function mytheme_customize_register($wp_customize) {

    $wp_customize->add_panel(
		'mytheme_custom_panel',
		array(
			'title'    => 'カスタムパネル',
			'priority' => 1,
		)
	);
    
    // セクションを追加
    $wp_customize->add_section('mytheme_custom_section', array(
        'title'       => __('カスタムセクション', 'mytheme'),
        'description' => __('テーマ独自の設定を管理します。', 'mytheme'),
        'priority'    => 30,
        'panel'       => 'mytheme_custom_panel',
    ));

    // 設定を追加
    $wp_customize->add_setting('mytheme_custom_setting', array(
        'default'   => '',
        'transport' => 'refresh',
    ));

    $wp_customize->add_control(
        new WP_Customize_Control(
            $wp_customize,
            'my_control_checkbox',
            array(
                'label' => 'カスタムチェックボックス',
                'section'  => 'mytheme_custom_section',
                'settings' => 'mytheme_custom_setting',
                'type'     => 'checkbox',
            )
        )
    );
    
}
add_action('customize_register', 'mytheme_customize_register');

customize_registerフックは、WordPressテーマやプラグインでカスタマイザーに新しい設定、セクション、コントロールなどを追加する際に使用するフックです。

フックに登録した関数（上記例ではmytheme_customize_register()関数）には、$wp_customizeというオブジェクトが引数として渡されます。このオブジェクトを介して、セクション、セッティング、コントロールなどを追加します。

このcustomize_registerフックは、カスタマイザーの初期化時に呼び出されるため、カスタマイザーの構造や機能を拡張するためのエントリーポイントとして利用されます。

上記コードをfunctions.phpにコピー＆ペーストできたら、テーマカスタマイザー画面を確認してみてください。
下図の様に「カスタムパネル」という項目が追加されていることと思います。

クリックしていただけますと、下図の様に「カスタムセクション」という項目がさらに表示されるかと思います。クリックして進んでください。

クリックしていただくと、下図の様に今度は「カスタムチェックボックス」というチェックボックスが表示されているかと思います。

こちらにチェックを入れていただくとわかりますが、何も反応しないことがわかるかと思います。

それもそのはず、サイトページ上にカスタマイザーの設定したデータを表示するコードを記述していないので当然です。

何も反応ないのは味気ないので、ここではチェックボックスにチェックをつけたらサイトページ上に「カスタムチェックボックスが選択されています。」という文字が表示されるようにしたいと思います。

以下のコードを、index.phpなどページ表示を担当するPHPテンプレートファイルにコピー＆ペーストしてください。

<?php
// get_theme_modを使って選択されたオプションを取得
$selected_options = get_theme_mod('mytheme_custom_setting', ''); // デフォルト値は空文字

// オプションが選択されている場合に処理を行う
if (!empty($selected_options)) {
    echo '<p>カスタムチェックボックスが選択されています。</p>';
}

ペーストが完了したら、テーマカスタマイザーの編集画面を開いた状態でブラウザを更新していただき、再度以下の「カスタムチェックボックス」のある項目まで進んでください。

そしてチェックボックスにチェックを入れていただくと、下図の様にサイトページ上に設定した文字が表示される動きを確認できるかと思います。

これでテーマカスタマイザーの実装方法の流れは以上になります。お疲れ様でした！

ここまでの内容で、テーマカスタマイザーの独自の項目を追加する実装の基本はバッチリかと思います。

あとは、次以降で解説する追加できる項目についてざっとご紹介したり、WP_Customize_Controlの独自継承クラスでカスタマイズする方法などについても解説いたしますので、よろしければご確認いただきあなたの開発しているテーマをより便利にしていきましょう。

テーマカスタマイザーに追加できる項目

ここでは、テーマカスタマイザーに追加できる項目について解説したいと思います。

追加できる項目には非常に多くの種類の部品が用意されているので、先ほど解説したAPIコードの記述方法などを前提にしていただき、ご紹介するコードの部分（$wp_customize->add_control()）をこれから解説する$wp_customize->add_control()の記述に置き換えていただく形でご自身でカスタマイズしてみてください。

テキストボックス

$wp_customize->add_control の type パラメーターを text に設定することで、カスタマイザーにテキストボックスを追加できます。

以下の例では、example_text という識別子でテキスト入力フィールドを作成しています。

    // コントロールを追加
    $wp_customize->add_control('example_text', array(
        'label'    => 'テキスト入力',
        'section'  => 'mytheme_custom_section',
        'settings' => 'mytheme_custom_setting',
        'type'     => 'text',
    ));

type に text を指定すると、単一行のテキスト入力フィールドが表示されます。このフィールドはユーザーから短いテキストを取得するのに適しており、例えばタイトルや名前、簡単な説明文などの入力を想定しています。

下図がUIのイメージです。

数値入力

$wp_customize->add_control の type パラメーターを number に設定することで、カスタマイザーに数値入力フィールドを追加できます。

以下の例では、example_number という識別子で数値を入力するためのフィールドを作成しています。

    // コントロールを追加
    $wp_customize->add_control('example_number', array(
        'label'    => '数値入力',
        'section'  => 'mytheme_custom_section',
        'settings' => 'mytheme_custom_setting',
        'type'     => 'number',
    ));

type に number を指定すると、数値専用の入力フィールドが表示されます。このフィールドは、価格、数量、サイズなど、数値データを入力させたい場合に適しています。入力が数値に限定されるため、データの一貫性を保つのに役立ちます。

下図がUIのイメージです。

ラジオボタン

$wp_customize->add_control の type パラメーターを radio に設定することで、カスタマイザーにラジオボタンを追加できます。

以下の例では、example_radio という識別子で複数の選択肢を持つラジオボタンを作成しています。

    // コントロールを追加
    $wp_customize->add_control('example_radio', array(
        'label'    => 'ラジオボタン',
        'section'  => 'mytheme_custom_section',
        'settings' => 'mytheme_custom_setting',
        'type'     => 'radio',
        'choices'  => array(
            'option1' => 'オプション1',
            'option2' => 'オプション2',
        ),
    ));

type に radio を指定すると、単一の選択肢を選べるラジオボタンが表示されます。choices 配列で選択肢を定義し、それぞれのキーが保存される値、値が画面に表示されるラベルになります。

この形式は、テーマのスタイルやレイアウトを切り替えるなど、特定の選択肢から1つを選ばせたい場合に適しています。

下図がUIのイメージです。

セレクトボックス

$wp_customize->add_control の type パラメーターを select に設定することで、カスタマイザーにセレクトボックスを追加できます。

以下の例では、example_select という識別子で複数の選択肢を持つセレクトボックスを作成しています。

    // コントロールを追加
    $wp_customize->add_control('example_select', array(
        'label'    => 'セレクトボックス',
        'section'  => 'mytheme_custom_section',
        'settings' => 'mytheme_custom_setting',
        'type'     => 'select',
        'choices'  => array(
            'option1' => 'オプション1',
            'option2' => 'オプション2',
        ),
    ));

type に select を指定すると、ドロップダウン形式のセレクトボックスが表示されます。choices 配列で選択肢を定義し、キーが保存される値、値が表示されるラベルになります。

セレクトボックスは、選択肢が多い場合やコンパクトに選択肢を表示したい場合に適しており、ユーザーに1つの選択肢を指定させる場面で便利です。

下図がUIのイメージです。

チェックボックス

$wp_customize->add_control の type パラメーターを checkbox に設定することで、カスタマイザーにチェックボックスを追加できます。

以下の例では、example_checkbox という識別子で単一のチェックボックスを作成しています。

    // コントロールを追加
    $wp_customize->add_control('example_checkbox', array(
        'label'    => 'チェックボックス',
        'section'  => 'mytheme_custom_section',
        'settings' => 'mytheme_custom_setting',
        'type'     => 'checkbox',
    ));

type に checkbox を指定すると、オン・オフの切り替えができるチェックボックスが表示されます。チェックが入ると true、外れると false が設定値として保存されるため、設定の有効化や無効化を簡単に制御することができます。

この形式は、機能の有無や特定のオプションの切り替えを実装する際に便利です。

下図がUIのイメージです。

カラーピッカー

WP_Customize_Color_Control を使用すると、カスタマイザーにカラーピッカーを追加できます。

以下の例では、example_color という識別子で色を選択するためのコントロールを作成しています。

    // コントロールを追加
    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'example_color', array(
        'label'    => 'カラーピッカー',
        'section'  => 'mytheme_custom_section',
        'settings' => 'mytheme_custom_setting',
    )));

WP_Customize_Color_Control はカラーピッカー専用のコントロールで、ユーザーが自由に色を選べるインターフェースを提供します。

このコントロールを使用することで、テーマの背景色やテキストカラーなどを視覚的に選択でき、デザインのカスタマイズ性が大幅に向上します。選択された色は16進数形式（例: #ffffff）で保存されます。

下図がUIのイメージです。

画像アップローダー

WP_Customize_Image_Control を使用すると、カスタマイザーに画像アップローダーを追加できます。

以下の例では、example_image という識別子で画像を選択またはアップロードするためのコントロールを作成しています。

    // コントロールを追加
    $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'example_image', array(
        'label'    => '画像アップローダー',
        'section'  => 'mytheme_custom_section',
        'settings' => 'mytheme_custom_setting',
    )));

WP_Customize_Image_Control は画像選択やアップロード専用のコントロールで、ユーザーがカスタマイザー内で画像を指定できます。

この機能は、ロゴや背景画像、アイコンなど、テーマで使用する画像を設定する際に便利です。選択した画像はメディアライブラリに保存され、そのURLが設定値として格納されます。視覚的なカスタマイズを可能にする重要な機能です。

下図がUIのイメージです。

ファイルアップローダー

WP_Customize_Upload_Control を使用すると、カスタマイザーにファイルアップローダーを追加できます。

以下の例では、example_upload という識別子でファイルをアップロードするためのコントロールを作成しています。

    // コントロールを追加
    $wp_customize->add_control(new WP_Customize_Upload_Control($wp_customize, 'example_upload', array(
        'label'    => 'ファイルアップローダー',
        'section'  => 'mytheme_custom_section',
        'settings' => 'mytheme_custom_setting',
    )));

WP_Customize_Upload_Control は、画像や音声、PDFなど、さまざまな種類のファイルをアップロードまたは選択できるコントロールです。

選択またはアップロードしたファイルはメディアライブラリに保存され、そのURLが設定値として格納されます。ロゴ以外のファイルや特殊なリソースをカスタマイズ可能にする場面で役立ちます。

下図がUIのイメージです。

スライダー

$wp_customize->add_control の type パラメーターを range に設定することで、カスタマイザーにスライダーを追加できます。

以下の例では、example_range という識別子でスライダーコントロールを作成しています。

    // コントロールを追加
    $wp_customize->add_control('example_range', array(
        'label'    => 'スライダー',
        'section'  => 'mytheme_custom_section',
        'settings' => 'mytheme_custom_setting',
        'type'     => 'range',
        'input_attrs' => array(
            'min'  => 0,
            'max'  => 100,
            'step' => 1,
        ),
    ));

type に range を指定すると、スライダーが表示され、ユーザーが数値の範囲を視覚的に選択できます。input_attrs で min（最小値）、max（最大値）、step（ステップ幅）を指定することで、スライダーの動作範囲と細かさを調整できます。

例えば、0から100の範囲で1ずつ増加するスライダーとして機能します。このコントロールは、音量やサイズ、設定の調整など、数値入力を直感的に行いたい場合に便利です。

下図がUIのイメージです。

URL入力

$wp_customize->add_control の type パラメーターを url に設定することで、カスタマイザーにURL入力フィールドを追加できます。

以下の例では、example_url という識別子でURLを入力するためのコントロールを作成しています。

    // コントロールを追加
    $wp_customize->add_control('example_url', array(
        'label'    => 'URL入力',
        'section'  => 'mytheme_custom_section',
        'settings' => 'mytheme_custom_setting',
        'type'     => 'url',
    ));

type に url を指定すると、URL専用の入力フィールドが表示されます。このフィールドでは、ユーザーが正しいURL形式（例: http://example.com）を入力できるように促され、ブラウザがURLとして有効な形式かをチェックします。

この形式は、外部リンクやサイトのURL設定などを簡単に扱う際に便利です。

下図がUIのイメージです。

日時

WP_Customize_Date_Time_Control を使用することで、カスタマイザーに日時入力コントロールを追加できます。

以下の例では、my_control_datetime という識別子で、日時を選択するためのコントロールを作成しています。

    $wp_customize->add_control(
        new WP_Customize_Date_Time_Control(
            $wp_customize,
            'my_control_datetime',
            array(
                'label'    => 'カスタム日時',
                'section'  => 'mytheme_custom_section',
                'settings' => 'mytheme_custom_setting',
            )
        )
    );

WP_Customize_Date_Time_Control は、ユーザーが日付と時刻を選択できるコントロールです。このコントロールは、カスタム日時設定を行う際に非常に便利で、例えばイベントの日時や締め切りなどの設定をテーマに追加することができます。

ユーザーはカレンダーや時刻ピッカーを使って、直感的に日付と時間を入力できます。

下図がUIのイメージです。

コードエディタ

WP_Customize_Code_Editor_Control を使用することで、カスタマイザーにコードエディタを追加できます。

以下の例では、my_control_code という識別子で、ユーザーがコードを入力できるエディタを作成しています。

    $wp_customize->add_control(
        new WP_Customize_Code_Editor_Control(
            $wp_customize,
            'my_control_code',
            array(
                'label'    => 'カスタムコードエディタ',
                'section'  => 'mytheme_custom_section',
                'settings' => 'mytheme_custom_setting',
            )
        )
    );

WP_Customize_Code_Editor_Control は、テーマカスタマイザー内でコードを編集できる専用のエディタを提供します。このエディタは、CSSやJavaScript、PHPなどのコードを入力する際に役立ち、ユーザーが直接コードを編集できるインターフェースを提供します。

構文ハイライト機能があり、コードを視覚的に見やすくし、エラーの発見も容易にします。

下図がUIのイメージです。

Email

$wp_customize->add_control の type パラメーターを email に設定することで、カスタマイザーにメールアドレス入力フィールドを追加できます。

以下の例では、mytheme_custom_email_control という識別子でメールアドレスを入力するためのコントロールを作成しています。

$wp_customize->add_control('mytheme_custom_email_control', array(
    'label'    => 'Email',
    'section'  => 'mytheme_custom_section',
    'settings' => 'mytheme_custom_email_setting',
    'type'     => 'email',
));

type に email を指定すると、メールアドレス専用の入力フィールドが表示されます。このフィールドでは、ユーザーが有効なメールアドレス（例えば user@example.com）を入力できるように促され、ブラウザが形式を自動的に検証します。

これにより、正しいメールアドレスを収集し、入力ミスを防ぐことができます。

下図がUIのイメージです。

電話番号

$wp_customize->add_control の type パラメーターを tel に設定することで、カスタマイザーに電話番号入力フィールドを追加できます。

以下の例では、mytheme_custom_tel_control という識別子で電話番号を入力するためのコントロールを作成しています。

$wp_customize->add_control('mytheme_custom_tel_control', array(
    'label'    => '電話番号',
    'section'  => 'mytheme_custom_section',
    'settings' => 'mytheme_custom_tel_setting',
    'type'     => 'tel',
));

type に tel を指定すると、電話番号専用の入力フィールドが表示されます。このフィールドでは、ユーザーが電話番号を入力できるようになり、ブラウザによっては、スマートフォンでの入力支援（ダイヤルパッド表示）などが行われる場合があります。

入力形式は厳密に検証されませんが、電話番号に特化したフィールドとして提供され、ユーザーの入力が視覚的に区別しやすくなります。

下図がUIのイメージです。

検索

$wp_customize->add_control の type パラメーターを search に設定することで、カスタマイザーに検索ボックス入力フィールドを追加できます。

以下の例では、mytheme_custom_search_control という識別子で検索用の入力フィールドを作成しています。

$wp_customize->add_control('mytheme_custom_search_control', array(
    'label'    => '検索',
    'section'  => 'mytheme_custom_section',
    'settings' => 'mytheme_custom_search_setting',
    'type'     => 'search',
));

type に search を指定すると、検索専用の入力フィールドが表示されます。このフィールドは、検索ボックスとして使われることを意図しており、ブラウザによっては検索アイコン（虫眼鏡）が自動的に表示されることがあります。

ユーザーが入力した文字列は、検索機能として利用でき、Webサイト内でコンテンツを検索するための便利なインターフェースを提供します。

下図がUIのイメージです。

パスワード

$wp_customize->add_control の type パラメーターを password に設定することで、カスタマイザーにパスワード入力フィールドを追加できます。

以下の例では、mytheme_custom_password_control という識別子でパスワードを入力するためのコントロールを作成しています。

$wp_customize->add_control('mytheme_custom_password_control', array(
    'label'    => 'パスワード',
    'section'  => 'mytheme_custom_section',
    'settings' => 'mytheme_custom_password_setting',
    'type'     => 'password',
));

type に password を指定すると、入力された文字が非表示（伏せ字）になり、パスワード専用のフィールドが表示されます。このフィールドは、ユーザーがパスワードを入力する際に、セキュリティを高めるために文字を隠すことができます。

ログインフォームや設定変更など、パスワードを安全に入力するために適しています。

下図がUIのイメージです。

日付

$wp_customize->add_control の type パラメーターを date に設定することで、カスタマイザーに日付入力フィールドを追加できます。

以下の例では、mytheme_custom_date_control という識別子で日付を選択するためのコントロールを作成しています。

$wp_customize->add_control('mytheme_custom_date_control', array(
    'label'    => '日付',
    'section'  => 'mytheme_custom_section',
    'settings' => 'mytheme_custom_date_setting',
    'type'     => 'date',
));

type に date を指定すると、カレンダーから日付を選択できる日付専用の入力フィールドが表示されます。

このフィールドでは、ユーザーが直感的に日付を選べるため、日付入力の形式を統一することができ、間違いを防ぎやすくなります。主にイベントの日付や期限などの設定に便利です。

下図がUIのイメージです。

時間

$wp_customize->add_control の type パラメーターを time に設定することで、カスタマイザーに時間入力フィールドを追加できます。

以下の例では、mytheme_custom_time_control という識別子で時間を選択するためのコントロールを作成しています。

$wp_customize->add_control('mytheme_custom_time_control', array(
    'label'    => '時間',
    'section'  => 'mytheme_custom_section',
    'settings' => 'mytheme_custom_time_setting',
    'type'     => 'time',
));

type に time を指定すると、時間を入力するためのフィールドが表示されます。このフィールドでは、ユーザーが時刻を入力する際に、時刻形式（例：HH:mm）で簡単に指定でき、ブラウザによっては時刻ピッカーが表示されることもあります。

主にイベントの開始時刻や締め切り時間などを設定する際に便利です。

隠し入力フィールド

$wp_customize->add_control の type パラメーターを hidden に設定することで、カスタマイザーに非表示の入力フィールドを追加できます。

以下の例では、example_hidden という識別子で、非表示の入力フィールドを作成しています。

    // コントロールを追加
    $wp_customize->add_control('example_hidden', array(
        'section'  => 'mytheme_custom_section',
        'settings' => 'mytheme_custom_setting',
        'type'     => 'hidden',
    ));

type に hidden を指定すると、ユーザーには表示されない隠しフィールドを作成できます。このコントロールは、バックエンドでデータを保持するために使用され、ユーザーインターフェースには表示されません。

例えば、特定の設定値を保存しておき、他のカスタマイザーコントロールに影響を与えるために使うことができます。フォームの一部としてデータを扱う際に便利です。

隠し入力フィールドでは、下図の様に項目として表示されず、何も表示されません。

ここまでで追加できる項目をひと通り解説してきました。あとは、ご自身の欲しい機能を選んでご自由に実装していただければと思います。

WP_Customize_Controlクラスで標準UIを独自にカスタマイズする方法

WP_Customize_Controlクラスで標準UIを独自にカスタマイズする方法について解説いたします。

標準UIを独自にカスタマイズできれば痒いところに手が届くようになり、「このUIがもっとこうだったら使いやすくて便利なのにな〜…」を解決することができます。

有料テーマなどでもしばしば実装されている内容になるので、よりテーマカスタマイザーを便利にしたい場合は確認しておきましょう。

WP_Customize_Controlとは

WP_Customize_Control（WP_Customize_Controlクラス）とは、WordPressのテーマカスタマイザーで使用されるコントロールの基本クラスです（「クラス」については、PHPプログラミングの基本の文法になりますのでご確認ください）。

このクラスは、サイト運営者がテーマカスタマイザーでの設定を変更するために使用する各種インターフェース（UI）であるテキストボックス、チェックボックス、セレクトボックスなどをより使いやすく独自にカスタマイズして作成するためのベースとなります。

WP_Customize_Controlを利用することで、先ほど解説したWordPressで提供する標準のインターフェースを自由にカスタマイズすることができ、よりテーマカスタマイザーを便利にすることが可能です。

例えば、下図の様にテキストエリアの入力した文字数をカウントして、その文字数をリアルタイムで表示できたりします。

この様に、WP_Customize_Controlクラスを継承したりして実装することで、HTMLやCSS、JavaScriptのロジックを自由に組み込むことができ、より洗練されたユーザーインターフェースを提供することができます。

WP_Customize_Controlで標準UIを独自にカスタマイズする方法

それでは早速WP_Customize_Controlクラスを利用して、テーマカスタマイザーの標準UIを独自にカスタマイズしていきたいと思います。

ここでは先ほどチラ見せした下図のUIを実装したいと思います。

まず、以下のコードをfunctions.phpにコピー＆ペーストしてください。

<?php
if (class_exists('WP_Customize_Control')) {
    class WP_Customize_Textarea_Control extends WP_Customize_Control {
        public $type = 'textarea';

        public function render_content() {
            ?>
            <label>
                <span class="customize-control-title"><?php echo esc_html($this->label); ?></span>
                <textarea 
                    style="width: 100%; height: 100px;" 
                    oninput="updateCharCount(this)" 
                    <?php $this->link(); ?>><?php echo esc_textarea($this->value()); ?></textarea>
                <span>
                    <span class="char-count">0</span>文字
                </span>
            </label>
            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    // 初期値の文字数を設定
                    document.querySelectorAll('textarea').forEach(function (textarea) {
                        var charCountElem = textarea.nextElementSibling.querySelector('.char-count');
                        charCountElem.textContent = textarea.value.length;
                    });
                });

                function updateCharCount(textarea) {
                    var charCountElem = textarea.nextElementSibling.querySelector('.char-count');
                    charCountElem.textContent = textarea.value.length;
                }
            </script>
            <?php
        }
    }
}

上記コードは、WordPress のテーマカスタマイザーにカスタムテキストエリアコントロールを追加するためのクラス WP_Customize_Textarea_Control を定義しています。

具体的には、標準の WP_Customize_Control クラスを拡張し、カスタムコントロールを作成しています。

上記コードの説明をすると、WP_Customize_Textarea_Control は WP_Customize_Control を継承したカスタムクラス（独自のクラス）です。
このクラスを使うことで、カスタマイザーにテキストエリアの入力フィールドを追加することができます。$type = 'textarea'; というプロパティで、このコントロールがテキストエリア型であることを指定しています。

render_content メソッドは、カスタムコントロールのHTMLとJavaScriptを出力します。このメソッド内で、実際にカスタムコントロール（テキストエリア）のレイアウトと動作を定義しています。

WP_Customize_Control の render_content メソッドは必須のメソッドではありませんが、カスタムコントロールを作成する際に非常に重要で、よくオーバーライドされるメソッドです。

ちなみにWP_Customize_Control クラスにはWordPressコア（WordPressを構成する本体のプログラム）で render_content メソッドが既に定義されており、その内容は単にコントロールの HTML 出力を生成します。

標準の render_content は、通常、<label>、<input>（または他のフィールド）を表示するだけの基本的な HTML を生成しますが、これを拡張してカスタマイズしたい場合、render_content メソッドをオーバーライドして自分で HTML を定義することができます。

つまり、render_content メソッドをオーバーライドすることは、カスタムコントロールを作成する際の「慣習」であり、特定のカスタムコントロールを作る場合に必要な処理です。標準のコントロールタイプでは自動的にレンダリングされますが、独自のコントロールを作成する場合は、このメソッドを使って出力内容を自分で定義します。

以下の公式ドキュメントにてWP_Customize_Control::render_content()の解説ページがありますので、よろしければご確認ください。

https://developer.wordpress.org/reference/classes/wp_customize_control/render_content/

上記のサンプルコードを使用することで、カスタマイザーでテキストエリアを使用し、ユーザーが入力した文字数を視覚的にカウントできるようになります。

また例えば、制限文字数を設けたい場合や、入力内容の進捗を表示したい場合にも応用するのに便利です。

次に、以下のテーマカスタマイザーを実装する基本のコードをfunctions.phpにコピー＆ペーストしてください。

function mytheme_customize_register3($wp_customize) {
    // セクションを追加
    $wp_customize->add_section('mytheme_custom_section', array(
        'title'       => 'カスタムセクション',
        'description' => 'テーマ独自の設定を管理します。',
        'priority'    => 30,
    ));

    $wp_customize->add_setting('custom_textarea', array(
        'default' => '',
        'transport' => 'refresh',
    ));
    
    $wp_customize->add_control(new WP_Customize_Textarea_Control($wp_customize, 'custom_textarea_control', array(
        'label' => 'カスタムテキストエリア',
        'section' => 'mytheme_custom_section',
        'settings' => 'custom_textarea',
    )));
    
}
add_action('customize_register', 'mytheme_customize_register3');

これでWP_Customize_Controlクラスで標準UIを独自にカスタマイズする手順は完了です。

テーマカスタマイザー編集画面をご確認ください。実装した項目をクリックして進めていただくと、下図の様に「カスタムテキストエリア」の直下に「0文字」が表示されているかと思います。

画像をアップするとこんな感じです。ただ、今の段階だと文字を入力しても何も反応がないと思います。なので、入力した文字がサイトページ上に表示されるようにindex.phpなどにコードを表示するコードを追加しましょう。

以下のコードを、index.phpなどページ表示を担当するPHPテンプレートファイルにコピー＆ペーストしてください。

<?php
echo nl2br(get_theme_mod('custom_textarea', 'デフォルトテキスト'));
?>

そして再度文字を入力するなどして確認していただくと、下図の様に入力したデータが反映されているのを確認できるかと思います。

ここまでで、WP_Customize_Controlクラスで標準UIを独自にカスタマイズする方法の解説は終わりです。お疲れ様でした！

あとはご自身で自由にコードを修正してみたりしてカスタマイズしてみてください。

効率的にループで項目を追加する場合

ケースバイケースですが、もっと効率よくPHPのループ処理や配列などを利用して少ないコードで実装できないか？という方向けに簡単にサンプルコードを掲載させていただきます。

よろしければ以下のサンプルコードを参考にしてみてください。

利用する場合はこれまでの解説通り、functions.phpにコピー＆ペーストしてください。

    // 各入力フィールドのサンプル
    $input_fields = [
        'email' => 'Email',
        'tel' => '電話番号',
        'search' => '検索',
        'password' => 'パスワード',
        'url' => 'URL',
        'number' => '数値',
        'date' => '日付',
        'time' => '時間',
        'range' => '範囲',
        'color' => '色',
    ];

    foreach ($input_fields as $type => $label) {
        $setting_id = "mytheme_custom_{$type}_setting";
        $control_id = "mytheme_custom_{$type}_control";

        // 設定を追加
        $wp_customize->add_setting($setting_id, array(
            'default'   => '',
            'transport' => 'refresh',
        ));

        // コントロールを追加
        $wp_customize->add_control($control_id, array(
            'label'    => "{$label}",
            'section'  => 'mytheme_custom_section',
            'settings' => $setting_id,
            'type'     => $type,
        ));
    }

テーマカスタマイザーの編集画面をご確認いただくと、下図の様に無事実装ができていることが確認できるかと思います。

実際に利用する場合は、セクション名やIDなどご自身の実装に適した形に修正してからご利用ください。

テーマカスタマイザーを国際化対応する方法

国際化対応とは、WordPress管理画面左メニュー「設定」→「一般」の「サイトの言語」を日本語や英語に切り替えた時に、それぞれの言語ごとに合わせて翻訳される対応のことをいいます。

例えば英語に切り替えたら管理画面全体が英語になりますが、この対応のことを国際化対応といいます。対応しない場合、英語で設定しても日本語で表示されるといったことが起こってしまいます。

WordPressのテーマカスタマイザーを国際化対応するには、翻訳機能の処理を追加して、異なる言語環境に対応できるようにします。（国際化対応や翻訳については事前にご確認ください）。

カスタマイザーのセクションやコントロールのラベルに翻訳対応を追加する場合は以下のようにコードを修正します。

<?php
function mytheme_customize_register($wp_customize) {

    $wp_customize->add_panel(
        'mytheme_custom_panel',
        array(
            'title'    => __('カスタムパネル', 'mytheme'),  // 翻訳対象
            'priority' => 1,
        )
    );
    
    // セクションを追加
    $wp_customize->add_section('mytheme_custom_section', array(
        'title'       => __('カスタムセクション', 'mytheme'),  // 翻訳対象
        'description' => __('テーマ独自の設定を管理します。', 'mytheme'),  // 翻訳対象
        'priority'    => 30,
        'panel'       => 'mytheme_custom_panel',
    ));

    // 設定を追加
    $wp_customize->add_setting('mytheme_custom_setting', array(
        'default'   => '',
        'transport' => 'refresh',
    ));

    // コントロールを追加
    $wp_customize->add_control(
        new WP_Customize_Control(
            $wp_customize,
            'my_control_checkbox',
            array(
                'label'    => __('カスタムチェックボックス', 'mytheme'),  // 翻訳対象
                'section'  => 'mytheme_custom_section',
                'settings' => 'mytheme_custom_setting',
                'type'     => 'checkbox',
            )
        )
    );
    
}
add_action('customize_register', 'mytheme_customize_register');

上記コードは、__(‘カスタムパネル’, ‘mytheme’) や __('カスタムセクション', 'mytheme') など、すべての文字列に対して __()関数を使用して翻訳対応を行なっています。

これにより、これらの文字列が翻訳ファイルに基づいて適切な言語に翻訳されるようになります。

国際化対応の全体的な方法の説明は一気に省略しますが、このタイミングで行ったものとします。

ここまでの実装によって、テーマカスタマイザーの翻訳ファイルをロードできるようになります。

まとめ

今回の記事では、テーマカスタマイザーをカスタマイズする方法について解説しました。

テーマカスタマイザーは、WordPress管理画面でサイトのプレビューをリアルタイムに確認しながら、デザインを簡単に操作できる非常に便利な機能です。ロゴ画像、サイトカラー、メインビジュアル、メニュー項目などを自由に変更することができます。

WordPressの標準機能として提供されているテーマカスタマイザーは、テーマごとに独自のカスタマイズが可能です。開発者は、テーマの開発過程でテーマカスタマイザーを活用し、サイト運営者に新しいカスタマイズオプションを提供することができます。

今回の内容を参考にして、ご自身のテーマ開発やプロジェクトにテーマカスタマイザーを効果的に活用し、より便利なWordPressサイトを開発できるよう繰り返しご活用いただけましたら幸いです。