使用Kirki框架更快地構(gòu)建WordPress Customizer定制器設(shè)置

開始之前，可能有些朋友對我所說的WordPress定制器Customizer有些陌生，其實就是我們后臺 外觀-自定義 進入的界面，如下圖所示，左邊的部分就是：

按照WordPress的開發(fā)規(guī)范，是建議開發(fā)者可以盡可能使用這個 Customizer 來添加設(shè)置選項。如果你曾經(jīng)開發(fā)過 Customizer 設(shè)置選項，你會發(fā)現(xiàn)，添加一個選項所需要的代碼和步驟是有些多的，倡萌也很不喜歡這樣的添加方式。而今天介紹的主角 Kirki 就是用來更快地添加設(shè)置選項的框架。

Kirki?簡介

Kirki是一個免費的開源（由MIT許可）框架，專門為主題或插件開發(fā)者開發(fā)，用于添加定制器（Customizer）設(shè)置選項到主題或插件中。

官方網(wǎng)站： https://kirki.org/

自2014年以來，Kirki的主要開發(fā)人員Aristeides Stathopoulos一直在研究該框架。通過不斷的更新和改進，Kirki在Github上建立了一個社區(qū)，其中包括1000多顆星星和300個復(fù)制。

在Kirki之前，我從未接觸過WordPress的定制器（ Customizer ）。Kirki幫助我了解了定制器，并在更少的時間內(nèi)完成了很多工作！

LebCit – WordPress主題開發(fā)人員

WordPress 核心Customizer控件

默認情況下，WordPress 核心包括一些基本的Customizer控件。例如：文本、文本區(qū)域、復(fù)選框、單選、選擇、下拉頁面、電子郵件、網(wǎng)址、數(shù)字、隱藏和日期控件。

Kirki 除了支持這些核心控件，還支持其他二十多個。可以說，Kirki 控件涵蓋了更高級的用例。例如：

• 排版
• 調(diào)色板
• TinyMCE編輯器
• 可排序字段

Kirki 還提供WordPress和興中不可用的功能，例如自動生成CSS輸出和postMessage腳本。這些功能（我們將在本文后面介紹）可以輕松地將開發(fā)時間縮短一半。

Kirki 很慢？

通常針對Kirki的一種批評是它運行緩慢。實際上，這種批評被用于大多數(shù)框架（包括WordPress）。有道理吧？您正在加載很多您可能永遠不會使用的代碼。

在這種情況下，事實是相反。實際上，使用Kirki構(gòu)建的大多數(shù)時間控制面板實際上都比使用核心Controls構(gòu)建的相同時間面板要快。

這是因為Kirki添加了WordPress中未內(nèi)置的優(yōu)化層。

初始化自定義程序后，WordPress會立即嘗試加載所有 Customizer 控件，即使它們位于某個部分或面板中，并且用戶還沒有與其進行交互。相比之下，Kirki將加載推遲到用戶與控件進行交互之前。

為了在實踐中看到這種效果，讓我們嘗試使用兩種不同方法添加50個顏色控件。

WordPress核心方法：

for ($i = 0; $i < 50; $i++){
	$wp_customize->add_setting( 'color_setting_hex_' . $i , array(
		'default' => '#0088CC'
	) );

	// add color picker control
	$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'color_setting_hex_' . $i, array(
		'label' => 'Color Control',
		'section' => 'title_tagline',
		'settings' => 'color_setting_hex_' . $i,
	) ) );
}

使用Kirki：

for ($i = 0; $i < 50; $i++) {
     Kirki::add_field( 'config_id', array(
         'type'        => 'color',
         'settings'    => 'color_setting_hex_' . $i,
         'label'       => __( 'Color Control', 'kirki' ),
         'section'     => 'title_tagline',
         'default'     => '#0088CC',
     ) );
 }

結(jié)果：

如您所見，使用Kirki時，初始加載速度要快得多。創(chuàng)建控件所需的代碼也更加簡潔。

將Kirki集成到您的項目中

有很多種方法可以將Kirki框架集成到您的項目中，官方文檔很好地介紹了不同的方法。

我建議開發(fā)人員指導(dǎo)用戶安裝Kirki插件版本，而不是直接在項目代碼中包含框架。可以使用TGMPA或提供的腳本來完成。

采取插件途徑的原因是Kirki經(jīng)常得到更新和改進。通過安裝插件版本，您的用戶將可以盡快獲取錯誤修復(fù)和安全更新。

相反，當您將框架作為項目的一部分包含在項目時，僅當您更新主題或插件時，用戶才會收到更新，更新的頻率可能比所需的少。

無論使用哪種方法，請確保在添加設(shè)置之前檢查Kirki是否已初始化：

// 如果 Kirki 類不存在就退出
if ( ! class_exists( 'Kirki' ) ) {
    return;
}

字段 Fields

