テーマカスタマイザーのライブプレビュー機能について

全体を把握しているわけではないので、確かなことは言えませんし、間違いがあるかもしれませんし、謎が解けるわけでもないのですが…

「ライブプレビュー」というのは、プレビュー画面をリロードせずにプレビューできるという説明の通りのものだと思います。タイトルの色の変更とかは、JavaScript だけでやっているので、最低限のファイルしかないテーマでも即座に反映されますが、title や description を一文字削除したり、追加したりすると、けっこうな量のサーバ・リクエストが発生します。サーバとの通信をモニタしているとわかります。このとき、admin-ajax.php が呼ばれて、プレビュー画面は読み込み直しになっています。スクリプトなどは 304 が返るので、キャッシュが使われるでしょうから、体感的にはたいしたことはないと思いますが、1 ページ分の読み込みと同じです。

これは、WordPress に付属のテーマでは発生しません。postMessage を使っていることからからですね。

ご承知のように、プレビュー画面は iframe を使っていて、Ajax を使うと、管理画面のリロードなしで、プレビュー画面だけをリロードできますが、変更を反映するのに、プレビュー画面のリロード自体はなくすことができません。上に述べたとおり、サーバとのやりとりが発生して、それだけ遅延もあります。また、プレビューの body に書き込まれる JavaScript が持っていたデータがリセットされます。

これをせずに、管理画面の JavaScript と、iframe の中の JavaScript が継続して通信できるようにするためには、別の通信手段が必要なので、postMessage を使いましょう、ってことでしょう。利点は、プレビュー画面の JavaScript が message イベントを listen していれば、管理画面から送った JSON データが即座にプレビュー画面の JavaScript に伝わって、画面の書き換えがリロードなしでできるということです。message に応答させることもできます。

理屈の上では、JavaScript が扱える DOM 要素の変更は、全て同様の手順で実行できるはずですから (実装は別として)、サーバとの通信なしに見た目の変更のほとんどがリアルタイムでできる可能性があります。単純に Codex の例だけだと「だから何?」ってなりますけど、実装次第なのでしょう。個人的には、データベースとの連携がない (デザインがデータと連動しない)、というところが残念なのですが、だれかすごいプラグイン開発者や、nobita さんのようなすごいテーマ開発者が、あっと驚くような実装を見せてくれるのを楽しみにしています。