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

利用 WordPress 自訂器中的 JavaScript API 實際上可以讓我們在自訂主題時提供更引人注目的即時體驗，而不僅僅是將變更從控制項投射到預覽視窗。

您可能熟悉如何使用自訂器 JavaScript API 將變更即時投射到預覽視窗。為此，我們將設定 transport 模式設為 postMessage 並新增對應的 JavaScript 程式碼，如下所示。

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

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

快速入門

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

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

• WordPress 主題自訂器指南
• WordPress 主題自訂器
• 編寫可供自訂器使用的 WordPress 主題

設定和控制項

首先，我們將檢查定制器中為本教程新增的「設定」和「控制」。我們還將研究將它們放在適當位置的程式碼。

在本教學中，我們將專注於網站「網站標題」。如您在上面看到的，我們有兩個控制項：本機 WordPress「網站標題」輸入欄位和用於啟用或停用「網站標題」的自訂複選框。這兩個控制項位於「網站標識」部分。圖像的右側是預覽，您可以在其中看到正在渲染的「網站標題」。

此外，正如您在下面看到的，我們還有兩個位於「顏色」部分的控件，用於更改「網站標題」顏色及其 hover 狀態(tài)顏色。

底層程式碼

我們的主題是基於下劃線，其中所有與自訂器相關的程式碼都放置在 /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 內建設定 blogdescription 降低到 12，以便複選框設定 display_blogname 出現在「網站標題」輸入欄位下方。
• 我們建立一個名為 display_blogname 的新控制項。我們將 priority 設定為 11，在我們的範例中，它位於「網站標題」和「標語」輸入欄位之間。
• 將 header_text 預設顏色設為 #f44336，將 transport 類型設為 postMessage。
• 我們也建立了一個新設置，header_text_color。同樣，我們也將優(yōu)先權設定為 11，使其出現在 header_textcolor 設定下方。

所有這些設定均透過 postMessage 設置，而不是透過 refresh 設定。 postMessage 選項允許非同步傳輸值並即時顯示在預覽視窗中。但是，我們也必須編寫自己的 JavaScript 來處理變更。

載入 JavaScript

我們需要建立兩個JavaScript 檔案：一個檔案customizer-preview.js 用於處理預覽，另一個檔案customizer-control.js 用於處理自訂器面板內的控件。 < /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 函數。我們將在本系列的下一個教學中更具體地討論如何在預覽視窗中預覽變更。

在另一個檔案 customizer-control.js 中，我們加入以下程式碼：

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

如您在上面所看到的，我們將在自訂程式 ready 事件中將此程式碼包裝在此檔案中。這將確保在我們開始執(zhí)行任何自訂功能之前，自訂程式中的所有內容都已完全準備好，包括設定、面板和控制項。

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

下一步是什么？

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

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

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

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

敬請期待！

以上是WordPress 自訂器中的 JavaScript API 入門的詳細內容。更多資訊請關注PHP中文網其他相關文章！