WordPress 自訂器中的 JavaScript API 入門

WordPress 定制器自誕生以來一直在積極開發。 API 不斷發展，包括 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 的細節。

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

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

設定和控制項

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

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

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

底層程式碼

我們的主題是基於下劃線，其中所有與自訂器相關的程式碼都放置在 /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。同樣，我們也將優先權設定為 11，使其出現在 header_textcolor 設定下方。

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

載入 JavaScript

我們需要建立兩個JavaScript 檔案：一個檔案customizer-preview.js 用於處理預覽，另一個檔案customizer-control.js 用於處理自訂器面板內的控件。

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 事件中將此程式碼包裝在此檔案中。這將確保在我們開始執行任何自訂功能之前，自訂程式中的所有內容都已完全準備好，包括設定、面板和控制項。

最後，在新增程式碼後，我們將在兩個不同的位置載入這兩個 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 方面进行了大量投资。因此，支持该生态系统的大多数开发人员对 PHP API 比 JavaScript API 更加熟练和熟悉也就不足为奇了。

直到最近，它才通过定制器和 WP-API 广泛集成了 JavaScript。掌握 WordPress 定制器中的 JavaScript API 可能是一个相当大的挑战。如前所述，WordPress 的这一面目前记录最少。因此，我们将彻底讨论这个主题。

同时，如果您正在寻找其他实用程序来帮助您构建不断增长的 WordPress 工具集，或者学习代码并更加精通 WordPress，请不要忘记查看我们提供的内容可在 Envato 市场购买。

在此，我们已准备好使用 WordPress JavaScript API 的所有基本元素。我们就到此结束。在本系列的下一部分中，我们将揭示 WordPress 中 JavaScript API 背后的更多内容，并开始编写可立即在主题中实现的功能脚本。

敬请期待！

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