來源于：
http://ottopress.com/2012/how-to-leverage-the-theme-customizer-in-your-own-themes/
?注意：我在這里談?wù)摰乃袃?nèi)容，包括代碼，都處于測試模式。它可能會有所變化。我將在發(fā)布后更新此帖子，以修復(fù)從現(xiàn)在到現(xiàn)在之間可能發(fā)生的任何代碼更改。我現(xiàn)在正在發(fā)布這篇文章，以便主題作者可以開始查看他們的主題并思考他們可能希望如何改變他們選擇頁面的方式。
因此，WordPress 3.4具有您在主題選擇頁面上可以找到的這個漂亮的新功能。它是標(biāo)有“Customize”的每個主題旁邊的鏈接。這是新的主題定制器，它很酷。
事實上，你無法看到它用簡單的圖片做什么，所以這是一個視頻。如果你想全屏顯示，它可以高清使用。
所以，現(xiàn)在你知道它做了什么，如果你是一個主題作者，你可能只是得到了一些好主意。以下是如何在主題中實現(xiàn)這些想法。
首先，請注意，如果您已經(jīng)支持WordPress核心提供的內(nèi)置自定義標(biāo)題和自定義背景功能，那么這些功能將神奇地顯示并在主題定制器中工作。您無需額外的代碼。
現(xiàn)有選項
現(xiàn)在，您可能要做的第一件事就是記下主題中現(xiàn)有設(shè)置的工作方式。實際上，主題設(shè)置有三個主要選項。我會簡要地回顧一下。
1.“主題模式”。這使用set_theme_mod和get_theme_mod函數(shù)。很少有主題實際使用這些，因為我寫了關(guān)于Settings API，但它就在那里，如果你正常使用它們，那么主題定制器支持它（事實上它是默認(rèn)值）。
2.個人設(shè)置。如果將主題的設(shè)置作為單獨的行存儲在選項表中，每個設(shè)置一個，則可以使用自定義程序。然而，這不是主題中的首選方式，而不是最常見的方式。不過，有些主題會這樣做，所以如果你是其中之一，它也會得到支持。
3.序列化設(shè)置。這是我在我的設(shè)置API教程和主題評論指南推薦的方法中解釋的方式，以及Chip在他自己的主題設(shè)置教程中描述的方式。實質(zhì)上，您將設(shè)置存儲在數(shù)組中，然后使用set_option或get_option將該數(shù)組存儲為數(shù)據(jù)庫中的一行。支持此方法，這是我在本文中主要介紹的方法。我會在適當(dāng)?shù)臅r候簡要提及其他兩種方法。
一旦您知道如何存儲設(shè)置，您就會知道在代碼中的某些位置填寫什么。當(dāng)我們到達(dá)它時，更多關(guān)于這一點。
面向?qū)ο?/h3>
現(xiàn)在，主題定制器非常面向?qū)ο螅m然您不一定需要理解它來實現(xiàn)它的基礎(chǔ)知識，但如果您打算完全自定義，則可能需要了解它。只是一個警告。
首先，我們將查看定制器屏幕的左側(cè)。請注意，左側(cè)分為幾個部分。實際上，這就是他們的名字：WP_Customize_Section。在這些部分的每一部分中都有一個或多個控件;?或者更確切地說，WP_Customize_Control。最后，每個控件都控制頁面上的一個或多個設(shè)置：aka WP_Customize_Setting。
部分組織控件。控件獲取輸入并將其傳遞給設(shè)置。“設(shè)置”界面與主題中的現(xiàn)有選項。
要在這里為自己的自定義選項創(chuàng)建新內(nèi)容，您需要知道在哪里添加它。那個地方是customize_register動作鉤子。
add_action( 'customize_register', 'themename_customize_register' );
function themename_customize_register($wp_customize) {
????// ... do stuff ...
該函數(shù)獲取主$ wp_customize對象的參數(shù)。這是接口點，您可以在其中執(zhí)行所有操作，例如添加節(jié)和控件等。
第
所以，首先要做的是添加一個部分。這是一種方法：
$wp_customize->add_section( 'themename_color_scheme', array(
????'title'????????? => __( 'Color Scheme', 'themename' ),
????'priority'?????? => 35,
) );
第一個參數(shù)是稍后您需要的部分的唯一ID（當(dāng)您將控件放入其中時）。第二個參數(shù)是該部分的選項數(shù)組。真的，章節(jié)沒有很多選擇。您可以給他們一個標(biāo)題，如果您需要一些解釋性文字，可以給他們一個“描述”。優(yōu)先級設(shè)置確定其在列表中的順序。
如果您有特殊情況，您還可以為章節(jié)提供“能力”。一般來說，大多數(shù)網(wǎng)站都需要“edit_theme_options”功能讓用戶編輯此類內(nèi)容，這是這些部分使用的默認(rèn)功能。但是，如果您有任何人可以編輯的選項，或者只應(yīng)由管理員管理的選項，則更改此功能將阻止該部分顯示給無論如何都無法更改這些設(shè)置的用戶。
您可以添加到部分的最后一件事是“theme_supports”選項。除非主題支持，否則這將使菜單不顯示。如果你把這個代碼放在一個主題本身，那么你已經(jīng)知道主題支持什么，所以它沒有多大意義。如果主題不支持它，核心使用它來不顯示標(biāo)題和背景選項。
設(shè)置
接下來，讓我們配置一些設(shè)置。是的，設(shè)置，而不是控件。請注意，控件需要知道它們正在更改的設(shè)置，因此我們必須首先附加設(shè)置。
要聲明設(shè)置，您可以這樣做：
五
$wp_customize->add_setting( 'themename_theme_options[color_scheme]', array(
????'default'??????? => 'some-default-value',
????'type'?????????? => 'option',
????'capability'???? => 'edit_theme_options',
) );
在這種情況下，我已經(jīng)聲明我感興趣的設(shè)置在一個選項中，該選項在數(shù)據(jù)庫中被命名為“themename_theme_options”，并且它被序列化，并且其中的實際數(shù)組鍵是“color_scheme”。還記得我們之前關(guān)于Settings API以及如何存儲設(shè)置的演講嗎？這是方法3。
這是方法2（每個數(shù)據(jù)庫條目一個選項）：
五
$wp_customize->add_setting( 'themename_color_scheme', array(
????'default'??????? => 'some-default-value',
????'type'?????????? => 'option',
????'capability'???? => 'edit_theme_options',
) );
這里的方法1（使用theme_mod）：
五
$wp_customize->add_setting( 'color_scheme', array(
????'default'??????? => 'some-default-value',
????'type'?????????? => 'theme_mod',
????'capability'???? => 'edit_theme_options',
) );
此設(shè)置基本上告訴主題自定義程序存儲選項的位置，以及如何更改其值，以便使用更改的選項顯示主題。
以下是關(guān)于此的好處：您告訴主題定制器選項的位置。您不必更改現(xiàn)有選項的工作方式。
你已經(jīng)有了一個主題選項頁面，對嗎？所以，不知何故，你正在保存這些選項。在主題中，它使用get_theme_mod或get_option讀取這些選項，對吧？主題定制器的工作方式是使用過濾器攔截該調(diào)用，僅更改預(yù)覽器大小寫的選項，然后將新選項傳遞給主題。因此，主題不知道它獲得的值不在數(shù)據(jù)庫中，而是用戶剛剛選擇的值。這是一個神奇的技巧，為什么主題不必大幅改變以支持這種事情。他們制作自定義部分所需要做的就是告訴主題自定義程序代碼他們使用的選項和方式，并直接為預(yù)覽器更改這些選項。
（注意這里的說明：上面的“默認(rèn)”設(shè)置應(yīng)該是默認(rèn)值，而不是當(dāng)前值。差異是一個微妙的，但重點是你實際上不需要從中獲取選項的當(dāng)前值數(shù)據(jù)庫并將其放在這里.WP_Customize_Setting為您處理所有爵士樂。如果數(shù)據(jù)庫中根本不存在該值，則應(yīng)使用“默認(rèn)”。）
add_setting調(diào)用還有一點，我將在稍后解釋postMessage時再回來。
控制
最后，我們來控制。顯然，控件可以看起來很多種方式之一。最簡單的控件只是復(fù)選框或文本字段。但是，顏色會發(fā)生很大的變化，所以也有色輪控制。事實上，WordPress定義了許多可能的控件。我們來看幾點：
收音機選擇：
$wp_customize->add_control( 'themename_color_scheme', array(
????'label'????? => __( 'Color Scheme', 'themename' ),
????'section'??? => 'themename_color_scheme',
????'settings'?? => 'themename_theme_options[color_scheme]',
????'type'?????? => 'radio',
????'choices'??? => array(
????????'value1' => 'Choice 1',
????????'value2' => 'Choice 2',
????????'value3' => 'Choice 3',
????????),
) );
很簡單。它引用了它所在的部分，它將要改變的設(shè)置，然后它具有無線電類型和選擇列表及其相關(guān)值。
如何改為復(fù)選框呢？這個直接來自核心：
$wp_customize->add_control( 'display_header_text', array(
????'settings' => 'header_textcolor',
????'label'??? => __( 'Display Header Text' ),
????'section'? => 'header',
????'type'???? => 'checkbox',
) );
復(fù)選框打開或關(guān)閉，true或false。它不需要真正的價值觀。
選擇下拉框怎么樣？這是一個例子：
$wp_customize->add_control( 'example_select_box', array(
????'label'?? => 'Select Something:',
????'section' => 'nav',
????'type'??? => 'select',
????'choices'??? => array(
????????'value1' => 'Choice 1',
????????'value2' => 'Choice 2',
????????'value3' => 'Choice 3',
????????),
) );
默認(rèn)的控件類型實際上是type ='text'，它會創(chuàng)建一個文本框控件。另一種類型的控件是“下拉頁面”類型，它創(chuàng)建WordPress頁面的下拉列表。
但這不是全部。實際上還有幾個，但因為它們是如此習(xí)俗，它們被宣布不同。這是我們在ya上獲得所有面向?qū)ο蟮牡胤?.....
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'link_color', array(
????'label'?? => __( 'Link Color', 'themename' ),
????'section' => 'themename_color_scheme',
????'settings'?? => 'themename_theme_options[link_color]',
) ) );
哇，新課程怎么樣？WP_Customize_Color_Control是一個擴展內(nèi)置WP_Customize_Control類的類。它將色輪爵士樂添加到需要選擇顏色的地方。請注意，這里的類是使用new創(chuàng)建的，因此它必須直接傳遞給它的$ wp_customize，因此它知道在哪里掛鉤。（注意：這可能會在最終的3.4版本之前發(fā)生變化。）
其他控制措施：
- WP_Customize_Upload_Control - 這為您提供了一個允許文件上傳的上傳框。但是，您可能不會直接使用它，您可以將其擴展為其他內(nèi)容...例如：
- WP_Customize_Image_Control - 這給出了圖像選擇器和上傳器框。它擴展了上傳控制器。您可以在自定義背景片上看到它，用戶可以將新文件上傳為背景圖像。
- WP_Customize_Header_Image_Control - 由于頭文件的大小調(diào)整操作，它需要一些特殊處理和顯示，因此WP_Customize_Header_Image_Control擴展了WP_Customize_Image_Control以添加該功能。您可以在自定義標(biāo)題片上看到它，用戶可以將新文件上傳為標(biāo)題圖像。
因此，創(chuàng)建自定義控制器以執(zhí)行任何操作的方法是創(chuàng)建自己的新類，它擴展了WP_Customize_Control并添加了您想要的位。如何做到這一點有點復(fù)雜，所以我將保存為另一個教程。目前，您已經(jīng)擁有圖像處理，色輪，文本框，收音機，下拉菜單和復(fù)選框。我認(rèn)為應(yīng)該足夠開始。
教程結(jié)束？
不完全的。我上面所做的一切都足以向定制器中添加新的部分，將控件放入其中，然后在頁面刷新后稍微延遲后讓預(yù)覽顯示您的更改。您所要做的就是在適當(dāng)?shù)奈恢檬褂眠m當(dāng)?shù)膮?shù)調(diào)用這些函數(shù)，它將起作用。
但請注意，我說“當(dāng)頁面刷新時”......來吧......這是2012年。我們沒有飛行汽車，我們還要等一兩秒鐘？
不。
輸入postMessage
回到我提到$ wp_customize-> add_setting函數(shù)調(diào)用時，我提到“再多一點”。再多一點是稱為“運輸”的選項。
傳輸定義設(shè)置更改從您將其更改為預(yù)覽窗格的位置。默認(rèn)設(shè)置為“刷新”。另一種設(shè)置名為“postMessage”。
postMessage傳輸使得設(shè)置立即發(fā)送到另一幀，javascript可以使用這些新信息即時調(diào)整頁面。
一個例子：
假設(shè)我們有一個設(shè)置來改變標(biāo)題的顏色。頁面上的所有標(biāo)題都在某些標(biāo)簽中，或許有一類字幕。該選項通常只保存所選的HTML顏色，然后在header.php中輸出一些內(nèi)聯(lián)CSS基本上這樣做：
.posttitle {
????color: #abcdef;
}
或者無論該顏色實際上是什么選項。
我們已經(jīng)將我們的設(shè)置掛鉤到該選項，并將我們的WP_Customize_Color_Control掛鉤到它，現(xiàn)在當(dāng)我們更改它時，它可以工作，我們可以看到顏色變化。請注意，這對于已經(jīng)正常工作的自定義程序選項來說是最容易的，因此最好的方法是首先使其正常工作，然后再添加下一位。
現(xiàn)在，我們在自定義程序中有工作選項，因此為了消除刷新延遲，我們將這個新選項添加??到add_setting調(diào)用：
'transport'???????? => 'postMessage',
這告訴定制器該設(shè)置將通過javascript直接發(fā)送到幀。但是，要使該設(shè)置生效，我們需要在框架中使用javascript來接收它。
所以，回到我們的主要功能......還記得嗎？它開始是這樣的：
add_action( 'customize_register', 'themename_customize_register' );
function themename_customize_register($wp_customize) {
????// ... do stuff ...
在該函數(shù)結(jié)束時，我們將添加以下代碼：
if ( $wp_customize->is_preview() && ! is_admin() )
????add_action( 'wp_footer', 'themename_customize_preview', 21);
這將為我們的預(yù)覽框架的頁腳添加一個新的函數(shù)調(diào)用。它只會添加預(yù)覽框，因此實時網(wǎng)站和其他人不會看到它，因為他們不需要看到它。這是我們將輸出我們的javascript以實現(xiàn)實時發(fā)生的地方。
這是我們的功能：
function themename_customize_preview() {
?????>
????<script type="text/javascript">
????( function( $ ){
????wp.customize('setting_name',function( value ) {
????????value.bind(function(to) {
????????????$('.posttitle').css('color', to ? to : '' );
????????});
????});
????} )( jQuery )
????</script>
????<?php
}
如你所見，它只輸出一些javascript。這段代碼不會有太大變化，所以讓我們重點介紹兩件事：
- 'setting_name'是設(shè)置的名稱，由$ wp_customize-> add_setting調(diào)用添加。
- 以jQuery（'.posttitle'）開頭的整行是我們的自定義代碼。它獲取“to”變量，它將是用戶選擇的顏色，并使用jquery的css修改功能將頁面上的字幕設(shè)置為具有該顏色。
那些是你需要改變的唯一兩個，真的。剩下的就是漂亮的意大利面。對于每個實時設(shè)置，您可以在腳本中填寫這段代碼。
這是另一回事：您可以將預(yù)先存在的刷新設(shè)置更改為postMessage。例如，在“標(biāo)題”部分中獲取“站點標(biāo)題”和“標(biāo)語”元素。這些是刷新設(shè)置，原因是每個主題以不同方式實現(xiàn)它們。核心無法知道任何特定主題所需的javascript代碼。
但如果你是一個主題作者，那么你就不是在寫一個通用主題。你是為你的特定主題而寫的。您知道如何顯示網(wǎng)站標(biāo)題和標(biāo)語。沒有理由你不能實時進(jìn)行這些更新。當(dāng)你在它的時候，header_textcolor設(shè)置也可以是實時的，因為你知道主題代碼。
在您的main函數(shù)中，添加以下三行代碼：
$wp_customize->get_setting('blogname')->transport='postMessage';
$wp_customize->get_setting('blogdescription')->transport='postMessage';
$wp_customize->get_setting('header_textcolor')->transport='postMessage';
這會將這些核心設(shè)置上的傳輸更改為postMessage。現(xiàn)在您需要添加javascript代碼以實際在主題中進(jìn)行刷新。這是TwentyEleven這樣做的一個例子（我為它寫的補丁）：
function twentyeleven_customize_preview() {
?????>
????<script type="text/javascript">
????( function( $ ){
????wp.customize('blogname',function( value ) {
????????value.bind(function(to) {
????????????$('#site-title a').html(to);
????????});
????});
????wp.customize('blogdescription',function( value ) {
????????value.bind(function(to) {
????????????$('#site-description').html(to);
????????});
????});
????wp.customize( 'header_textcolor', function( value ) {
????????value.bind( function( to ) {
????????????$('#site-title a, #site-description').css('color', to ? to : '' );
????????});
????});
????} )( jQuery )
????</script>
????<?php
}
對于blogname，它會更改“＃site-title a”鏈接中的HTML。對于描述，它使用#sitedescription更改標(biāo)記。對于那些顏色，它只是針對它們并改變它們的CSS。
Core必須嘗試在所有主題中都是通用的。但是主題更多地了解它們的工作方式，并且能夠以更好的方式改變目標(biāo)。添加控件的主題知道這些控件會發(fā)生什么變化，所以如果它像CSS一樣簡單，甚至像HTML這樣復(fù)雜的東西，如果你可以編寫javascript代碼來實時修改，那么你可以使用postMessage并消除刷新延遲。
希望這能解釋一些主題定制器。它像泥一樣清澈嗎？看看我對Twenty Eleven的補丁，將現(xiàn)有選項屏幕中的一些主題選項添加到定制器中。您可以在此門票上找到它：http：//core.trac.wordpress.org/ticket/20448。
相關(guān)文章：
- Theme Customizer Part Deux：擺脫選項頁面
- 為Theme Customizer進(jìn)行自定義控件
- 定制器有什么新功能
- WordPress PROTIP：兒童主題
- WordPress 3.0主題提示：自定義背景
也許你需要比較新的幫助，可以來看看這個：
