【WordPress】外観カスタマイズの項目を追加する例｜テーマカスタマイザー

WordPressでは、管理画面内にある「外観＞カスタマイズ」の画面から、さまざまな設定ができるテーマカスタマイザーという機能があります。

そのテーマカスタマイザーではテーマカスタマイズ APIを利用することで、項目の追加・削除などが行なえますが、今回はテーマカスタマイザーの項目を追加する例となります。

【WordPress】「外観＞カスタマイズ」の項目を追加する例

今回の例では、テーマカスタマイザーに以下のように「Header Color」という項目を追加し、カスタマイズ画面から指定した要素に対してCSSのcolorプロパティの値を変更できるようにします。

以下、ソースコードの例となりfunctions.phpに記述します。

function mytheme_customize_register( $wp_customize ) {

	// セクションを追加
	$wp_customize->add_section( 
		'header_color',  // セクションを識別する「セクションID」を指定
		array(
			'title' => __( 'Header Color', 'mytheme' ), // 表示名を指定
			'priority'   => 30, // 表示順の優先度を指定
		)
	);
	
	// テーマ設定を追加
	$wp_customize->add_setting( 
		'header_menu_bg', // テーマ設定を識別する「テーマ設定ID」を指定
		array(
			'default'     => '#000000', // デフォルト値を設定
			'sanitize_callback' => 'sanitize_hex_color', // 値のサニタイズを行う関数を指定
		) 
	);
		
	// 「セクション」と「テーマ設定」を紐づけてコントロール（テーマカスタマイザーに表示する入力フォーム）を出力
	$wp_customize->add_control( 
		new WP_Customize_Color_Control( 
			$wp_customize,    
			'header_menu_bg', // コントロールを識別する「コントロールID」を指定
			array(
				'label'      => __( 'Menu Background Color', 'mytheme' ), // 表示名を指定
				'section'    => 'header_color', // セクションIDを指定
				'settings'   => 'header_menu_bg', // 設定IDを指定
				'priority'   => 30, // 表示順の優先度を指定
			) 
		) 
	);
}
add_action( 'customize_register', 'mytheme_customize_register' );

// head内にCSSを追加
function mytheme_customize_css()
{
	// テーマカスタマイザーで変更した値を取得
	$header_menu_bg = get_theme_mod('header_menu_bg');
    ?>
	<style type="text/css">
		.site-header .menu-item{ 
			background-color:<?php echo $header_menu_bg ?>; 
	}
	</style>
    <?php
}
add_action( 'wp_head', 'mytheme_customize_css');

以下、ソースコードの説明となります。

テーマカスタマイザーの項目を追加｜customize_register

テーマカスタマイザーの項目を追加するには、アクションフックcustomize_registerのコールバック関数内で設定を行います。

コールバック関数内の引数は、テーマカスタマイズ APIを扱うWP_Customize_Managerクラスのオブジェクトとなり、そのオブジェクトのメソッドを利用することで、テーマカスタマイザーで追加する項目を設定します。

今回の例で利用するオブジェクトのメソッドでは、それぞれ以下の3つの設定を追加します。

• 「セクション」の追加
• 「テーマ設定」の追加
• 「コントロール」の追加

以下、「セクション」「テーマ設定」「コントロール」の説明となります。

セクションを追加

「セクション」はカスタマイズ画面に表示する項目となり、今回の例では、$wp_customize->add_section()を利用し、「Header Color」という項目を追加しています。

例のソースコードでは、3行目からの以下の箇所となります。

// セクションを追加
$wp_customize->add_section( 
	'header_color',  // セクションを識別する「セクションID」を指定
	array(
		'title' => __( 'Header Color', 'mytheme' ), // 表示名を指定
		'priority'   => 30, // 表示順の優先度を指定
	)
);

セクションをグループ化できる「パネル」

また、テーマカスタマイズ APIでは、セクションをグループ化できるパネルという項目を作成することも可能です。

パネルの追加方法については、以下のリンク先を参考にしてみてください。

WP_Customize_Manager::add_panel() | Method | WordPress Developer Resources

テーマ設定を追加

