WordPress 4.1還增加了JavaScript的重載和/或高數量控件的支持。 這允許更多的動態行為，特別是與動態添加的控件相關。 核心的Color和Media控件目前正在利用此API，而所有核心控件最終將在未來使用它。 基于PHP的控制API不會消失，但是在將來，大多數控件可能會使用新的API，因為它為用戶和開發人員提供了更快的體驗。 JS模板化部分和面板的類似API被引入WordPress 4.3; 然而，在Word中，JS中動態創建對象的容易性仍然存在一些差距，見＃30741。 ## 注冊控制類型 為了引入一個具有相同類型的多個Customizer控件的模板的概念，我們需要引入一種使用Customize Manager注冊控件類型的方法。 以前，僅當使用WP_Customize_Manager :: add_control（）添加了自定義控件時才會遇到自定義控件對象。 但檢測添加的控件類型以每種類型呈現一個模板將不允許動態創建新的控件，如果沒有加載該類型的其他實例。 WP_Customize_Manager :: register_control_type（）解決這個問題： ``` add_action( 'customize_register', 'prefix_customize_register' ); function prefix_customize_register( $wp_customize ) { // Define a custom control class, WP_Customize_Custom_Control. // Register the class so that its JS template is available in the Customizer. $wp_customize->register_control_type( 'WP_Customize_Custom_Control' ); } ``` 所有注冊的控件類型都將模板打印到定制器中 ``` WP_Customize_Manager::print_control_templates(). ``` ## 發送PHP控制數據到JavaScript 雖然Customizer控件的數據一直被傳遞給控件JS模型，并且一直能夠被擴展，但在使用JS模板時，更有可能需要發送數據。 您需要在PHP中的render_content（）中訪問的任何內容都需要導出到JavaScript才能在控件模板中訪問。 WP_Customize_Control默認導出以下控件類變量： - type - label - description - active (boolean state) 您可以通過覆蓋自定義控件子類中的WP_Customize_Control :: to_json（）來添加特定于您的自定義控件的其他參數。 在大多數情況下，您還需要調用父類'to_json（）方法，以確保所有核心變量也被導出。 以下是核心顏色控制的一個例子： ``` public function to_json() { parent::to_json(); $this->json['statuses'] = $this->statuses; $this->json['defaultValue'] = $this->setting->default; } ``` ## JS /下劃線模板 將自定義控件類注冊為控件類型并導出任何自定義類變量后，可以創建將呈現控件UI的模板。 您將覆蓋WP_Customize_Control :: content_template（）（默認為空）作為WP_Customize_Control :: render_content（）的替代。 渲染內容仍然被調用，所以請確保在子類中使用空的函數覆蓋它。 下劃線風格的自定義控件模板與PHP非常相似。 隨著越來越多的WordPress核心成為JavaScript驅動，這些模板越來越普遍。 核心中的一些示例模板代碼可以在媒體，修訂版本，主題瀏覽器以及Twenty Fifteen主題中找到，其中使用JS模板來同時保存配色方案數據，并立即預覽定制程序中的配色方案更改。 了解這些模板如何工作的最好方法是研究核心中的類似代碼，因此，這里是一個簡單的例子： ``` class WP_Customize_Color_Control extends WP_Customize_Control { public $type = 'color'; // ... /** * Render a JS template for the content of the color picker control. */ public function content_template() { ?> <# var defaultValue = ''; if ( data.defaultValue ) { if ( '#' !== data.defaultValue.substring( 0, 1 ) ) { defaultValue = '#' + data.defaultValue; } else { defaultValue = data.defaultValue; } defaultValue = ' data-default-color=' + defaultValue; // Quotes added automatically. } #> <label> <# if ( data.label ) { #> <span class="customize-control-title">{{{ data.label }}}</span> <# } #> <# if ( data.description ) { #> <span class="description customize-control-description">{{{ data.description }}}</span> <# } #> <div class="customize-control-content"> <input class="color-picker-hex" type="text" maxlength="7" placeholder="<?php esc_attr_e( 'Hex Value' ); ?>" {{ defaultValue }} /> </div> </label> <?php } } ``` 在上述核心自定義顏色控件的模板中，您可以看到在關閉PHP標簽后，我們有一個JS模板。 用于評估語句的符號 - 在大多數情況下，這用于條件。 我們導出到JS的所有控件實例數據存儲在`data`對象中，我們可以使用double（轉義）或三（未轉義）括號表示法{{}}打印一個變量。 正如我之前所說，獲得這種寫作控制的最佳方式是閱讀現有的例子。 WP_Customize_Upload_Control最近更新了，以利用此API，并且與媒體管理器的實現方式完美結合，并從最少量的代碼中擠出大量功能。 如果您想要一些非常好的做法，請嘗試轉換一些其他核心控件來使用此API，當然也可以將修補程序提交給核心。 ## 放在一起 以下是在自定義定制程序控件子類中使用新API所需的內容的摘要： 使你的render_content（）函數為空（但它需要存在才能覆蓋默認值）。 創建一個新的函數content_template（），并將render_content（）的舊內容放在那里。 通過修改to_json（）函數（參見WP_Customize_Color_Control作為示例）），將控件導出到瀏覽器中的JavaScript（JSON數據）所需的任何自定義類變量。 將PHP從render_content（）轉換為JS模板，使用JS語句來評估和{{}}關于要打印的變量。 PHP類變量在數據對象中可用;例如，可以使用{{data.label}}打印標簽。 注冊自定義控件類/類型。此關鍵步驟告訴Customizer打印此控件的模板。這與所添加的所有控件的打印模板不同，因為這些想法是可以從一個模板呈現該控件類型的許多實例，并且任何已注冊的控件類型將在將來可用于動態控制創建。只要做一些像$ wp_customize-> register_control_type（'WP_Customize_Color_Control'）;. 自定義API中僅PHP的部分仍然完全支持，使用非常好。但是，為了使定制工具更加靈活，在定制程序中切換主題而沒有頁面加載的長期目標，強烈建議您在可行的情況下為所有自定義定制器對象使用JS / Underscore模板。