到目前為止，我們已經(jīng)了解了主題定制器是什麼、它是如何工作的以及它獨(dú)有的組件。我們甚至討論瞭如何將選項(xiàng)序列化到資料庫中，以便我們稍後在使用主題時可以檢索它們。

為此，我們是時候開始使用主題定制器進(jìn)行我們自己的工作了。在本文中，我們將了解傳輸、它們的工作原理以及它們兩種主要方法的差異。

此外，我們將在 WordPress 的現(xiàn)有部分之一中引入我們自己的控件，並了解它如何與各種傳輸模型配合使用。

關(guān)於交通的一切

在我們實(shí)際寫任何程式碼之前，我們需要熟悉的另一個概念是 transports 的概念。本質(zhì)上，這就是主題定制器將資料發(fā)送到主題以顯示更改的方式。

資料傳輸有兩種方式：

1. refresh - 這是預(yù)設(shè)方法。使用此方法，當(dāng)使用者在主題自訂器中變更設(shè)定時，顯示主題的框架將在顯示變更之前刷新。
2. postMessage - 此方法必須明確說明，但它提供了更增強(qiáng)的使用者體驗(yàn)。使用此方法時，將發(fā)出非同步請求，並且主題的外觀將更新以反映使用者的設(shè)置，而無需重新載入頁面。

這個概念很簡單，對吧？

在本文中，我們將實(shí)作新主題自訂設(shè)定的兩個版本。首先，我們將介紹一個使用 refresh 傳輸?shù)脑O(shè)定。之後，我們將改進(jìn)設(shè)置，使其使用 postMessage 傳輸。

在文章末尾，我將連結(jié)到兩個版本的程式碼，以便您可以在本機(jī)上下載並安裝某些內(nèi)容，而不必簡單地參考本文。

話雖如此，讓我們開始吧。

實(shí)作我們的新設(shè)定

在本文中，我們將介紹一個設(shè)置，允許使用者更改其主題中存在的所有錨點(diǎn)的顏色。我們很少需要在整個網(wǎng)站上普遍更改錨點(diǎn)的顏色，但實(shí)施此特定設(shè)定將教您以下內(nèi)容：

• 如何在現(xiàn)有部分中實(shí)作新設(shè)定
• 如何使用 WP_Customize_Color_Control
• #如何使用 refresh 傳輸方法以及如何使用 postMessage 傳輸方法

顯然，還有很多工作要做。

添加我們的鉤子

首先，讓我們?yōu)?index.php 模板添加一個錨點(diǎn)，以便我們可以實(shí)際著色。這是一個簡單的改變。只需確保您的 index.php 模板包含以下內(nèi)容：

<div id="content">
	This is the content. <a href="#">This is an anchor</a> so that we can tell the Theme Customizer is working.
</div><!-- /#content -->

接下來，我們需要引入一個掛鉤到 customize_register 操作的函數(shù)：

function tcx_register_theme_customizer( $wp_customize ) {
    // More to come...
}
add_action( 'customize_register', 'tcx_register_theme_customizer' );

在這裡，我們定義了一個函數(shù)，用於介紹我們的新設(shè)定。請注意，此函數(shù)最重要的一點(diǎn)是它接受單個參數(shù) - wp_customize - 這允許我們將我們的部分、設(shè)定和控制項(xiàng)新增至主題自訂器。

回想上一篇文章，我們提到 WordPress 提供了許多部分，因此我們不必添加自己的部分。在本例中，我們將利用預(yù)先定義的 colors 部分。

實(shí)作設(shè)定

在 tcx_register_theme_customizer 函數(shù)的上下文中，加入以下程式碼區(qū)塊：

$wp_customize->add_setting(
	'tcx_link_color',
	array(
		'default'     => '#000000'
	)
);

這表示我們正在向定制器引入一個新設(shè)置，ID 為 tcx_link_color，預(yù)設(shè)顏色為黑色。

當(dāng)我們實(shí)作顏色選擇器時，這將發(fā)揮作用。那麼就讓我們現(xiàn)在就開始吧。在上面的程式碼區(qū)塊之後，將以下區(qū)塊新增到您的函數(shù)中：

$wp_customize->add_control(
	new WP_Customize_Color_Control(
		$wp_customize,
		'link_color',
		array(
			'label'      => __( 'Link Color', 'tcx' ),
			'section'    => 'colors',
			'settings'   => 'tcx_link_color'
		)
	)
);

這將在 colors 部分引入顏色選擇器控制項(xiàng)。它將添加一個國際化標(biāo)籤，內(nèi)容為“連結(jié)顏色”，並將自身綁定到我們在上面第一段程式碼中定義的 tcx_link_color 設(shè)定。

函數(shù)的最終版本應(yīng)如下所示：

function tcx_register_theme_customizer( $wp_customize ) {

	$wp_customize->add_setting(
		'tcx_link_color',
		array(
			'default'     => '#000000'
		)
	);

	$wp_customize->add_control(
		new WP_Customize_Color_Control(
			$wp_customize,
			'link_color',
			array(
				'label'      => __( 'Link Color', 'tcx' ),
				'section'    => 'colors',
				'settings'   => 'tcx_link_color'
			)
		)
	);

}
add_action( 'customize_register', 'tcx_register_theme_customizer' );

演示控制項(xiàng)

此時，儲存您的工作，啟動 WordPress，導(dǎo)航到主題自訂器，您應(yīng)該會看到以下內(nèi)容：

#請注意，您可以展開顏色選擇器，選擇顏色，並且通常按預(yù)期使用它；然而，內(nèi)容的錨點(diǎn)根本沒有改變。接下來，我們將以下函數(shù)加入到 functions.php 檔案中。

