ウェブ制作をやっていると、一度使用したコードはコピペして再利用してみたり、次にそのコードについて考えた際に度忘れしていたりという事もあり、皆様が備忘録をブログにしている意味が、いまになってようやくわかりました笑。

テーマカスタマイザーについて。

ワードプレスのテーマに沿っての機能になりますが、テーマカスタマイザーに力を入れているテーマも多々存在します。
コードをいちいち確認せずに視覚的・感覚的にデザインをカスタマイズできるような項目などを設置できるので、誰かが使う事を前提としているモノであれば、必然となる機能の一つではないでしょうか。

これが今回僕が話題にしているテーマカスタマイザーといわれる機能です。
この機能を使うためのお勉強について投稿していきます。

テーマカスタマイザーの基本の設定。

テーマカスタマイザーを利用するにあたって、ワードプレスのテーマのfunction機能への追記が必要になります。
(※予め注意点ですが、functionなどファイルを扱う際は事前の保存をお忘れなく。
記述ミス等があれば、ページが表示されなくなってしまいますので、自身の無い方はあまりいじらない方がおススメです。)

アクションを定義。

 function mytheme_customize_register( $wp_customize ) {
       // セクション、テーマ設定、コントロールを追加します。
   }
   add_action( 'customize_register', 'mytheme_customize_register' );

まず、カスタマイザーを使用するにあたりfunctionへアクションを定義が必要です。。(WordPress Codexより抜粋)。

今からテーマカスタマイザーを利用しますよ的な宣言ですね。

パネルの設置。

$wp_customize->add_panel( 'setting_header_section', array(
    'title'     => '【ヘッダーカスタマイズ】', //パネルに表示する文字。
    'priority'  => 10, //表示する位置を決める。
  )); 

パネルの設置ですが、カスタマイズする為の表紙みたいなものです。
ここでは、ヘッダーカスタマイズという箱を作って、その中にヘッダー用のカスタマイズを入れておけば、いざ使うときに分かりやすくなりますよね。

セクションの設置。

$wp_customize->add_section(
		'setting_color_section',
		array(
			'title'    => '色関連',
			'panel'    => 'setting_header_section',
			'priority' => 1,
		)
	);

$wp_customize->add_section(
		'setting_image_section',
		array(
			'title'    => '画像関連',
			'panel'    => 'setting_header_section',
			'priority' => 2,
		)
	);

パネルを用意していれば、その中にさらにセクションとして項目を追加する事ができるので、内容が盛りだくさんになりそうな場合は、パネル・セクションを設置したうえで、実際のカスタマイズ項目を追加していくと管理しやすいと思います。

これらのコードの追記によりカスタマイザーを利用する為の枠組みが完了です。
このあと、どのパネル・セクションへカスタマイザーの機能を設置していくのかを決めてコードを記述していけば、自分流のカスタマイザーを作成する事が可能になります。

テーマカスタマイザーの実際の機能の設定。

準備が出来たらいよいよ機能を追加して行きます。
実際にどのような事が可能かどうか簡単にご紹介しておきましょう。

• 画像のアップロード。
• テキスト・文章の記述。
• ラジオボタンの選択肢の設置。
• チェックボックスの選択肢の設置。

大きく分けて上記の機能が使えるようになります。4つだけと思えますが、ラジオボタンでCSSのクラスを変更したり、カテゴリーを変えてみたり、チェックボックスで表示・非表示を利用してみたり、アニメーションのON・OFFのボタンにしてみたり、使い方次第で色々と応用する事も可能です。

セッティングの設定。

 $wp_customize->add_setting( 'header_menu_color' , array(
       'default'     => '#000000',
       'transport'   => 'refresh',
   ) );

セッティングというのは簡単に言うと、この機能を使いますよといった感じの宣言みたいなものです。
例えば今回はカラーをカスタマイズする項目を表示する場合はデフォルトとなる色を予め決めておくことができます。
transportに関しては、カスタマイザーで変更をした場合に反映する方法ですね。「refresh」で設定したあとリロードして反映するものの他にも「postMessage」という即時反映の指示もございます。

「postMessage」に関しては、別途Javascriptにて即時に反映させる為の指示を追加しなければならないですが、正直「refresh」のままでも現時点では特に問題ないため、こちらの設定でいいと感じています。

コントロールの設定。

 $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_menu_color', array(
 'label' => 'ヘッダーのメニュー色', //表示する名前
 'section' => 'setting_color_section', //どのセクションへ表示するかの指示
 'settings' => 'header_menu_color', //対象となるセッティングの
 'priority' => 10, //表示する順番
'description' => 'このセッティングで何ができるのか説明できます。', //セッティングの説明
 )));  

上記個「new WP_Customize_Color_Control」を利用する事でカラーピッカーを表示して感覚的に色の設定を行えるようになります。
その他は表示に関する設定になりますので、ダブルスラッシにて解説をしておりますので、確認してみてください。

まとめます。

 function mytheme_customize_register( $wp_customize ) {
//パネルを設置
$wp_customize->add_panel( 'setting_header_section', array(
    'title'     => '【ヘッダーカスタマイズ】', //パネルに表示する文字。
    'priority'  => 10, //表示する位置を決める。
  )); 
//パネル内にセクションの設置
$wp_customize->add_section(
		'setting_color_section',
		array(
			'title'    => '色関連',
			'panel'    => 'setting_header_section',
			'priority' => 1,
		)
	);
//使用機能セッティング。
 $wp_customize->add_setting( 'header_menu_color' , array(
       'default'     => '#000000',
       'transport'   => 'refresh',
   ));
//セクション内にコントロールの設置。
 $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_menu_color', array(
 'label' => 'ヘッダーのメニュー色', //表示する名前
 'section' => 'setting_color_section', //どのセクションへ表示するかの指示
 'settings' => 'header_menu_color', //対象となるセッティングの
 'priority' => 10, //表示する順番
'description' => 'このセッティングで何ができるのか説明できます。', //セッティングの説明
 )));  
   }
 add_action( 'customize_register', 'mytheme_customize_register' );

以上で管理画面のカスタマイザーで例えば、ヘッダーメニューの色変更をする為の指示ができるようになります。
他にも画像設置の指示やラジオボタン指示など色々ありますが、長くなりますので、もっともシンプルなカラーの反映についてのみのご説明と致します。

反映について。

ここまでで終わりと思わせぶりな文章になってしまいましたが、実は、上記カスタマイザーの機能を追加したにすぎない為、実際のウェブサイトを反映させるためにはCSSとしてHTMLコードとして出力させなければ機能しません。

function mytheme_customize_css()
{
    ?>
         <style type="text/css">
             header.menu { color:<?php echo get_theme_mod('header_menu_color', '#000000'); ?>; }
         </style>
    <?php
}
add_action( 'wp_head', 'mytheme_customize_css');

get_theme_mod()関数というものを利用して出力するようにfunctionへ記述すれば、カスタマイザーで設定したカラーが上記で設定したCSShead内へと出力し、カラーをカスタマイズする事ができるようになります。

まず、カスタマイザーで機能を追加し、そしてその情報をきちんと出力するところまで作業すれば、管理画面上でウェブデザインのカスタマイズが出来るようになります。

今回は一つの項目だけについて説明しましたが、これをヘッダーやフッター・投稿の文字色など色々な場面のカスタマイズを可能にするためには、すべてにおいて上記コードを記入していけば、大変ですが、きっとコーディング要らずのテーマを作ることだって可能ですね。

とても素敵な機能ですので、是非、チャレンジしてみて、コツをつかんでくださいね。