在“WordPress核心方法”示例中，我們首先創(chuàng)建了一個設(shè)置，然后為其創(chuàng)建了一個控件。在大多數(shù)情況下，兩者是直接鏈接的。Kirki簡化了流程，并允許我們創(chuàng)建一個“字段”。創(chuàng)建字段后，它將在后臺為我們構(gòu)建設(shè)置和控件。

字段支持您期望的所有控制參數(shù)（標簽、描述、部分、默認值）以及某些Kirki特定參數(shù)。

'type'參數(shù)允許您選擇Kirki的30種控件類型之一：https://kirki.org/docs/controls/

部分 Sections

Customizer定制器部分允許您將控件分組在一起。WordPress有六個內(nèi)置部分，您也可以添加控件：

• title_tagline –站點身份
• colors –顏色
• header_image –標題圖片
• background_image –背景圖片
• static_front_page –主頁設(shè)置
• custom_css –自定義CSS

Kirki中的部分與核心中的完全相同，Kirki::add_section() 方法只是$wp_customize->add_section()的封裝，并接受相同的參數(shù)和值。

Kirki::add_section( 'section_id', array(
     'title'          => esc_html__( 'My Section', 'kirki' ),
     'description'    => esc_html__( 'My section description.', 'kirki' ),
 ) );

面板 Panels

面板允許您通過將各部分分組在一起來創(chuàng)建另一個層次結(jié)構(gòu)。WordPress 核心具有一個內(nèi)置面板，即“菜單”。

同樣，Kirki實現(xiàn)只是核心功能的封裝。

Kirki::add_panel( 'panel_id', array(
     'priority'    => 10,
     'title'       => esc_html__( 'My Panel', 'kirki' ),
     'description' => esc_html__( 'My panel description', 'kirki' ),
 ) );

'transport' => 'auto'

在創(chuàng)建“定制器控件”時，您有兩個用于傳輸參數(shù)的選項：

• Refresh?–即刷新，每次用戶進行更改時，都會刷新預(yù)覽窗口來顯示更改。這可能需要幾秒鐘。
• postMessage?–每次用戶進行更改時，預(yù)覽窗口都會使用Javascript更新，而無需刷新并且?guī)缀跏羌磿r的。

毫無疑問，postMessage是更新預(yù)覽器的上乘方法，應(yīng)盡可能使用它。但是，有一個缺點，使用postMessage意味著您需要為每個控件創(chuàng)建編寫自定義JS代碼。一個簡單的實現(xiàn)看起來像這樣：

// 實時更新網(wǎng)站標題...
wp.customize( 'blogname', function( value ) {
    value.bind( function( newval ) {
        $( '#site-title a' ).html( newval );
    } );
} );

當您進行許多設(shè)置時，就需要不斷重復(fù)這些代碼。

這就是Kirki大放異彩的地方，它添加了第三個選項：'transport'=>'auto'。

'transport'=>'auto'與Kirki添加的另一個名為'output'的參數(shù)一起使用。定義兩個值后，Kirki將為您自動生成postMessage腳本。這意味著您無需編寫任何Javascript代碼即可獲得使用postMessage的所有好處。

使用transport =>'auto'的字段如下所示：

Kirki::add_field( 'config_id', array(
     'type'        => 'color',
     'settings'    => 'color_setting_hex',
     'label'       => __( 'Color Control', 'kirki' ),
     'section'     => 'colors',
     'default'     => '#0088CC',
     'transport'   => 'auto',
     'output' => array(
         array(
             'element'  => 'body',
             'property' => 'background-color',
         ),
     ),
 ) );

Kirki的這種省時功能意味著大部分時間不再需要編寫或排隊自己的postMessage腳本。

前端CSS輸出

創(chuàng)建Customizer設(shè)置的另一部分是在前端生成CSS輸出。一個簡單的示例可能如下所示：

/**
 * Output the Customizer CSS to wp_head
 */
function wptavern_customizer_css() {
	$bg_color = get_theme_mod( 'color_setting_hex' );
	?>
	<style>
		body {
			background-color: <?php echo sanitize_hex_color( $bg_color ); ?>;
		}
	</style>
	<?php
}
add_action( 'wp_head', wptavern_customizer_css );

像postMessage示例一樣，如果您有很多設(shè)置，就需要不斷重復(fù)類似的代碼。

幸運的是，'transport'=>'auto'也會為您處理前端輸出。即使在我們的簡化示例中， 'transport'=>'auto' 也將我們需要編寫的代碼減少了約50％。

總結(jié)

在本文中，我們僅考察了Kirki 框架的基礎(chǔ)知識及其兩個參數(shù)，已經(jīng)可以看到它如何使我們能夠更快地創(chuàng)建Customizer控件而又不影響性能。

當您接觸Kirki時，您會很快發(fā)現(xiàn)它在Customize API之上添加的豐富功能。毫不奇怪，它已在超過400,000個網(wǎng)站上使用，并且是市場上一些最大的WordPress主題的核心部分。