「テーマ設定」はセクション内に追加する設定の値を扱います。今回の例では、$wp_customize->add_setting()を利用し、色の値を扱う設定を追加しています。

例のソースコードでは、12行目からの以下の箇所となります。

// テーマ設定を追加
$wp_customize->add_setting( 
	'header_menu_bg', // テーマ設定を識別する「テーマ設定ID」を指定
	array(
		'default'     => '#000000', // デフォルト値を設定
		'sanitize_callback' => 'sanitize_hex_color', // 値のサニタイズを行う関数を指定
	) 
);

値のサニタイズ

また、「テーマ設定」を追加する際に、入力された値をサニタイズする場合には、sanitize_callbackにサニタイズを行う関数を指定します。

今回の例では、'#'のついた16進数のカラー値をサニタイズできるWordPress関数のsanitize_hex_colorを指定しています。

コントロールを追加

「コントロール」はセクションとテーマ設定を紐付けて、テーマカスタマイザーに表示する入力フォームを作成します。

今回の例では$wp_customize->add_control()利用し、上記で追加した「セクション」と「テーマ設定」を、それぞれのIDで紐付けて値を入力するフォームを作成します。

フォーム名は「Menu Background Color」とし、入力フォームにはコントロールオブジェクトのWP_Customize_Color_Control()で、カラーピッカーを利用した入力フォームを設置しています。

例のソースコードでは、21行目からの以下の箇所となります。

// 「セクション」と「テーマ設定」を紐づけてコントロール（テーマカスタマイザーに表示する入力フォーム）を出力
$wp_customize->add_control( 
	new WP_Customize_Color_Control( 
		$wp_customize,    
		'header_menu_bg', // コントロールを識別する「コントロールID」を指定
		array(
			'label'      => __( 'Menu Background Color', 'mytheme' ), // 表示名を指定
			'section'    => 'header_color', // セクションIDを指定
			'settings'   => 'header_menu_bg', // テーマ設定IDを指定
			'priority'   => 30, // 表示順の優先度を指定
		) 
	) 
);

コントロールオブジェクトについて

例では$wp_customize->add_control()の引数に、カラーピッカーを利用できるWP_Customize_Color_Controlクラスのオブジェクトを指定しましたが、プレーンテキストの入力フォームなど、その他のコントロールオブジェクトを指定することもできます。

詳しくは、以下のリンク先を参考にしてみてください。

WP_Customize_Manager::add_control() | Method | WordPress Developer Resources

コントロールに指定するセクションについて

例では、新規セクションを追加し「Header Color」という項目を作成ましたが、テーマカスタマイズ APIにデフォルトで用意されているテーマカスタマイザーの項目を利用することも可能です。

その場合には新規セクションを追加する必要はなく、'section'の値に以下の項目のIDを指定します。

テーマカスタマイズ APIにデフォルトで用意されているテーマカスタマイザーの項目

デフォルトで用意されているテーマカスタマイザーの項目を削除する場合

また、デフォルトで用意されているテーマカスタマイザーの項目は削除することも可能です。詳しくは以下のリンク先を参考にしてみてください。

【WordPress】外観カスマイズの項目を削除する方法｜テーマカスタマイザー

テーマカスタマイザーの値を出力｜get theme mod()

テーマカスタマイザーの値はget theme mod関数で取得できます。get theme mod関数の引数には、取得したい値の「テーマ設定ID」を指定します。

今回の例では、get theme mod関数をwp_headフックのコールバック関数内で利用し、head内に要素の背景色を変更するスタイルを追加しています。

例のソースコードでは、37行目からの以下の箇所となります。

// head内にCSSを追加
function mytheme_customize_css()
{
	// テーマカスタマイザーで変更した値を取得
	$header_menu_bg = get_theme_mod('header_menu_bg');
    ?>
	<style type="text/css">
		.site-header .menu-item{ 
			background-color:<?php echo $header_menu_bg ?>; 
	}
	</style>
    <?php
}
add_action( 'wp_head', 'mytheme_customize_css');

まとめ

以上がテーマカスタマイザーのメニュー項目を追加する例となります。テーマカスタマイズ APIの詳細については以下の参考サイトなどを確認にしてみてください。