久久精品天堂,成人免费精品视频,亚洲精品国产第七页在线

一個比較老的教程了，但仍然具有參考性

來源于：

http://ottopress.com/2012/how-to-leverage-the-theme-customizer-in-your-own-themes/

?注意：我在這里談論的所有內容，包括代碼，都處于測試模式。它可能會有所變化。我將在發布后更新此帖子，以修復從現在到現在之間可能發生的任何代碼更改。我現在正在發布這篇文章，以便主題作者可以開始查看他們的主題并思考他們可能希望如何改變他們選擇頁面的方式。

因此，WordPress 3.4具有您在主題選擇頁面上可以找到的這個漂亮的新功能。它是標有“Customize”的每個主題旁邊的鏈接。這是新的主題定制器，它很酷。

事實上，你無法看到它用簡單的圖片做什么，所以這是一個視頻。如果你想全屏顯示，它可以高清使用。

所以，現在你知道它做了什么，如果你是一個主題作者，你可能只是得到了一些好主意。以下是如何在主題中實現這些想法。

首先，請注意，如果您已經支持WordPress核心提供的內置自定義標題和自定義背景功能，那么這些功能將神奇地顯示并在主題定制器中工作。您無需額外的代碼。

現有選項

現在，您可能要做的第一件事就是記下主題中現有設置的工作方式。實際上，主題設置有三個主要選項。我會簡要地回顧一下。

1.“主題模式”。這使用set_theme_mod和get_theme_mod函數。很少有主題實際使用這些，因為我寫了關于Settings API，但它就在那里，如果你正常使用它們，那么主題定制器支持它（事實上它是默認值）。

2.個人設置。如果將主題的設置作為單獨的行存儲在選項表中，每個設置一個，則可以使用自定義程序。然而，這不是主題中的首選方式，而不是最常見的方式。不過，有些主題會這樣做，所以如果你是其中之一，它也會得到支持。

3.序列化設置。這是我在我的設置API教程和主題評論指南推薦的方法中解釋的方式，以及Chip在他自己的主題設置教程中描述的方式。實質上，您將設置存儲在數組中，然后使用set_option或get_option將該數組存儲為數據庫中的一行。支持此方法，這是我在本文中主要介紹的方法。我會在適當的時候簡要提及其他兩種方法。

一旦您知道如何存儲設置，您就會知道在代碼中的某些位置填寫什么。當我們到達它時，更多關于這一點。

面向對象

現在，主題定制器非常面向對象，雖然您不一定需要理解它來實現它的基礎知識，但如果您打算完全自定義，則可能需要了解它。只是一個警告。

首先，我們將查看定制器屏幕的左側。請注意，左側分為幾個部分。實際上，這就是他們的名字：WP_Customize_Section。在這些部分的每一部分中都有一個或多個控件;?或者更確切地說，WP_Customize_Control。最后，每個控件都控制頁面上的一個或多個設置：aka WP_Customize_Setting。

部分組織控件。控件獲取輸入并將其傳遞給設置。“設置”界面與主題中的現有選項。

要在這里為自己的自定義選項創建新內容，您需要知道在哪里添加它。那個地方是customize_register動作鉤子。

add_action( 'customize_register', 'themename_customize_register' );
function themename_customize_register($wp_customize) {
????// ... do stuff ...

該函數獲取主$ wp_customize對象的參數。這是接口點，您可以在其中執行所有操作，例如添加節和控件等。

第

所以，首先要做的是添加一個部分。這是一種方法：

$wp_customize->add_section( 'themename_color_scheme', array(
????'title'????????? => __( 'Color Scheme', 'themename' ),
????'priority'?????? => 35,
) );

第一個參數是稍后您需要的部分的唯一ID（當您將控件放入其中時）。第二個參數是該部分的選項數組。真的，章節沒有很多選擇。您可以給他們一個標題，如果您需要一些解釋性文字，可以給他們一個“描述”。優先級設置確定其在列表中的順序。

如果您有特殊情況，您還可以為章節提供“能力”。一般來說，大多數網站都需要“edit_theme_options”功能讓用戶編輯此類內容，這是這些部分使用的默認功能。但是，如果您有任何人可以編輯的選項，或者只應由管理員管理的選項，則更改此功能將阻止該部分顯示給無論如何都無法更改這些設置的用戶。

您可以添加到部分的最后一件事是“theme_supports”選項。除非主題支持，否則這將使菜單不顯示。如果你把這個代碼放在一個主題本身，那么你已經知道主題支持什么，所以它沒有多大意義。如果主題不支持它，核心使用它來不顯示標題和背景選項。

設置

接下來，讓我們配置一些設置。是的，設置，而不是控件。請注意，控件需要知道它們正在更改的設置，因此我們必須首先附加設置。

要聲明設置，您可以這樣做：

五

$wp_customize->add_setting( 'themename_theme_options[color_scheme]', array(
????'default'??????? => 'some-default-value',
????'type'?????????? => 'option',
????'capability'???? => 'edit_theme_options',
) );

在這種情況下，我已經聲明我感興趣的設置在一個選項中，該選項在數據庫中被命名為“themename_theme_options”，并且它被序列化，并且其中的實際數組鍵是“color_scheme”。還記得我們之前關于Settings API以及如何存儲設置的演講嗎？這是方法3。

這是方法2（每個數據庫條目一個選項）：

五

$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',
) );

