テーマカスタマイザーでの編集をライブプレビューする方法

日付 2016年1月31日

カテゴリーチュートリアル

テーマカスタマイザーでの標準設定では、設定項目の値を変更する度にプレビューが更新され、確認するのに時間差を覚え、ちょっと煩わしさを感じるんじゃないでしょうか？

以前テーマカスタマイザーの編集方法でも少し紹介したんですが、ワードプレスのテーマカスタマイザーには画面を更新することなくライブプレビューする方法が用意されていますので、公式の参照ページにも載っていると思いますが、テーマやプラグインに実装する方法を要点だけまとめて紹介しようと思います。

過去の記事：テーマカスタマイザーの編集方法

ライブプレビューの実装方法

まずプレビュー用のJSファイルを作成します。

ファイル名は何でもいいんですが、ここでは例として「theme-customizer.js」とし、テーマやプラグインの所定のディレクトリに配置してください。

紹介する手順は、

設定項目追加コードの編集
JSファイルの出力
プレビュー用のコード編集

となっています。

設定項目追加コードの編集

「$wp_customize->add_setting」を使用した際、IDの他に配列を２つ目のデータとして入力しますが、その中の１つ「transport」の値を「postMessage」に変更します。

$wp_customize->add_setting( 'setting_id', array( 
	'default' => '', 
	'transport' => 'postMessage', // ライブプレビュー設定
	'sanitize_callback' => 'sanitize_text_field',
));

標準設定では「transport」の値は「refresh」つまり更新となっていますので、これを「postMessage」に変更することでプレビュー画面がリロードされなくなります。

JSファイルの出力

作成した「theme-customizer.js」をテーマカスタマイザー使用時に出力します。

「customize_preview_init」にフックさせる
「jquery」と「customize-preview」に依存

if( is_customize_preview() ) {

	// 「customize_preview_init」にフック
	add_action( 'customize_preview_init', 'theme_customizer_live_preview_js' );
	// 出力する関数の定義
	function theme_customizer_live_preview_js() {

		wp_enqueue_script(
			'your_theme_customizer_js',
			'/path-to-your/theme-customizer.js',
			array( 'jquery', 'customize-preview' ), // 「jquery」と「customize-preview」に依存
			'',
			true
		);

	}
}

上の条件依存するファイルのハンドルは間違えないようにしましょう。

「customize-preview」は設定項目のデータを取得するのに必要ですし、「jquery」は設定項目から取得したデータを使ってスタイルの編集などを行うのに非常に便利です。

プレビュー用のコード編集

では、作成した「theme-customizer.js」を編集していきます。

基本的な形は以下の通りです。

( function( $ ) {

	wp.customize( 'your_setting_id', function( value ) {
		value.bind( function( newval ) {
			// 設定項目に応じた処理
		});
	});

} ) ( jQuery );

こんな感じです。

一般的にはいくつも設定項目がありますので、複数用意することになりますので、使用例は以下のコードをご参照ください。

( function( $ ) {

	var settingId;

	// テーマカスタマイザーの設定項目のID
	settingId = 'logo_background_image';

	wp.customize( settingId, function( value ) {
		value.bind( function( newval ) {

			// 設定変更後の値「newval」を使って処理する。
			selectors = '#your-logo-background';
			// 例
			if( newval != "" ) {
				$( selectors ).css({ 'background-image': 'url(' + newval + ')' }); 
			} else {
				$( selectors ).css({ 'background-image': 'none' });
			}

		});
	});


	// カスタムCSSのプレビュー例
	settingId = 'your_custom_css';
	wp.customize( settingId, function( value ) {
		value.bind( function( newval ) {

			selectors = 'style#your-custom-css';
			$( selectors ).text( newval ); 

		});
	});

} ) ( jQuery );

このように各設定項目毎に色んな処理を行えますので、自分が思った通りに出力できるようにしておきましょう。

また、ちょっと複雑なライブプレビューを必要とする設定項目に関しては、「テーマカスタマイザーのライブプレビューを柔軟に扱う方法」などの関連ページをご参照ください。