WPワークス

ダウンロードコンテンツやワードプレスのカスタマイズ方法を配信中。

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

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

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

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

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

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

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

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

紹介する手順は、

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

となっています。

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

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

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

JSファイルの出力

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

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

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

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

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

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

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

こんな感じです。

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

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

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

1件のピン

コメントを残す

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

メニュ
ホーム
トップへ