此設置基本上告訴主題自定義程序存儲選項的位置，以及如何更改其值，以便使用更改的選項顯示主題。

以下是關于此的好處：您告訴主題定制器選項的位置。您不必更改現有選項的工作方式。

你已經有了一個主題選項頁面，對嗎？所以，不知何故，你正在保存這些選項。在主題中，它使用get_theme_mod或get_option讀取這些選項，對吧？主題定制器的工作方式是使用過濾器攔截該調用，僅更改預覽器大小寫的選項，然后將新選項傳遞給主題。因此，主題不知道它獲得的值不在數據庫中，而是用戶剛剛選擇的值。這是一個神奇的技巧，為什么主題不必大幅改變以支持這種事情。他們制作自定義部分所需要做的就是告訴主題自定義程序代碼他們使用的選項和方式，并直接為預覽器更改這些選項。

（注意這里的說明：上面的“默認”設置應該是默認值，而不是當前值。差異是一個微妙的，但重點是你實際上不需要從中獲取選項的當前值數據庫并將其放在這里.WP_Customize_Setting為您處理所有爵士樂。如果數據庫中根本不存在該值，則應使用“默認”。）

add_setting調用還有一點，我將在稍后解釋postMessage時再回來。

控制

最后，我們來控制。顯然，控件可以看起來很多種方式之一。最簡單的控件只是復選框或文本字段。但是，顏色會發生很大的變化，所以也有色輪控制。事實上，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',
????????),
) );

很簡單。它引用了它所在的部分，它將要改變的設置，然后它具有無線電類型和選擇列表及其相關值。

如何改為復選框呢？這個直接來自核心：

$wp_customize->add_control( 'display_header_text', array(
????'settings' => 'header_textcolor',
????'label'??? => __( 'Display Header Text' ),
????'section'? => 'header',
????'type'???? => 'checkbox',
) );

復選框打開或關閉，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',
????????),
) );

默認的控件類型實際上是type ='text'，它會創建一個文本框控件。另一種類型的控件是“下拉頁面”類型，它創建WordPress頁面的下拉列表。

但這不是全部。實際上還有幾個，但因為它們是如此習俗，它們被宣布不同。這是我們在ya上獲得所有面向對象的地方......

$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是一個擴展內置WP_Customize_Control類的類。它將色輪爵士樂添加到需要選擇顏色的地方。請注意，這里的類是使用new創建的，因此它必須直接傳遞給它的$ wp_customize，因此它知道在哪里掛鉤。（注意：這可能會在最終的3.4版本之前發生變化。）

其他控制措施：

WP_Customize_Upload_Control - 這為您提供了一個允許文件上傳的上傳框。但是，您可能不會直接使用它，您可以將其擴展為其他內容...例如：
WP_Customize_Image_Control - 這給出了圖像選擇器和上傳器框。它擴展了上傳控制器。您可以在自定義背景片上看到它，用戶可以將新文件上傳為背景圖像。
WP_Customize_Header_Image_Control - 由于頭文件的大小調整操作，它需要一些特殊處理和顯示，因此WP_Customize_Header_Image_Control擴展了WP_Customize_Image_Control以添加該功能。您可以在自定義標題片上看到它，用戶可以將新文件上傳為標題圖像。

因此，創建自定義控制器以執行任何操作的方法是創建自己的新類，它擴展了WP_Customize_Control并添加了您想要的位。如何做到這一點有點復雜，所以我將保存為另一個教程。目前，您已經擁有圖像處理，色輪，文本框，收音機，下拉菜單和復選框。我認為應該足夠開始。

教程結束？

