WordPress 定制器自誕生以來一直在積極開發(fā)。 API 不斷發(fā)展，包括 JavaScript API。然而，它是 WordPress Codex 中記錄最少的 API 之一。因此，只有少數(shù)詳細記錄展示了如何實際利用 JavaScript API。

利用 WordPress 定制器中的 JavaScript API 實際上可以使我們在定制主題時提供更引人注目的實時體驗，而不僅僅是將更改從控件投射到預(yù)覽窗口。

您可能熟悉如何使用定制器 JavaScript API 將更改實時投射到預(yù)覽窗口。為此，我們將設(shè)置 transport 模式設(shè)置為 postMessage 并添加相應(yīng)的 JavaScript 代碼，如下所示。

wp.customize( 'blogname', function( value ) {
	value.bind( function( to ) {
		$( '.site-title a' ).text( to );
	} );
} );

但是，我們還可以進一步擴展 API，例如隱藏、顯示或移動部分、面板、控件，根據(jù)另一個設(shè)置值更改設(shè)置的值，以及互連預(yù)覽和控件互動。這些就是我們將在本教程中研究的內(nèi)容。

快速入門

我們通過幾篇文章和幾個系列對 WordPress 定制器進行了相當(dāng)廣泛的介紹，涵蓋了定制器 API 的細節(jié)。

我想您已經(jīng)掌握了 WordPress 定制器的核心概念以及面板、部分、設(shè)置和控制等組件。否則，我強烈建議您在進一步了解之前花一些時間學(xué)習(xí)我們有關(guān)該主題的教程和視頻課程。

• WordPress 主題定制器指南
• WordPress 主題定制器
• 編寫可供定制器使用的 WordPress 主題

設(shè)置和控件

首先，我們將檢查定制器中為本教程添加的“設(shè)置”和“控件”。我們還將研究將它們放在適當(dāng)位置的代碼。

在本教程中，我們將重點關(guān)注網(wǎng)站“網(wǎng)站標(biāo)題”。正如您在上面看到的，我們有兩個控件：本機 WordPress“站點標(biāo)題”輸入字段和用于啟用或禁用“站點標(biāo)題”的自定義復(fù)選框。這兩個控件位于“站點標(biāo)識”部分。圖像的右側(cè)是預(yù)覽，您可以在其中看到正在渲染的“網(wǎng)站標(biāo)題”。

此外，正如您在下面看到的，我們還有兩個位于“顏色”部分的控件，用于更改“網(wǎng)站標(biāo)題”顏色及其 hover 狀態(tài)顏色。

底層代碼

我們的主題基于下劃線，其中所有與定制器相關(guān)的代碼都放置在 /inc/customizer.php 文件中。

function tuts_customize_register( $wp_customize ) {

	$wp_customize->get_setting( 'blogname' )->transport = 'postMessage';

	$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
	$wp_customize->get_control( 'blogdescription' )->priority = '12';

	$wp_customize->get_setting( 'header_textcolor' )->default = '#f44336';
	$wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';

	// Checkbox to Display Blogname
	$wp_customize->add_setting( 'display_blogname', array(
		'transport' => 'postMessage',
	) );

	$wp_customize->add_control( 'display_blogname', array(
		'label'     => __( 'Display Site Title', 'tuts' ),
		'section'   => 'title_tagline',
		'type'      => 'checkbox',
		'priority'  => 11,
	) );

	// Add main text color setting and control.
	$wp_customize->add_setting( 'header_textcolor_hover', array(
		'default'           => '#C62828',
		'sanitize_callback' => 'sanitize_hex_color',
		'transport'         => 'postMessage',
	) );

	$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_textcolor_hover', array(
		'label'    => __( 'Header Text Color: Hover', 'tuts' ),
		'section'  => 'colors',
		'priority' => '11'
	) ) );
}
add_action( 'customize_register', 'tuts_customize_register' );

正如您在上面看到的，我們對代碼進行了一些修改，以滿足本教程中的需求。

• 我們將 WordPress 內(nèi)置設(shè)置 blogdescription 降低為 12，以便復(fù)選框設(shè)置 display_blogname 出現(xiàn)在“網(wǎng)站標(biāo)題”輸入字段下方。
• 我們創(chuàng)建一個名為 display_blogname 的新控件。我們將 priority 設(shè)置為 11，在我們的示例中，它位于“網(wǎng)站標(biāo)題”和“標(biāo)語”輸入字段之間。
• 將 header_text 默認顏色設(shè)置為 #f44336，將 transport 類型設(shè)置為 postMessage。
• 我們還創(chuàng)建了一個新設(shè)置，header_text_color。同樣，我們還將優(yōu)先級設(shè)置為 11，使其出現(xiàn)在 header_textcolor 設(shè)置下方。

所有這些設(shè)置均通過 postMessage 設(shè)置，而不是通過 refresh 設(shè)置。 postMessage 選項允許異步傳輸值并實時顯示在預(yù)覽窗口中。但是，我們還必須編寫自己的 JavaScript 來處理更改。

加載 JavaScript

我們需要創(chuàng)建兩個 JavaScript 文件：一個文件 customizer-preview.js 用于處理預(yù)覽，另一個文件 customizer-control.js 用于處理定制器面板內(nèi)的控件。< /p>

js
├── customizer-preview.js // 1. File to handle the Preview
├── customizer-control.js // 2. File to handle the Controls
├── navigation.js
└── skip-link-focus-fix.js

在 customizer-preview.js 中包含以下代碼。

( function( $ ) {
	// Codes here.
} )( jQuery );

它目前是一個空的封閉 JavaScript 函數(shù)。我們將在本系列的下一個教程中更具體地討論如何在預(yù)覽窗口中預(yù)覽更改。

在另一個文件 customizer-control.js 中，我們添加以下代碼：

(function( $ ) {
	wp.customize.bind( 'ready', function() {
		var customize = this;
		// Codes here
	} );
})( jQuery );

正如您在上面所看到的，我們將在自定義程序 ready 事件中將此代碼包裝在此文件中。這將確保在我們開始執(zhí)行任何自定義功能之前，自定義程序中的所有內(nèi)容都已完全準(zhǔn)備好，包括設(shè)置、面板和控件。

最后，添加代碼后，我們將在兩個不同的位置加載這兩個 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 文件將通過 customize_preview_init 操作掛鉤加載到定制器預(yù)覽窗口中。 customizer-control.js 文件將加載到定制程序后端，其中的設(shè)置和控制元素可通過 customize_controls_enqueue_scripts 操作掛鉤訪問。

下一步是什么？

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

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

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

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

敬請期待！

以上是WordPress 定制器中的 JavaScript API 入門的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！