テーマカスタマイザーのライブプレビューをループ処理する方法

著者 Nora

日付 2016/02/17

カテゴリーカスタマイズ

タグテーマカスタマイザー,ライブプレビュー,ループ

テーマカスタマイザーのライブプレビューって、JSファイルの編集って面倒じゃないですか。各設定項目毎に「wp.customize( ‘setting_id’…」と書いて、設定項目を追加すればするだけ、テキスト量がどんどん膨らんでしまいます。

でも単純なCSSプロパティ変更程度なら、簡単にループ処理できてしまうんです。

テーマカスタマイザー用のクラス「 Nora_Theme_Customizer_Settings 」で実際に使用しているループ処理がありますので、これを参考にして書いていきます。

ライブプレビューをループ処理する手順

JSファイルでどのようなループ処理をするかにもよりますが、僕の場合、「セレクタ」「設定ID」「プロパティデータ（複数のオプショナルデータを含む）」を各設定項目毎に使用するループにしました。

wp.customizeで必要とされるデータは、

設定項目のID
変化を適応させるセレクター
プロパティ名

の３つが最低限必要です。

これらを上手く受け渡せるように配列を編集することで可能になるんですよ。

PHP側での処理

こちらでは、追加する設定項目毎のデータをJavaScriptの配列に追加していきます。

上記の３つのデータをJSON形式にでもして、配列に加えてしまいます。

<?php 

// 設定項目のデータ用の配列を用意

$settings_data = array(
  'id' => $setting_id,
  'property' => $property,
  'selector' => $selector
)

array_push(
  $settings_data,
  array(
    'id' => $setting_id2,
    'property' => $property2,
    'selector' => $selector2
  )
);

// JSON化
$settings_data_json = wp_json_encode( $settings_data )

// テーマカスタマイザー用のフックでJSONデータ定義を出力
add_action( 'customize_preview_init', 'theme_customize_live_preview' );
function theme_customize_live_preview() {
  global $settings_data_json;
  echo '<script>settingsDataJSON = ' . $settings_data_json . '</script>' . PHP_EOL;
}

?>

まぁ実際に僕が使っているコードとは異なるんですが、これでも大丈夫でしょう。

JS側での処理

次にJS側でのループ処理です。

PHP側で出力定義した変数「settingsDataJSON」を使って「セレクタ」「プロパティ」「データ」を捌いていきます。

function( $ ) {
  function getNoraSettings( selector, settingsPropertyId, settingsProperty ) {
    wp.customize( settingsPropertyId, function( value ) {
      value.bind( function( newval ) {

        if( newval.match( /^https?\:\/\// ) ) {
          $( 'style#theme-customizer-styles' ).append( selector + '{' + settingsProperty + ':url(' + newval + ');} ' );										
        } else if( ! newval ) {
          $( 'style#theme-customizer-styles' ).append( selector + '{' + settingsProperty + ':none;} ' );										
        } else {
          $( 'style#theme-customizer-styles' ).append( selector + '{' + settingsProperty + ':' + newval + ';} ' );										
        }

      });
    });
  }

  $( document ).ready( function() {
    $( 'body' ).append( '<style id="theme-customizer-styles"></style>' );
    if( settingsDataJSON.length > 0 ) {
      for( var i = 0; i < settingsDataJSON.length; i++ ) {
        getNoraSettings( settingsDataJSON[ i ].selector, settingsDataJSON[ i ].id, settingsDataJSON[ i ].property );
      }
    }
  });
}) ( jQuery );

といった感じで、ループでwp.customizeを使う関数を呼び出すことで、案外大抵の処理ができてしまうんです。