不完全的。我上面所做的一切都足以向定制器中添加新的部分，將控件放入其中，然后在頁面刷新后稍微延遲后讓預覽顯示您的更改。您所要做的就是在適當的位置使用適當的參數調用這些函數，它將起作用。

但請注意，我說“當頁面刷新時”......來吧......這是2012年。我們沒有飛行汽車，我們還要等一兩秒鐘？

不。

輸入postMessage

回到我提到$ wp_customize-> add_setting函數調用時，我提到“再多一點”。再多一點是稱為“運輸”的選項。

傳輸定義設置更改從您將其更改為預覽窗格的位置。默認設置為“刷新”。另一種設置名為“postMessage”。

postMessage傳輸使得設置立即發送到另一幀，javascript可以使用這些新信息即時調整頁面。

一個例子：

假設我們有一個設置來改變標題的顏色。頁面上的所有標題都在某些標簽中，或許有一類字幕。該選項通常只保存所選的HTML顏色，然后在header.php中輸出一些內聯CSS基本上這樣做：

.posttitle {
????color: #abcdef;
}

或者無論該顏色實際上是什么選項。

我們已經將我們的設置掛鉤到該選項，并將我們的WP_Customize_Color_Control掛鉤到它，現在當我們更改它時，它可以工作，我們可以看到顏色變化。請注意，這對于已經正常工作的自定義程序選項來說是最容易的，因此最好的方法是首先使其正常工作，然后再添加下一位。

現在，我們在自定義程序中有工作選項，因此為了消除刷新延遲，我們將這個新選項添加??到add_setting調用：

'transport'???????? => 'postMessage',

這告訴定制器該設置將通過javascript直接發送到幀。但是，要使該設置生效，我們需要在框架中使用javascript來接收它。

所以，回到我們的主要功能......還記得嗎？它開始是這樣的：

add_action( 'customize_register', 'themename_customize_register' );
function themename_customize_register($wp_customize) {
????// ... do stuff ...

在該函數結束時，我們將添加以下代碼：

if ( $wp_customize->is_preview() && ! is_admin() )
????add_action( 'wp_footer', 'themename_customize_preview', 21);

這將為我們的預覽框架的頁腳添加一個新的函數調用。它只會添加預覽框，因此實時網站和其他人不會看到它，因為他們不需要看到它。這是我們將輸出我們的javascript以實現實時發生的地方。

這是我們的功能：

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'是設置的名稱，由$ wp_customize-> add_setting調用添加。
以jQuery（'.posttitle'）開頭的整行是我們的自定義代碼。它獲取“to”變量，它將是用戶選擇的顏色，并使用jquery的css修改功能將頁面上的字幕設置為具有該顏色。

那些是你需要改變的唯一兩個，真的。剩下的就是漂亮的意大利面。對于每個實時設置，您可以在腳本中填寫這段代碼。

這是另一回事：您可以將預先存在的刷新設置更改為postMessage。例如，在“標題”部分中獲取“站點標題”和“標語”元素。這些是刷新設置，原因是每個主題以不同方式實現它們。核心無法知道任何特定主題所需的javascript代碼。

但如果你是一個主題作者，那么你就不是在寫一個通用主題。你是為你的特定主題而寫的。您知道如何顯示網站標題和標語。沒有理由你不能實時進行這些更新。當你在它的時候，header_textcolor設置也可以是實時的，因為你知道主題代碼。

在您的main函數中，添加以下三行代碼：

$wp_customize->get_setting('blogname')->transport='postMessage';
$wp_customize->get_setting('blogdescription')->transport='postMessage';
$wp_customize->get_setting('header_textcolor')->transport='postMessage';

這會將這些核心設置上的傳輸更改為postMessage。現在您需要添加javascript代碼以實際在主題中進行刷新。這是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更改標記。對于那些顏色，它只是針對它們并改變它們的CSS。

Core必須嘗試在所有主題中都是通用的。但是主題更多地了解它們的工作方式，并且能夠以更好的方式改變目標。添加控件的主題知道這些控件會發生什么變化，所以如果它像CSS一樣簡單，甚至像HTML這樣復雜的東西，如果你可以編寫javascript代碼來實時修改，那么你可以使用postMessage并消除刷新延遲。

希望這能解釋一些主題定制器。它像泥一樣清澈嗎？看看我對Twenty Eleven的補丁，將現有選項屏幕中的一些主題選項添加到定制器中。您可以在此門票上找到它：http：//core.trac.wordpress.org/ticket/20448。