web-dev-qa-db-ja.com

新しいWP_Customize API - それは内部でのように機能しますか？

新しい「カスタマイズ」機能を使用して変更を加えた場合、iframeプレビュードキュメント内の別のページに移動したときに、変更が保存されていなくても変更は適用されます。

WPは一時的な変更をどこかに保存しているように見え、サイトが「カスタマイズ」モードで表示されている場合はサイトに適用されます。

しかし、サイトはそれがカスタマイズモードであることをどのようにして知るのでしょうか。リンクにクエリ引数が追加されている、またはそのようなものがないためです。

customizationapitheme-customizer
15
Alex

ここには適用できるいくつかのビットがありますが、それの短い部分はcustomize-preview.js内のこのコードです。

this.body.on( 'click.preview', 'a', function( event ) {
    event.preventDefault();
    self.send( 'scroll', 0 );
    self.send( 'url', $(this).prop('href') );
});

Event.preventDefaultは、リンクが実際に機能しないようにします。次のコードは、メッセージを上向きに送り返して、a）ページの一番上にスクロールバックし、b）URLを変更します。

ここでメッセージを送る理由は、iframeが1つだけではなく、2つあるためです。クリックしたページは、実際にはカスタマイザの設定が追加された別のiframe内にロードされ（実際にはPOSTを介して）、古いものをフェードアウトし、新しいものをシームレスにフェードインするために使用されます。これにより、新しいページに切り替わったときに画面が白くなり、見にくくなって点滅するのを防ぎます。

また、テーマコードに対してフィルタリングなどを実行したり、ページの外観を変更したりする必要がなくなります。そのため、テーマの内容に大きな変更はなく、テーマはそのまま表示されます。

フォームの送信がまったく機能しないようにするために、同様のコードが存在します（それは何もしません）など。

カスタマイザ値を傍受および処理するためのフィルタはclass-wp-customize-setting.phpにあります。 preview()関数は入力値を処理するのに必要なフィルタを追加します、_preview_filter()関数はそのフィルタです。それは単にget_option()またはget_theme_mod()の呼び出しを受け取り、それらが変更されたオプションであると思われるときに通知し、代わりに変更された値を返します。

9
Otto

カスタマイザプレビューウィンドウでリンクをクリックすると、生成されるリクエストは通常​​のPOSTではなくGETリクエストであることがわかります。カスタマイザは、次のフォームデータを使用して、リンククリックをオーバーライドし、代わりにPOSTを実行しているようです。

wp_customize: on
theme: themename
customized: {json-encoded-options-here}
customize_messenger_channel: preview-1

customize フィールドには、変更したオプションが含まれているので、データがテーマに渡されます。カスタマイザコードは、要求されたときにテーマのオプションを（フィルタを通して、私はどれを正確に知りません）傍受し、 customize パラメータの値で置き換えます。

1
Andy Adams