テーマカスタマイザー内に設定のない項目(説明など)を追加する方法

テーマカスタマイザー内に設定のない項目(説明など)を追加する方法

WordPressで簡単に色や画像の入れ替えが行える機能にテーマカスタマイザーというのがあります。

テーマカスタマイザーは管理画面から「外観」→「カスタマイズ」をクリックすると出てくる設定画面のことで、テーマカスタマイザーという名称を知らなくても、何等かのテーマで設定したことがあるでしょう。

また、自作テーマや既存テーマにおいて独自のカスタマイザー項目を追加した経験のある方なら、設定項目に「タイトル」や「説明」を指定すればその項目についての説明を表示するのが可能なことはご存じでしょう。

ただ、本サイトで配布している【HABONE】テーマを作成するにあたり、テーマカスタマイザー項目をたくさん追加したときの経験として、説明だけをどこかに追加した方が分かりやすいのでは?、何等かの区切り(区切り線など)を入れた方が見やすくなるのでは?と思うことが多くなり、各所へ説明文のみ(設定のない)項目を追加して補足説明などをするようにしていっています。

そこで今回は、テーマカスタマイザーの設定項目の中へ、任意の説明項目(何も設定がなくただ表示するだけの項目)を作る方法を紹介します。

なお、本ページはCustomizer Control: Arbitrary HTMLで紹介されているコードを基に、何となくテーマカスタマイザーへ任意の項目の追加ができる位のスキルがある方でもできるだけ分かりやすいようにした、自身の備忘録も兼ねた記事になります。

なお、テーマカスタマイザーへ独自の項目を追加する基本的な方法は以下のページを参照ください。

ページ上部へ戻る▲

テーマカスタマイザーへ設定のない項目を追加する手順

このページへたどり着いた方は、WordPressのカスタマイザー用のコントロールには「チェックボックス」「テキスト」「ラジオボタン」「画像やファイルのアップロード」など、デフォルトで設定されているコントロールがあるのはご存じかと思います。

でも、WordPressのテーマカスタマイザーで使用できるコントロール(customizer API)には、今回追加するような「設定のない項目」を追加するコントロールは存在しません。

従って、「設定のない項目」を作るには、

  1. 設定のない項目を使えるようにする(コントロールの登録)
  2. テーマカスタマイザーへ設定のない項目を表示する

という2つの処理が必要になります。以後順に紹介していきます。

1の「設定のない項目を使えるようにする(コントロールの登録)」は使いまわすことができますので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

2.テーマカスタマイザー上へ項目を追加する

コントロールクラスが追加できたら(functions.phpへ追記・保存してもエラー等が発生しなかったら)、テーマカスタマイザーへの項目追加部分へ以下を追加します。

$wp_customize->add_setting( 'セッティング名', array() );

$wp_customize->add_control( new コントロールクラス名( $wp_customize, 'セッティング名', array(
	'section' => 'セクション名',
	'priority' => 優先順位,
	'label' => __( 'タイトル', 'textdomain' ),
	'description' => __( '内容.', 'textdomain' ),
) ) );

コントロールクラス名は前項で追加したコントロールクラス名へ、セッティング名は任意の文字列(半角英数字とアンダーバーが使用可)へ、セクション名はカスタマイザー上で表示させるセクション名へ変更してください

前述したように、labelの右にある「タイトル」部分とdescriptionの右側にある「内容」の部分が出力されます。

別の場所へ今回の説明文のみのコンテンツを表示させたい場合には、コントロールクラス名自体はそのまま使えますので、上記コードのセッティング名、セクション名を変更すればいくつでも追加できます。

このページは役に立ちましたか?

著:清水 由規, 著:清水 久美子, 著:鈴木 力哉, 著:西岡 由美, 監修:星野 邦敏, 監修:吉田 裕介
¥2,948 (2022/08/11 01:26時点 | Amazon調べ)
著:Mana
¥2,200 (2022/08/11 01:26時点 | Amazon調べ)

作者:

WordPress用テーマ「HABONE」の開発、プラグインやテーマの翻訳、WordPressの使い方やカスタマイズ方法などの情報を配信しています。

年齢:40代 趣味/園芸・ペット・卓球