WordPress“自定義”區(qū)域選項(xiàng)

WordPress本身有一個(gè)“自定義”的功能，這個(gè)在WEB主題公園所開發(fā)的一些主題中，相信使用過的朋友都有所了解，我們之前使用這個(gè)功能對(duì)網(wǎng)站進(jìn)行排版的可視化操作，可以說效果非常不錯(cuò)，給主題帶來了自由度非常高的編輯體驗(yàn)，并且實(shí)時(shí)顯示預(yù)覽，也大大簡(jiǎn)化了網(wǎng)站編輯在建立網(wǎng)站之初的排版，設(shè)置。

但是在“主題選項(xiàng)”中還有非常多的設(shè)置，是無法通過自定義可視化的功能進(jìn)行編輯的。

主題選項(xiàng)，是很多主題都會(huì)提供的一種額外的主題設(shè)置面板，這樣可以通過這些面板來設(shè)置許多主題獨(dú)有的功能。對(duì)于WordPress資深使用者來說，這種功能也許并不難以操作，但是對(duì)于絕大多數(shù)并沒有什么基礎(chǔ)的朋友來說，就顯得比較麻煩了。很容易出現(xiàn)網(wǎng)站上的功能找不到地方改，主題選項(xiàng)中的功能不知道是設(shè)置那兒的。這樣會(huì)耗費(fèi)一些時(shí)間來回切換，讓一些初學(xué)基礎(chǔ)的朋友對(duì)我們的客服訴苦（下圖：WEB主題公園所提供的主題選項(xiàng)面板）。

近期WEB主題公園團(tuán)隊(duì)在開發(fā)主題時(shí)，注意到官網(wǎng)的API有完整的“自定義”模式下的選項(xiàng)說明，所以開發(fā)了具有可視化編輯的自定義后臺(tái)。這樣的后臺(tái)能夠非常直觀的看到你所編輯的內(nèi)容實(shí)時(shí)刷新預(yù)覽，這樣你編輯的任何內(nèi)容都能夠知道對(duì)應(yīng)的地方。

如上圖的logo設(shè)置，以前的主題選項(xiàng)，我們只能上傳完成logo之后，去前臺(tái)刷新查看logo是否顯示正確，現(xiàn)在只需要在自定義中上傳，即可實(shí)時(shí)預(yù)覽到logo上傳之后的變化，讓你能夠及時(shí)調(diào)整。logo的上傳可能比較容易找到，一些比較小的設(shè)置，可能使用主題選項(xiàng)來回刷新，就比較耗費(fèi)時(shí)間了，在自定義中，只要修改了，就能預(yù)覽到變化，這樣是非?？旖莺透咝У模?/p>

調(diào)理清晰的設(shè)置分類（如下圖），自定義中，我們將各個(gè)設(shè)置的區(qū)域進(jìn)行分類擺放，調(diào)理清晰，想要設(shè)置那兒，點(diǎn)開這個(gè)項(xiàng)目進(jìn)行設(shè)置，目光集中在這一區(qū)域，顯然是高效并簡(jiǎn)單的，并且增加了編輯網(wǎng)站的樂趣：

使用官方API對(duì)自定義區(qū)域添加設(shè)置內(nèi)容

?這里我們簡(jiǎn)單說明一下自定義區(qū)域添加選項(xiàng)的功能，具體的功能在官網(wǎng)的API介紹中有著非常詳細(xì)的介紹，如果感興趣可以仔細(xì)閱讀官方文檔：http://codex.wordpress.org/Theme_Customization_API

一下內(nèi)容源于官方文檔資料，查看更詳細(xì)的文檔請(qǐng)進(jìn)入官方。

1.添加一個(gè)自定義區(qū)域的選項(xiàng)

$wp_customize函數(shù)是這個(gè)功能的核心，我們需要用一個(gè)鉤子吧自定義函數(shù)放進(jìn)這個(gè)區(qū)域里面

add_action('customize_register', 'your function name');

代碼如下：

function mytheme_customize_register( $wp_customize ) {
   //這里放你的選項(xiàng)設(shè)定
}
add_action( 'customize_register', 'mytheme_customize_register' );

選項(xiàng)的設(shè)定，通過下面的幾個(gè)方式進(jìn)行：

設(shè)置選項(xiàng)內(nèi)容: WP_Customize_Manager->add_setting()
設(shè)置選項(xiàng)區(qū)域（一個(gè)下拉框）: WP_Customize_Manager->add_section()
設(shè)置選項(xiàng)容器: WP_Customize_Manager->add_control()

一下是設(shè)置一個(gè)顏色選擇框的代碼：

$wp_customize->add_setting('themename_theme_options[link_color]', array(
'default'?????????? => '000',
'sanitize_callback' => 'sanitize_hex_color',
'capability'??????? => 'edit_theme_options',
'type'?????????? => 'option',

));

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

?

這樣你就能夠獲得一個(gè)顏色選項(xiàng)框：

以此你可以建立包括圖片上傳器、文件上傳器、文本輸入、下拉選框、單選框、框等操作的方式，將你的選項(xiàng)全額放進(jìn)你的主題自定義編輯中。

輸出你保存的設(shè)定，

$wp_customize->add_setting('themename_theme_options[link_color]', array(

上面的themename_theme_options[link_color]在數(shù)據(jù)庫中是存在數(shù)據(jù)庫中wp_options表?? 名稱為theme_mods_themename 的值中，會(huì)顯示關(guān)聯(lián)這個(gè)主題的很多信息。

你可以使用get_theme_mod()

進(jìn)行調(diào)用并輸出到網(wǎng)頁上。

你也可以直接使用建立新的名稱 如 mytheme_link_color 替代themename_theme_options[link_color]

這樣你就會(huì)得到一個(gè)單獨(dú)的設(shè)定mytheme_link_color

可以使用 get_options()來調(diào)用并輸出到網(wǎng)頁上。

總體來說，也就是將后臺(tái)選項(xiàng)換了一個(gè)方式進(jìn)行設(shè)置保存，并輸出到網(wǎng)頁上，過程也比較簡(jiǎn)單，看一下官網(wǎng)的文檔會(huì)非常清晰的了解整個(gè)建立的過程。

近期以及以后WEB主題公園發(fā)布的主題將會(huì)使用這一功能，希望大家能夠喜歡！