web-dev-qa-db-ja.com

テーマカスタマイザがライブプレビューのJSをロードしない

私は現在テーマカスタマイザにオプ​​ションを追加することに取り組んでいます。過去2時間、私はライブプレビューを機能させようとしていました、そして私のテーマがライブプレビューに必要なtheme-customizer.jsファイルをロードしていない理由を理解しようとしています。

テーマカスタマイザに追加したすべてのオプションは、保存してからページを更新すると機能します。だから私はそれが設定に問題ではないことを知っています。

私は現在、カスタマイザのすべての設定と共に、customize.phpファイル内のJSファイルを呼び出すためのフックを持っています。私は私のテーマのために他のJSファイルをエンキューする別のtheme-enqueue.phpもあります。

これは、私のcustomize.phpファイル内からJSファイルを呼び出そうとしているフックの例です。

function mytheme_customize_preview_js() {
wp_enqueue_script( 'mytheme-customizer', get_template_directory_uri() . '/js/theme-customizer.js', array( 'customize-preview' ), '20120187', true );
}
add_action( 'customize_preview_init', 'mytheme_customize_preview_js' );

読み込まれたjavascriptファイルをchrome内でチェックすると、これ以外に必要なものはすべて読み込まれているようです。誰かが状況に光を当てることはできますか？

theme-developmentfunctionsjavascripthookstheme-customizer
1
user1632018

私はあなたのスクリプトが正しくロードされ、同じ機能が12で使用されていると思います（しかしあなたのスクリプトはiframeの中にあります）しかし私は間違っています。

enter image description here

更新せずに変更を確認するには、customize_register関数のadd_settingおよびget_settingで 'transport'引数を使用します。

$wp_customize->add_setting( 'my_setting', array( 'default' => 'setting_value', 'transport' => 'postMessage', ) );

これは 'refresh'（デフォルト）または 'postMessage'のいずれかです。 Theme Customizerのライブプレビューを制御するためのカスタムJavascriptを作成している場合にのみ、これを 'postMessage'に設定してください。

$wp_customize->get_setting( 'my_setting' )->transport = 'postMessage';
1
Tribalpixel

おそらく、それをinitまたはadmin_init Wordpressフックの内側から呼び出しているのに対して、after_setup_themeフックの内側から呼び出す必要があります。

例えば：

function mytheme_customize_preview_js() {
    wp_enqueue_script( 'mytheme-customizer', get_template_directory_uri() . '/js/theme-customizer.js', array( 'customize-preview' ), '20120187', true );
}
function my_after_setup_theme(){
    add_action( 'customize_preview_init', 'mytheme_customize_preview_js' );
}

add_action( 'after_setup_theme', 'my_after_setup_theme' );
0
Mauro Colella

これは問題に対する正確な答えではないかもしれません。しかし、それは私たちが議論しているまさにその問題を解決するのに役立ちました。

'transport' => 'postMessage'を使っているので、私は活発にプレビューを見ることができませんでした。だから私はGithubで 次のコードを使って新しいファイルを作成した

このコードをコピーしてコピーしただけです。それを確認し、それから私の要求に従ってそれを微調整しました。私はこれが解決策ではないことを知っていますが、それは私にとって最良の利用可能なものでした。

コードを提供してくれたTom McFarlinに感謝します。

0
JDP