起步：了解WordPress自訂器JavaScript API-js教程-PHP中文網

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自定义器JavaScript API

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

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

起步：了解WordPress自定义器JavaScript API

底層程式碼

我們的主題是基於下劃線，其中所有與自訂器相關的程式碼都放置在/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用於處理自訂器面板內的控件。 < /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事件中將此程式碼包裝在此檔案中。這將確保在我們開始執行任何自訂功能之前，自訂程式中的所有內容都已完全準備好，包括設定、面板和控制項。

最後，在新增程式碼後，我們將在兩個不同的位置載入這兩個 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操作挂钩访问。