web-dev-qa-db-ja.com

カスタマイザ：customize_preview_init VS customize_controls_enqueue_scriptsを使用する場合

ライブプレビューをロードするためにどのアクションをフックするかに関して、codexと14のテーマコードの間にいくつかの衝突があるようです（例：customizer.js）。

14のテーマでは、ライブプレビューハンドラcustomizer.jsがcustomize_preview_initを使用してロードされます。

function twentyfourteen_customize_preview_js() {
    wp_enqueue_script( 'twentyfourteen_customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview' ), '20131205', true );
}
add_action( 'customize_preview_init', 'twentyfourteen_customize_preview_js' );

しかし、コーデックスでは、 この答え では、customize_controls_enqueue_scriptsを使用することをお勧めします。

3 - jsファイルをエンキューする「customize_controls_enqueue_scripts」にフックされたアクションを作成します。

このメソッドを使用してエンキューすると、下のスクリーンショットからわかるように、プレビューのiframe（chrome devプレビューの "About"ドキュメント）ではなく、.jsが親DOM（カスタマイザコントロールウィンドウ自体）に添付されます。

enter image description here

javascripttheme-customizer
2
N2Mystic

名前自体が述べているように、そのうちの1つはcustomize-controlsに、もう1つはcustomize-previewにフックします。それらは同じではなく、あなたは実際には異なる目的のために両方を使うことができます。

  • カスタマイザ内のコントロールに影響を与えるためにJSコードを使用したい場合は、customize_controls_enqueue_scriptsを使用します。

  • プレビューフレーム内にあり、おそらくpostMessageを介してコントロールからイベントを受け取るためにJSコードにフックしていて、プレビューフレームの内容を動的にすばやく変更できる場合は、customize_preview_initを使用します。

十二十四は実際にそれらの両方を使用しています。最初のスクリプトは、カスタマイザのカスタムコントロールにおすすめのコンテンツを提案するスクリプトを追加するために使用されます。 2番目のものは、プレビューフレーム内のすべてのpostMessageコードに使用されます。

具体的には、customize_preview_initフックは、カスタマイザのis_preview（）がtrueを返し、is_admin（）がfalseを返すときにwp_loadedアクションから起動されます。プレビューフレームのみを調整するスクリプトをエンキューするため。

2
Otto