.jpg)
到目前為止，我們已經(jīng)了解了主題定制器是什么、它是如何工作的以及它獨(dú)有的組件。我們甚至討論了如何將選項(xiàng)序列化到數(shù)據(jù)庫(kù)中，以便我們稍后在使用主題時(shí)可以檢索它們。
為此，我們是時(shí)候開(kāi)始使用主題定制器進(jìn)行我們自己的工作了。在本文中，我們將了解傳輸、它們的工作原理以及它們兩種主要方法的區(qū)別。
此外，我們將在 WordPress 的現(xiàn)有部分之一中引入我們自己的控件，并了解它如何與各種傳輸模型配合使用。
關(guān)于交通的一切
在我們實(shí)際編寫任何代碼之前，我們需要熟悉的另一個(gè)概念是 transports 的概念。本質(zhì)上，這就是主題定制器將數(shù)據(jù)發(fā)送到主題以顯示更改的方式。
數(shù)據(jù)傳輸有兩種方式：
- refresh – 這是默認(rèn)方法。使用此方法，當(dāng)用戶在主題定制器中更改設(shè)置時(shí)，顯示主題的框架將在顯示更改之前刷新。
- postMessage – 此方法必須明確說(shuō)明，但它提供了更增強(qiáng)的用戶體驗(yàn)。使用此方法時(shí)，將發(fā)出異步請(qǐng)求，并且主題的外觀將更新以反映用戶的設(shè)置，而無(wú)需重新加載頁(yè)面。
這個(gè)概念很簡(jiǎn)單，對(duì)吧？
在本文中，我們將實(shí)現(xiàn)新主題自定義設(shè)置的兩個(gè)版本。首先，我們將介紹一個(gè)使用 refresh 傳輸?shù)脑O(shè)置。之后，我們將改進(jìn)設(shè)置，使其使用 postMessage 傳輸。
在文章末尾，我將鏈接到兩個(gè)版本的代碼，以便您可以在本地計(jì)算機(jī)上下載并安裝某些內(nèi)容，而不必簡(jiǎn)??單地參考本文。
話雖如此，讓我們開(kāi)始吧。
實(shí)施我們的新設(shè)置
在本文中，我們將介紹一個(gè)設(shè)置，允許用戶更改其主題中存在的所有錨點(diǎn)的顏色。我們很少需要在整個(gè)網(wǎng)站上普遍更改錨點(diǎn)的顏色，但實(shí)施此特定設(shè)置將教會(huì)您以下內(nèi)容：
- 如何在現(xiàn)有部分中實(shí)施新設(shè)置
- 如何使用 WP_Customize_Color_Control
- 如何使用 refresh 傳輸方法以及如何使用 postMessage 傳輸方法
顯然，還有很多工作要做。
添加我們的鉤子
首先，讓我們向 index.php 模板添加一個(gè)錨點(diǎn)，以便我們可以實(shí)際著色。這是一個(gè)簡(jiǎn)單的改變。只需確保您的 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 -->
接下來(lái)，我們需要引入一個(gè)掛鉤到 customize_register 操作的函數(shù)：
function tcx_register_theme_customizer( $wp_customize ) { // More to come... } add_action( 'customize_register', 'tcx_register_theme_customizer' );
在這里，我們定義了一個(gè)函數(shù)，用于介紹我們的新設(shè)置。請(qǐng)注意，此函數(shù)最重要的一點(diǎn)是它接受單個(gè)參數(shù) – wp_customize – 這允許我們將我們的部分、設(shè)置和控件添加到主題定制器。
回想一下上一篇文章，我們提到 WordPress 提供了許多部分，因此我們不必添加自己的部分。在本例中，我們將利用預(yù)定義的 colors 部分。
實(shí)現(xiàn)設(shè)置
在 tcx_register_theme_customizer 函數(shù)的上下文中，添加以下代碼塊：
$wp_customize->add_setting( 'tcx_link_color', array( 'default' => '#000000' ) );
這表示我們正在向定制器引入一個(gè)新設(shè)置，ID 為 tcx_link_color，默認(rèn)顏色為黑色。
當(dāng)我們實(shí)現(xiàn)顏色選擇器時(shí)，這將發(fā)揮作用。那么讓我們現(xiàn)在就開(kāi)始吧。在上面的代碼塊之后，將以下塊添加到您的函數(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 部分引入顏色選擇器控件。它將添加一個(gè)國(guó)際化標(biāo)簽，內(nèi)容為“鏈接顏色”，并將自身綁定到我們?cè)谏厦娴谝欢未a中定義的 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' );
演示控件
此時(shí)，保存您的工作，啟動(dòng) WordPress，導(dǎo)航到主題定制器，您應(yīng)該會(huì)看到如下內(nèi)容：
請(qǐng)注意，您可以展開(kāi)顏色選擇器，選擇顏色，并且通常按預(yù)期使用它；然而，內(nèi)容的錨點(diǎn)根本沒(méi)有改變。接下來(lái)，我們將以下函數(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è)置相對(duì)應(yīng)的值（由 tcx_link_color 標(biāo)識(shí)），然后將該值寫入頁(yè)面標(biāo)題中的 style 塊中。
完成后，刷新主題定制器，您應(yīng)該注意到每當(dāng)您選擇顏色時(shí)就會(huì)發(fā)生變化。您還應(yīng)該注意到，每當(dāng)更改顏色以及標(biāo)題、標(biāo)語(yǔ)或靜態(tài)首頁(yè)選項(xiàng)時(shí)，頁(yè)面就會(huì)閃爍。
更新我們的交通
現(xiàn)在我們已經(jīng)完成了這項(xiàng)工作，我們可以引入一些更改，這些更改將改善用戶體驗(yàn)，因?yàn)樗婕笆褂?WordPress 主題定制器更改主題選項(xiàng)。
首先，我們需要更新 footer.php 模板，使其包含對(duì) wp_footer() 的調(diào)用。這樣我們就可以在主題的頁(yè)腳中加載 JavaScript，這是 postMessage 傳輸所必需的。
頁(yè)腳應(yīng)如下所示：
<div id="footer"> ? <?php echo date( 'Y' ); ?><?php bloginfo( 'title' ); ?> All Rights Reserved </div><!-- /#footer --> <?php wp_footer(); ?>
.png)
