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

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

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

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

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

  • Table of Contents

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

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

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

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

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

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

PHP側での処理

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

上記の3つのデータを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を使う関数を呼び出すことで、案外大抵の処理ができてしまうんです。

余談

見ての通り、一度セットアップしたらそのやり方の通りに追記していくだけなんで、後から追加していく分には楽なんですが、最初のセットアップはちょっと面倒ですよね。

僕が作ったクラス「 Nora_Theme_Customizer_Settings 」では、こう言った処理が自動で行われます。しかもスタイルの生成をして、テーマカスタマイザー設定保存時にデータベースにCSSを丸ごと保存し、出力時にいくつも関数を呼び出さないから、普通に生成するよりは断然速い筈です。

まぁCSSプロパティのみ有効ですので、複雑な設定は自分でカスタマイズする必要があるので、使いどころは限られますが、頑張れば複雑なライブプレビュー用の処理もPHP側で用意できるかもしれませんので、改善しがいがあるのかもしれません。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください