WordPressで簡単に色や画像の入れ替えが行える機能にテーマカスタマイザーというのがあります。
テーマカスタマイザーは管理画面から「外観」→「カスタマイズ」をクリックすると出てくる設定画面のことで、テーマカスタマイザーという名称を知らなくても、何等かのテーマで設定したことがあるでしょう。
また、自作テーマや既存テーマにおいて独自のカスタマイザー項目を追加した経験のある方なら、設定項目に「タイトル」や「説明」を指定すればその項目についての説明を表示するのが可能なことはご存じでしょう。
ただ、テーマを作成するにあたり、テーマカスタマイザー項目をたくさん追加したときの経験として、説明だけをどこかに追加した方が分かりやすいのでは？、何等かの区切り（区切り線など）を入れた方が見やすくなるのでは？と思うことが多くなり、各所へ説明文のみ（設定のない）項目を追加して補足説明などをするようにしていっています。
そこで今回は、テーマカスタマイザーの設定項目の中へ、任意の説明項目（何も設定がなくただ表示するだけの項目）を作る方法を紹介します。
なお、本ページはCustomizer Control: Arbitrary HTMLで紹介されているコードを基に、何となくテーマカスタマイザーへ任意の項目の追加ができる位のスキルがある方でもできるだけ分かりやすいようにした、自身の備忘録も兼ねた記事になります。
本ページ掲載のコードを使用するときは
本ページで掲載しているコードは、以下に了承した上で使用ください
- コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
- コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
- コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
- コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
- 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります（コメント欄等から質問いただいても基本回答は致しません）
- 掲載しているコードの転載を禁じます（SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です）
テーマカスタマイザーへ設定のない項目を追加する手順
このページへたどり着いた方は、WordPressのカスタマイザー用のコントロールには「チェックボックス」「テキスト」「ラジオボタン」「画像やファイルのアップロード」など、デフォルトで設定されているコントロールがあるのはご存じかと思います。
でも、WordPressのテーマカスタマイザーで使用できるコントロール（customizer API）には、今回追加するような「設定のない項目」を追加するコントロールは存在しません。
従って、「設定のない項目」を作るには、
- 設定のない項目を使えるようにする（コントロールの登録）
- テーマカスタマイザーへ設定のない項目を表示する
という2つの処理が必要になります。以後順に紹介していきます。
1の「設定のない項目を使えるようにする（コントロールの登録）」は使いまわすことができますので1回だけ登録します。
１．「設定のない項目」を使えるようにする（独自のコントロールクラスの追加）
今回のカスタマイズをしていくにあたっては、できるだけ理解して進めた方が後々困らないと思い、可能な限り細かく説明していきますので、説明なんてどーでもいいという方は参考ページにあるコードをテーマ（子テーマ）のfunctions.phpへ追加していただければと思います（私の環境では動作しましたが、貴サイトでもという保証はできません）。
コントロールクラスって何？
コントロールクラスというのは、このカスタマイザーの項目は「テキスト入力」項目ですよ、画像をアップロードする項目ですよ！とカスタマイザー上での処理方法を示すもので、以下のようなものがWordPressには組み込まれています（一例ですべてではありません）。
| コントロールクラス | カスタマイザー上での処理 |
|---|---|
| WP_Customize_Control | 文字列・セレクト・ラジオボタンなど（typeで入力方法を判断） |
| WP_Customize_Image_Control | 画像のアップロード（画像URLを格納） |
| WP_Customize_Media_Control | 画像のアップロード（画像IDを格納） |
| WP_Customize_Color_Control | 色（カラーピッカーで選択） |
前述したように、標準のコントロールクラスには、今回追加する何も設定項目のない項目を追加できるものがありませんので、テーマのfunctions.phpへコードを追加して設定項目なしのコントロールクラスを追加して使用できるようにします。
コントロールクラスを追加するための基礎となるコード
以下は先に紹介した参考ページに書かれているコードを基に、詳細説明のため、日本語での名称などへ一部書き換えたものです。
if ( class_exists( 'WP_Customize_Control' ) && ! class_exists( 'コントロールクラス名' ) ) {
class コントロールクラス名 extends WP_Customize_Control {
public function render_content() {
if ( isset( $this->label ) ) {
echo '<span class="customize-control-title">' . $this->label . '</span>';
}
if ( isset( $this->description ) ) {
echo '<span class="description customize-control-description">' . $this->description . '</span>';
}
}
}
}この段階では、functions.phpへコピペしないでください
コントロールクラスを追加するためのコードの解説
既に同じコントロールクラス（コントロール用のID）が存在した場合エラーとなってしまうのを避けるため、コードの先頭行と末尾の行で、重複したコントロールクラスがあったらそちらのコードの指示に従うようにしています。
そして、同じコントロールクラス名が使われていなかったら、その他のコードで以下のような出力をするように指示されています。
- labelに記述されているものをspanタグで出力しなさい
- descriptionに記述されているものをspanタグで出力しなさい
ここまで理解いただいたら、前述のコードの「コントロールクラス名」と書かれている部分（2か所）を半角の英字（小文字と大文字）、数字、アンダーバーを使って任意の文字列に変更してからご自身のサイトのテーマにあるfunctions.phpへ追記します。
コントロールクラス名の例：Prefix_Custom_Content２．テーマカスタマイザー上へ項目を追加する
コントロールクラスが追加できたら（functions.phpへ追記・保存してもエラー等が発生しなかったら）、テーマカスタマイザーへの項目追加部分へ以下を追加します。
$wp_customize->add_setting( 'セッティング名', array() );
$wp_customize->add_control( new コントロールクラス名( $wp_customize, 'セッティング名', array(
'section' => 'セクション名',
'priority' => 優先順位,
'label' => __( 'タイトル', 'textdomain' ),
'description' => __( '内容.', 'textdomain' ),
) ) );コントロールクラス名は前項で追加したコントロールクラス名へ、セッティング名は任意の文字列（半角英数字とアンダーバーが使用可）へ、セクション名はカスタマイザー上で表示させるセクション名へ変更してください
前述したように、labelの右にある「タイトル」部分とdescriptionの右側にある「内容」の部分が出力されます。
別の場所へ今回の説明文のみのコンテンツを表示させたい場合には、コントロールクラス名自体はそのまま使えますので、上記コードのセッティング名、セクション名を変更すればいくつでも追加できます。
