????? ??????? ???? ????? ???????. JavaScript API? ???? API? ????? ???? ????. ??? ?? WordPress Codex?? ?? ?? ???? API ? ?????. ????? JavaScript API? ??? ???? ??? ???? ?? ??? ? ??? ????.

WordPress Customizer?? JavaScript API? ???? ??? ????? ???? ??? ?? ??? ???? ?? ??? ??? ??? ? ?? ??? ??? ??? ??? ? ????.

Customizer JavaScript API? ???? ????? ???? ?? ?? ??? ???? ??? ??? ? ????. ?? ?? ??? ?? transport 模式設(shè)置為 postMessage? ???? ?? JavaScript ??? ???????.

??? ??, ??, ??? ???, ?? ?? ??, ?? ?? ?? ?? ?? ? ??, ?? ?? ? ??? ?? ?? ?? ?? ? API? ?? ??? ?? ????. ??? ??? ? ?????? ??? ?????.

?? ??

??? WordPress Customizer API? ?? ?? ??? ???? ?? ??? ???? ?? WordPress Customizer? ??? ????? ??????.

WordPress ??? ?? ????? ??, ??, ??, ???? ?? ?? ??? ?? ??? ???? ? ????. ??? ?? ???? ? ???? ?? ?? ??? ?? ????? ??? ??? ???? ? ??? ???? ?? ????.

• WordPress ?? ??? ?? ???
• WordPress ?? ??? ?? ????
• ??? ???? ??? ? ?? WordPress ?? ??

?? ? ??

?? ? ????? Customizer? ??? ?? ? ???? ??? ?????. ?? ?? ???? ???? ??? ???????.

? ??????? ? ??? "? ??? ??"? ??? ? ????. ??? ? ? ??? ?? WordPress “??? ??” ?? ??? “??? ??”? ??? ?? ?????? ??? ?? ?????? ? ?? ???? ????. ? ? ???? ??? ?? ??? ????. ??? ????? ????? "??? ??"? ? ? ?? ????? ????.

?? ???? ? ? ??? ?? ???? ??? ?? ??? hover ?? ??? ??? ? ?? ? ?? ???? ????.

?? ??

?? ??? ?? ??? ?? ?? ??? /inc/customizer.php ??? ???? ??? ???? ???.

??? ? ? ??? ? ????? ?? ??? ???? ?? ??? ?? ??????.

• “??? ??” ?? ?? ??? WordPress ?? ?? blogdescription 降低為 12，以便復(fù)選框設(shè)置 display_blogname? ???????.
• ?? ???? "??? ??"? "????" ?? ?? ??? display_blogname 的新控件。我們將 priority 設(shè)置為 11?? ??? ????.
• ? ??? header_text 默認(rèn)顏色設(shè)置為 #f44336，將 transport 類型設(shè)置為 postMessage.
• ?? ??? ??? ?? header_text_color。同樣，我們還將優(yōu)先級(jí)設(shè)置為 11，使其出現(xiàn)在 header_textcolor? ??????.

??? ?? ??? postMessage 設(shè)置，而不是通過(guò) refresh 設(shè)置。 postMessage ??? ?? ????? ?? ?????? ???? ????? ???? ?? ??? ? ????. ??? ?? ??? ????? ?? JavaScript? ???? ???.

?????? ??

??? ?? ?? ?? ???? ????? ? ?? JavaScript ??? ???? ???. ??? ?? customizer-preview.js 用于處理預(yù)覽，另一個(gè)文件 customizer-control.js. ???

?? ??? customizer-preview.js ?? ????.

??? ?? ?? JavaScript ?????. ? ???? ?? ??????? ???? ??? ?? ??? ?? ?? ??? ?? ? ????? ???????.

?? ??? customizer-control.js ?? ??? ?????:

??? ? ? ??? ???? ready ????? ? ??? ? ??? ?????. ??? ?? ??? ?? ?? ??? ???? ?? ??, ?? ? ???? ??? ??? ?? ????? ?? ?? ??? ?????? ??? ? ????.

????? ??? ??? ? ? ?? JavaScript ??? ?? ?? ? ??? ?????.

// 1. customizer-preview.js
function tuts_customize_preview_js() {
	wp_enqueue_script( 'tuts_customizer_preview', get_template_directory_uri() . '/js/customizer-preview.js', array( 'customize-preview' ), null, true );
}
add_action( 'customize_preview_init', 'tuts_customize_preview_js' );

// 2. customizer-control.js
function tuts_customize_control_js() {
	wp_enqueue_script( 'tuts_customizer_control', get_template_directory_uri() . '/js/customizer-control.js', array( 'customize-controls', 'jquery' ), null, true );
}
add_action( 'customize_controls_enqueue_scripts', 'tuts_customize_control_js' );

customizer-preview.js 文件將通過(guò) customize_preview_init 操作掛鉤加載到定制器預(yù)覽窗口中。 customizer-control.js 文件將加載到定制程序后端，其中的設(shè)置和控制元素可通過(guò) customize_controls_enqueue_scripts 操作掛鉤訪問。

下一步是什么？

WordPress 自成立以來(lái)一直在 PHP 方面進(jìn)行了大量投資。因此，支持該生態(tài)系統(tǒng)的大多數(shù)開發(fā)人員對(duì) PHP API 比 JavaScript API 更加熟練和熟悉也就不足為奇了。

直到最近，它才通過(guò)定制器和 WP-API 廣泛集成了 JavaScript。掌握 WordPress 定制器中的 JavaScript API 可能是一個(gè)相當(dāng)大的挑戰(zhàn)。如前所述，WordPress 的這一面目前記錄最少。因此，我們將徹底討論這個(gè)主題。

同時(shí)，如果您正在尋找其他實(shí)用程序來(lái)幫助您構(gòu)建不斷增長(zhǎng)的 WordPress 工具集，或者學(xué)習(xí)代碼并更加精通 WordPress，請(qǐng)不要忘記查看我們提供的內(nèi)容可在 Envato 市場(chǎng)購(gòu)買。

在此，我們已準(zhǔn)備好使用 WordPress JavaScript API 的所有基本元素。我們就到此結(jié)束。在本系列的下一部分中，我們將揭示 WordPress 中 JavaScript API 背后的更多內(nèi)容，并開始編寫可立即在主題中實(shí)現(xiàn)的功能腳本。

敬請(qǐng)期待！

? ??? WordPress Customizer?? JavaScript API ????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!