【WordPress】カスタマイザーに自作のオリジナル項目を追加する方法

カスタマイザーからいろいろ変更ができるようにしておくと、管理がかなり楽になります。

意外と簡単に導入できるので、その方法をご紹介します。

追加方法

下のコードをfunctions.phpに記述↓

function my_theme_customize_register($wp_customize) {

	$wp_customize->add_section('basic_section', array( // セクションを作成(ここでは'basic_section')
		'title' => 'セクション1', // セクションのタイトル
		'priority' => 1000, // 各セクションの表示順序を指定(値の小さいものから順に上から表示)
	));

	$wp_customize->add_setting('example_1', array( // 項目の設定(ここでは項目名を'example_1'と指定)
		'default' => '', // デフォルトで設定しておく値
	));

	$wp_customize->add_control('example_1', array( // セクションに項目を追加
		'label' => 'タイトル', // 項目のタイトル
		'section' => 'basic_section', // 追加先のセクションを指定
		'settings' => 'example_1',
		'type' => 'text', // 1行のテキスト入力欄
		'description' => '説明', // 項目の説明
	));
}

add_action('customize_register', 'my_theme_customize_register');

大まかな流れは、「add_sectionで新しいセクションを作成して、add_settingで設定した項目をadd_controlで追加する」といった感じです。

add_controlの’type’の値を’textarea’にすると複数行のテキスト入力欄が、’checkbox’だとチェックボックスが表示されます。

ラジオボタン

ラジオボタンを追加するには、’type’を’radio’として、’choices’で選択肢を指定します。

$wp_customize->add_setting('example_2', array(
	'default' => '',
));

$wp_customize->add_control('example_2', array(
	'section' => 'basic_section',
	'settings' => 'example_2',
	'type' => 'radio', // ラジオボタン
	'choices' => array( // 選択肢を指定
		'radio1' => '選択肢1',
		'radio2' => '選択肢2'
	),
));

色の選択

カラーピッカーで色が選べるようになります。

$wp_customize->add_setting('example_3', array(
	'default' => '',
));

$wp_customize->add_control(
	new WP_Customize_Color_Control($wp_customize, 'example_3', array(
		'section' => 'basic_section',
		'settings' => 'example_3',
)));

画像の選択

ウィジェットにあるような、画像の選択機能です。

$wp_customize->add_setting('example_4', array(
	'default' => '',
));

$wp_customize->add_control(
	new WP_Customize_Image_Control($wp_customize, 'example_4', array(
		'section' => 'basic_section',
		'settings' => 'example_4',
)));

カスタマイザーで設定した値の取得

カスタマイザーで設定した値を取得するには、get_theme_mod(‘項目名’)を使います。

項目名は、上の例でいうとexample_4などですね。

値を実際に表示させるには、echoを付けて「echo get_theme_mod(‘example_4’);」とします。

基本的には入力した値がそのまま取得されますが、タイプによって注意すべき点があります。

チェックボックスの場合

下のコードで、チェックが入っているかどうかの判別ができます。

if (get_theme_mod('項目名')) {

}

ラジオボタンの場合

取得される値は=>の左側の部分です。

画像の場合

値は画像のURLで取得されます。

なので、実際に使うとなると下のような感じですね。

<img src="<?php echo get_theme_mod('example_4'); ?>">

値をCSSとして出力するには

functions.phpに下のコードを書くだけです。

<?php
function customizer_output() { ?>
	<style type="text/css">
		body {
			background-color: <?php echo get_theme_mod('example_3'); ?>;
		}
	</style><?php
}
add_action('wp_head', 'customizer_output');

以上です!