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

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

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

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

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

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

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

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

追加用のコード

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

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

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

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' );

• 赤文字部分 new WP_Customize_Color_Control ( ～～ ) でカラーピッカーを呼び出します。
• [control] type => (フォーム部品) は記載しません

WordPressのビルトインセクション

WordPressには、テーマカスタマイズで使えるビルトインセクションがバンドルされています。

ロゴ、色、背景画像、ヘッダ画像などは、
functions.php に theme_support で指定すれば、それだけでテーマカスタマイズに出てくるので、使い方によってはオリジナルカスタマイザーを作るより楽ちんな場合も^^