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

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

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

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

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

WordPressのカスタマイザー画面の画像
「外観>カスタマイズ」画面のメニュー項目。今回の例では「Header Color」という項目を追加
WordPressのカスタマイザー設定の画像
例では「Header Color」内の設定に「Menu Background 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クラスのオブジェクトを指定しましたが、プレーンテキストの入力フォームなど、その他のコントロールオブジェクトを指定することもできます。

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

Class Reference/WP Customize Manager/add control « WordPress Codex

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

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

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

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

項目名 ID 優先順序
サイト基本情報 title_tagline 20
colors 40
ヘッダー画像 header_image 60
背景画像 background_image 80
メニュー nav_menus 100
ウィジェット widgets 110
ホームページ設定 static_front_page 120
追加CSS custom_css 200

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

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

テーマカスタマイザーの値を出力|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の詳細についは、以下の参考サイトなどを確認にしてみてください。

参考サイトなど

コメント投稿またはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はこちらから。

また、コメントは承認制となります。