こんにちは
今回はWordPressの自作カスタマイザー制作の中でのキモ

私の中ではすごく大事な要素であるセレクティブリフレッシュについて私が現在まで調べていた内容を書き記しておこうと思います

今回は自作カスタマイザーの発展的な内容になります
詳しい初期の登録設定などは下記の記事をご参照下さい

WordPress 自作カスタマイザーの登録($wp_cutomize)と表示方法

そもそもセレクティブリフレッシュとは？

WordPressのCMSたる重要要素の一つとして、まず「カスタマイザー」の存在が挙げられます

カスタマイザーとはWordPressの管理画面から「外観」→「カスタマイズ」の項目で入ることができるのですが、こちらではリアルタイムに現在のサイトの状態を見ながらサイトの内容やデザインを変更することが可能な機能で、
コンピュータに詳しくない人やそもそもWordなどが扱えない人でも、感覚的に操作が可能であることから非常にUX(ユーザーの体験）に優れていると言えます

その中では変更した内容がリアルタイムに見ているサイトに反映されるのですが、
「セレクティブリフレッシュ」を登録設定しておくことでその変更反映を劇的に早められ、
PC操作の煩わしさなどがなくなり更にユーザビリティを向上させる事が可能となります

セレクティブリフレッシュの概念をまとめる

セレクティブリフレッシュの仕組みから解説していきます

WordPressは既存の設定でｊQueryを読み込むようになっていてこれを使用して管理画面の操作に対して変更を加えます

WordPressが提供するAPIの一つ$wp_customizeの設定の一つとして、

パーシャルを設定する

$wp_customize->selective_refresh->add_partial

という設定項目があります

これは現在書いているPHPからJavaScriptにAjaxリクエスト（非同期通信）をするためのリクエストを行うための、パラメータ（情報）を設定します

Ajaxリクエストは、後で解説するJavaScriptを介してプレビュー用の新しいHTMLマークアップを取得します

JavaScriptは現在表示しているHTMLを書き換え、
結果、一瞬でユーザーが選択した内容が画面に反映される事になります

さらに、HTMLのセレクター（ID) を設定しプレビューの領域とそれに対応する設定のを紐付け、関連付けをしてくれます

つまり何の事かというと、目に見える編集用のショートカットを表示してくれる、管理画面の鉛筆マークが出現してすぐに編集項目に飛ぶ事ができるようになります

‘render_callback’ に関数を指定する

上記のパーシャルの設定のなかに‘render_callback’という設定項目があります

これはカスタマイザーの設定情報が更新された時に呼び出されるコールバック関数で、
基本的に更新された情報をHTMLにレンダリングするロジックを関数として登録しておきます

登録したIDでHTMLを表示する

上で設定したHTMLのセレクター（ID) を用いて、
管理画面で設定した値をHTML上に表示できるようにします

Ajaxリクエストを受け取るためのJSファイルを読み込む

上で設定したPHP側のAjaxリクエストを受けて処理を返すJavaScriptのファイルを読み込んでおきます

JavaScript（ｊQuery)にて変更を処理する

実際にJavaScriptを書いて変更内容を処理して管理画面上に表示します

これでカスタマイザーのセレクティブリフレッシュが実装できます

ここまでの概要のやることまとめです

• functions.phpにカスタマイザーを登録する際にパーシャルパラメータを設定する
• パーシャルに設定するコールバック関数を設定、用意する
• 設定値をHTML上に表示できるようにする
• カスタマイザー専用のJSファイルを用意、作成する
• jQueryでHTMLを書き換える

と、上記の流れを組んで書いていきます
順番に見ていきます

カスタマイザーの登録（パーシャル）

functions.phpに下記の関数を登録コピペでOKです

こちらのコードは以前の記事でも紹介したカスタマイザー登録関数の応用です

登録関数の説明は省きますが、今回は画像をアップロード出来るようにして、
ループを回して３つづつ登録できるようにします

またカスタマイザーを登録する際にsettingの項目で忘れずに以下のパラメータを指定しておくようにしましょう

'transport' => 'postMessage',

これは設定値を反映する際の再読み込みを防止するパラメータです

パーシャルを設定するポイントは以下のコードです

$wp_customize->selective_refresh->add_partial( $id, array(
	'selector'            => '#'.$id,
       'container_inclusive' => false,
	'render_callback'     => 'banner_render'
) );