function tcx_customizer_css() {
	?>
	<style type="text/css">
		a { color: <?php echo get_theme_mod( 'tcx_link_color' ); ?>; }
	</style>
	<?php
}
add_action( 'wp_head', 'tcx_customizer_css' );

顯然，該函數(shù)已掛接到 wp_head 操作中。它負(fù)責(zé)從選項(xiàng)表中讀取與我們的新設(shè)定相對應(yīng)的值（由 tcx_link_color 標(biāo)識），然後將該值寫入頁面標(biāo)題中的 style 區(qū)塊中。

完成後，刷新主題定制器，您應(yīng)該注意到每當(dāng)您選擇顏色時就會發(fā)生變化。您還應(yīng)該注意到，每當(dāng)更改顏色以及標(biāo)題、標(biāo)語或靜態(tài)首頁選項(xiàng)時，頁面就會閃爍。

更新我們的交通

現(xiàn)在我們已經(jīng)完成了這項(xiàng)工作，我們可以引入一些更改，這些更改將改善用戶體驗(yàn)，因?yàn)樗婕笆褂?WordPress 主題定制器更改主題選項(xiàng)。

首先，我們需要更新 footer.php 模板，使其包含對 wp_footer() 的調(diào)用。這樣我們就可以在主題的頁腳中加載 JavaScript，這是 postMessage 傳輸所必需的。

頁腳應(yīng)如下所示：

		<div id="footer">
			&copy; <?php echo date( 'Y' ); ?> <?php bloginfo( 'title' ); ?> All Rights Reserved
		</div><!-- /#footer -->
		<?php wp_footer(); ?>
	</body>
</html>

接下來，我們需要更新 functions.php 中的 add_setting 調(diào)用，以便它使用正確的傳輸方法。

更新代碼，使其看起來像這樣：

$wp_customize->add_setting(
	'tcx_link_color',
	array(
		'default'     => '#000000',
		'transport'   => 'postMessage'
	)
);

最后，不要刪除我們在上一個版本中定義的函數(shù) tcx_customizer_css ，因?yàn)樗匀恍枰x取我們?yōu)殄^點(diǎn)選擇的值 - 我們只是異步保存它們而不是刷新時保存。

現(xiàn)在在主題的根目錄中創(chuàng)建一個名為 js 的目錄，然后將 theme-customizer.js 文件添加到該目錄中。

在此 JavaScript 文件中，我們需要添加以下代碼塊。通常，我喜歡嘗試解釋我們正在做的事情，但在這種情況下，在顯示代碼之后檢查會更容易。

(function( $ ) {
	"use strict";

	wp.customize( 'tcx_link_color', function( value ) {
		value.bind( function( to ) {
			$( 'a' ).css( 'color', to );
		} );
	});

})( jQuery );

在這段代碼中，請注意，我們可以訪問 wp JavaScript 對象，該對象為我們提供 customize 消息，就像服務(wù)器端 $wp_customize->add_setting() 的設(shè)置一樣。

接下來，請注意該函數(shù)接受設(shè)置的 ID，這是一個回調(diào)函數(shù)，該函數(shù)接收具有原始值的對象，然后允許我們將另一個函數(shù)綁定到該對象以進(jìn)行更改每當(dāng)該對象發(fā)生更改時。

還在我身邊嗎？

另一種說法是：當(dāng)鏈接顏色更改時，只要使用顏色選擇器，我們就可以更改主題的顯示。

話雖如此，讓我們重新訪問 functions.php 文件并引入一個新函數(shù)，以便我們可以正確地將 JavaScript 文件排入隊(duì)列。

首先，我們將引入一個名為 tcx_customizer_live_preview() 的函數(shù)，它將掛鉤 customize_preview_init 操作：

function tcx_customizer_live_preview() {
	// More to come
}
add_action( 'customize_preview_init', 'tcx_customizer_live_preview' );

接下來，我們將對 wp_enqueue_script 進(jìn)行標(biāo)準(zhǔn)調(diào)用，這將引入我們的 theme-customizer.js 文件，但請注意，我們將最后一個參數(shù)作為 true 傳遞，因此該腳本已添加到文檔的頁腳：

wp_enqueue_script(
	'tcx-theme-customizer',
	get_template_directory_uri() . '/js/theme-customizer.js',
	array( 'jquery', 'customize-preview' ),
	'0.3.0',
	true
);

該函數(shù)的最終版本如下所示：

function tcx_customizer_live_preview() {

	wp_enqueue_script(
		'tcx-theme-customizer',
		get_template_directory_uri() . '/js/theme-customizer.js',
		array( 'jquery', 'customize-preview' ),
		'0.3.0',
		true
	);

}
add_action( 'customize_preview_init', 'tcx_customizer_live_preview' );

保存您的所有工作。假設(shè)您已正確完成所有操作，您現(xiàn)在應(yīng)該能夠更改標(biāo)題、標(biāo)語、鏈接顏色和靜態(tài)首頁選項(xiàng)，無需刷新頁面。

更好的用戶體驗(yàn)，是嗎？

但還有更多......

我們在本文中查看了很多。以至于本文的源代碼已發(fā)布為兩個不同的下載：

• 首先，下載使用 refresh 傳輸?shù)陌姹?/li>
• 然后，下載使用 postMessage 傳輸?shù)陌姹?/li>

但是我們還沒有完成。在下一篇文章中，我們將了解如何引入我們自己的原創(chuàng)部分以及我們自己的原創(chuàng)設(shè)置和控件來完善本系列。

現(xiàn)在，請嘗試使用我們上面提供的代碼，以便為下一篇文章的工作做好準(zhǔn)備！