WordPress3.4のテーマカスタマイザーで自由度の高いテーマを作ろう

ヘッダーや背景のカスタマイズは以前からの機能だったので簡単に追加できましたが、オリジナルの項目を追加しようと思ったらちょっと大変です。

セクションの設定

始めにセクションの名などの設定をします。

functions.php

		add_action( 'customize_register', 'theme_customize_register' );
		function theme_customize_register($wp_customize) {
			$wp_customize->add_section( 'test_section', array(
				'title'          =>'オリジナルの項目',
				'priority'       => 100,
			));
			/* ここの項目の設定を追加していきます。 */
		}
		

「customize_register」というフックで項目の設定をします。
「title」はメニューのタイトル、「priority」はメニューの追加位置です。
基本的にカスタマイザーの拡張はこの関数の中で行います。

この設定で下図のように表示されますが、今の時点では中身に何も入っていないので何も表示されません。

テキストのオプションを追加する。

入力項目の設定をします。
最初は簡単なテキストの入力欄を設定してみましょう。
先ほどの「theme_customize_register」関数の中に下記を追加します。

「$wp_customize->add_setting」で項目の設定をします。

functions.php – theme_customize_register

		$wp_customize->add_setting('test_options[text01]', array(
		   'type'  => 'option',
		));
		

「test_options[text01]」はキーとなる文字列です。
一つだけなら配列にする必要はないですが、今後のことも考えて配列で入れておきます。
オプションはとりあえず「’type’ => ‘option’」とだけ設定しておきます。
他にも権限などの設定ができるようです。

次に「$wp_customize->add_control」で実際に表示されるラベル名や入力タイプなどの設定を行います。

functions.php – theme_customize_register

		$wp_customize->add_control( 'test_textfield', array(
			'settings' => 'test_options[text01]',
			'label' =>'テストテキストフィールド',
			'section' => 'test_section',
			'type' => 'text',
		));
		

これで下図のようなテキストフィールドが作成されます。

入力したテキストを表示する。

入力した情報は「wp_options」に保存されますので、次のようにすれば表示できます。

index.php

		<?php
		$options =  get_option('test_options');
		echo esc_html($options['text01']);
		?>
		

これでテーマカスタマイザーでリアルタイムに編集できるオリジナルの入力欄が作成できました。

入力欄はテキストタイプ以外もあります。
基本的には「add_control」の「type」を変更するだけです。
「checkbox」「radio」「select」などがあります。

チェックボックス

入力欄を増やすには「add_setting」の「add_control」を2つセットで増やします。
チェックボックスは「’type’ => ‘checkbox’」にするだけですね。

functions.php – theme_customize_register

		$wp_customize->add_setting('test_options[checkbox01]', array(
		   'type'  => 'option',
	    ));
		$wp_customize->add_control( 'test_checkbox', array(
			'settings' => 'test_options[checkbox01]',
			'label' =>'新しいチェックボックス',
			'section' => 'test_section',
			'type' => 'checkbox',
		));
		

ラジオボタン / セレクトボックス

ラジオボタンやセレクトボックスは「type」以外にも「choices」を設定します。

functions.php – theme_customize_register

		$wp_customize->add_setting('test_options[radio01]', array(
		   'type'  => 'option',
	    ));
		 $wp_customize->add_control( 'test_radio', array(
			'settings' => 'test_options[radio01]',
			'label' =>'新しいラジオボタン',
			'section' => 'test_section',
			'type' => 'radio',
			'choices'    => array(
				'value1' => 'その1',
				'value2' => 'その2',
				'value3' => 'その3',
			),
		));
		

カラーを選択

ヘッダーテキストのようにカラーピッカーにすることももちろんできます。

functions.php – theme_customize_register

		 $wp_customize->add_setting( 'test_options[color]', array(
			'type' => 'option'
		));
		$wp_customize->add_control( new WP_Customize_Color_Control(
			$wp_customize, 'test_options[color]',
			array(
				'settings' => 'test_options[color]',
				'label' => 'カラー',
				'section' => 'test_section',
		)));