ここでセレクティブリフレッシュのためのパーシャルの設定をしています

add_partial( )の第一引数である$idは他の登録項目でも設定した

add_section,add_setting ,add_controlなどでも同じIDを設定しておきます

そしてパラメータの‘selector’ ですがこちらに設定したセレクターは実際に表示されるHTML上でも同じID（セレクター指定）をしておきます

そして‘render_callback’パラメータですがここにコールバック関数を指定します

HTMLとしてレンダリングされるように関数を登録する

関数を自作していきます

function banner_render($id) {
  $image = null;
  $image = get_theme_mod( $id );
  if ( $image ): ?>
    <img src="<?php echo esc_url( $image ); ?>" alt="">
  <?php
  endif;
}

get_theme_mod(‘キーとなるID’ , ‘デフォルト値’)

こんな感じでget_theme_mod で指定したIDのHTMLを返す関数を作成しました

この関数名をコールバック関数へと指定しておきます

そしてHTMLの出力側も記述しておきます

HTMLに値を出力する

バナー画像を表示したい箇所に以下のコードをコピペOKです

<?php //バナー画像コンテンツ
  foreach ( range( 1, 3 ) as $index ):
    $id = 'banner_' . $index; ?>
    <div  id="<?php echo esc_attr( $id ); ?>">
      <?php banner_render( $id ); ?>
    </div>
  <?php endforeach; ?>

これで管理画面で設定した画像がココに出力されるようになりました

そして同じIDを持つようにして紐付けを行ったので、カスタマイザーの管理画面から見た場合編集するための鉛筆マークが出現していることでしょう

ここからはJSを書いていきましょう

JSファイルをエンキューする

「エンキュー」とは読み込むということです
以下のコードでJSファイルを読み込めます

// 即時反映用の JavaScript をエンキューします。
function live_preview() {
    wp_enqueue_script(
        'mytheme-themecustomizer',
        get_template_directory_uri() . '/js/theme-customizer.js',
        array( 'jquery', 'customize-preview' ),
        false, // バージョン指定
        true // スクリプトをフッターで読み込むか
    );
  }
add_action( 'customize_preview_init' , 'live_preview' );

wp_enqueue_scriptをアクションフックで登録します

フックするアクションフック名はcustomize_preview_initとします
こちらのアクションフックはプレビュー画面でのみスクリプトが読み込まれるようになります

そしてファイルの場所を指定する第二引数ですが、こちらで指定した名前と同じファイルを作成します

get_template_directory_uri() . ‘/js/theme-customizer.js‘,←この部分ですね

jQueryでHTMLを書き換える

theme-customizer.jsを作成したら下記のコードをコピペします

// リアルタイムにバナー画像を変更
  for( $i = 1; $i >= 3; ) {
    wp.customize(`banner_${i}`, function (value) {
      value.bind(function (newval) {
        $(`#banner_${i}`).children('img').attr( 'src' , newval );
      });
    });
    $i++;
  }

PHPからリクエストされたWEBAPIはwp.customizeとしてアクセスすることが出来ます

まぁ上記のコードがほぼ定型文のようなのでこのまま覚えてしまっていいかと思います

wp.customize(指定するHTMLセレクター, function (value) {
      value.bind(function (newval) {
        //なにかする処理内容・・ newvalに設定した値が入ってくる;
      });
    });

JSから色々とPHP側のオブジェクトを取得する方法があるようですが、
今の所上記の定型文だけでほぼ事足りるようなので、後は変更する内容によってjQueryの内容がCSS指定するのか、属性指定するのか、テキストを書き換えるのか、
お好みでどうぞ、という感じですね

まとめです

これで全てのプロセスをこなしバナー画像を管理画面から表示するロジックが出来上がりました

後はお好みでCSSを指定してスタイルを整えたり、
更にJSを書いていってスライドショーができるようにしてみたり、

高度の応用としては$wp_customizeにさらに項目を追加してスライダーの設定（時間、スライドタイプ、枚数）などの設定項目を増やしスライダーの細かい調整を可能にしたりします
勿論その際もセレクティブリフレッシュを使用しリアルタイムでの表示の切り替えを可能にすることで非常にユーザーにとって使いやすいCMSになることでしょう