テーマカスタマイザーに機能を追加する

スポンサーリンク

テーマカスタマイザーに独自の機能を追加するには、functions.phpファイルに書き込んでいきます。

テーマカスタマイザー追加例


function trio_theme_customizer( $wp_customize ) {
	/* ロゴアップロード設定機能追加 */
	$wp_customize->add_section( 'logo_section' , array(
		'title' => 'サイトロゴ設定', 	
		'priority' => 30, 						
		'description' => 'サイトのロゴ設定', 	
 	) );

	$wp_customize->add_setting( 'logo_image_url', array(
		'sanitize_callback' => 'esc_url_raw',		
	));

	$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'logo_image_url', array(
		'label' => 'ロゴ', 					
		'section' => 'logo_section', 			
		'settings' => 'logo_image_url', 		
		'description' => '画像をアップロードするとヘッダーのサイト名が画像になります(横158px,縦38px推奨)',
 	) ) );

	/* メインカラー設定機能追加 */
	$wp_customize->add_section( COLOR_SECTION , array(
		'title' => 'サイトの色設定', 		//セクション名
		'priority' => 40, 			//カスタマイザー項目の表示順
		'description' => 'サイトの色設定', 		//セクションの説明
 	) );

	$wp_customize->add_setting('main_color',array(
		'default' => MAIN_COLOR_DEFAULT,
		'sanitize_callback' => 'maybe_hash_hex_color'
	) );

	$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'main_color', array(
		'section' => 'colors',
		'settings' => 'main_color',
		'label' =>'メインカラー'
	) ) );
}

add_action('customize_register', 'trio_theme_customizer');


trio_theme_customizer(好きな名前でOK)というカスタマイザーへ追加する関数を作ります。その関数の中で、セクションとコントロールを追加していきます。

①add_section関数

新しいセクションを追加する関数です。
セクションはテーマ設定のグループになります。新しいセクションを作らなくても、すでにあるセクションにコントロールを追加することもできます。

②add_setting関数

追加するコントロールにデフォルト値(初期値)を設定することができます。また、sanitize_callback関数で、入力値のエラーをチェックすることができます。テーマチェックプラグインでは、sanitize_callbackでサニタイズされてないと警告されます。

③add_control関数

新しいコントロールを追加する関数です。①で作成されたセクションまたは、すでにあるセクション内に追加していきます。
呼び出す関数を変えると、設定内容に合わせた機能が追加されます。例えば、カラー設定であれば、WP_Customize_Color_Controlを利用すると、カラー選択ボックスが表示されるようになります。

テキスト項目: WP_Customize_Control

ファイルアップロード項目: WP_Customize_Image_Control

カラー選択項目 : WP_Customize_Color_Control

スポンサーリンク

逆引き辞典 

この記事と一緒によく読まれています!