【WP テーマカスタマイザーvol.2】カラーピッカーやメディアコントロールを追加する

とても便利なワードプレスのテーマカスタマイズ。
配色や共通画像もカスタマイザーから簡単に設定できるようにしておけば、修正の都度「どこに書いたっけ～><」という手間が省けて超便利!!

ロゴやアイコンなどの共通画像、メインカラー、などを変えられるようにしておけば
クライアント様自身で自由に変更してもらえるし、
自分で変更する場合も、簡単、便利、変更抜け駆除、早い!!

このページでは「カラーピッカー(色指定)」「メディア(画像)」の
オリジナルのカスタマイザーをテーマカスタマイズに追加する方法をご紹介します。

コードはコピペでOK^^ 自己責任でご利用下さいませm(__)m

「カラーピッカー」「メディア」のカスタマイザーを追加する

オリジナルメニューとその内容を作る場合は、基本的なコードの書き方は変わりません。

control に、ちょこっとコードを追加するだけで、通常の投稿と同様に画像が呼び出せたり、色指定ができる。。
ムフフ、便利～^^v

追加用のコード

以下をfunctions.phpにコピペして、必要な部分を書き換えればオリジナルのコントロールがカスタマイザーに表示されます^^

それぞれ 8行目 にデフォルトの画像やカラーコードを入れておくのがお勧めです

8'default' => 'デフォルトにしたい内容記載、不要ならこの行ごと削除',

メディア追加のコード(コピペはこちら)

function mytheme_customizer( $wp_customize ) { // この中に、section、setting、controlを登録
	$wp_customize->add_section( 'sectionID' , array( 
		'title' => 'カスタマイザーに表示される項目タイトル', 
		'description' => '項目全体の注意書き、不要ならこの行ごと削除', 
		'priority' => 30, )); 
 
	$wp_customize->add_setting('settingID', array( 
	  'default' => 'デフォルトにしたい内容、不要ならこの行ごと削除', 
	  'transport' => 'refresh', 
	  'type' => 'theme_mod', )); 
  
	$wp_customize->add_control( new WP_Customize_Image_Control ('controlID', array( 
	  'settings' => 'settingID', 
	  'label' => '内容ごとのタイトル', 
	  'description' => 'この内容に関する注意書き、不要ならこの行ごと削除', 
	  'section' => 'sectionID', ))); 
} 
add_action( 'customize_register', 'mytheme_customizer' );

赤文字部分 new WP_Customize_Image_Control ( ～～ ) でメディアコントロールを呼び出します。
[control] type => (フォーム部品) は記載しません

カラーピッカー追加のコード(コピペはこちら)

function mytheme_customizer( $wp_customize ) { // この中に、section、setting、controlを登録 
	$wp_customize->add_section( 'sectionID' , array( 
		'title' => 'カスタマイザーに表示される項目タイトル', 
		'description' => '項目全体の注意書き、不要ならこの行ごと削除', 
		'priority' => 30, )); 
  
	$wp_customize->add_setting('collar_settingID', array( 
	  'default' => 'デフォルトにしたい内容、不要ならこの行ごと削除', 
	  'transport' => 'refresh', 
	  'type' => 'theme_mod', )); 
  
	$wp_customize->add_control( new WP_Customize_Color_Control ('collar_controlID', array( 
	  'settings' => 'collar_settingID', 
	  'label' => '内容ごとのタイトル', 
	  'description' => 'この内容に関する注意書き、不要ならこの行ごと削除', 
	  'section' => 'sectionID', ))); 
} 
add_action( 'customize_register', 'mytheme_customizer' );