這個(gè)WordPress Customize API是wordpress自帶的為開發(fā)者準(zhǔn)備的一套API，通過這個(gè)，wordpress開發(fā)者們可以開發(fā)出不同的主題或是插件設(shè)置選項(xiàng)，方便您的主題用戶自定義主題。那么這樣一個(gè)東西該如何使用呢？這一節(jié)的wordpress開發(fā)教程我們就一起來交流下。
介紹：
WordPress定制器允許用戶修改和配置主題選項(xiàng)，同時(shí)還為他們提供這些更改的實(shí)時(shí)預(yù)覽。定制程序旨在為主題開發(fā)人員提供一個(gè)標(biāo)準(zhǔn)界面，供他們?cè)谥黝}內(nèi)提供自定義選項(xiàng)時(shí)使用。
首先，你現(xiàn)在一定比較懵，沒關(guān)系，我們先看看這個(gè)所謂的WordPress Customize API可以做哪些事情吧，下面這張圖是我制作的一個(gè)例子：
如果你開發(fā)的wordpress主題需要的功能不多，那么這些選項(xiàng)足夠我們使用了。
正文開始：
我們先明白一些概念，面板、節(jié)、設(shè)置和控件，他們的關(guān)系類似這樣：
面板
面板展示在自定義面板的首頁，也就是這里：
節(jié)
那么，什么是節(jié)呢？根據(jù)上圖可知，節(jié)在面板下面，如圖：
那么設(shè)置和控件呢？
設(shè)置和控件是在一起的好搭檔，可以這么理解，“設(shè)置”先挖洞，然后“控件”把“功能”，埋進(jìn)去，一個(gè)“設(shè)置”只能挖一個(gè)洞，而一個(gè)控件只能把一個(gè)功能埋進(jìn)去。這就是設(shè)置與控件間的關(guān)系了。
設(shè)置和控件是在節(jié)的下面，而且設(shè)置和控件是待在一起的。說了那么多，來實(shí)戰(zhàn)吧。
實(shí)戰(zhàn)
以wordpress自帶的2019主題為例子，在2019主題根目錄下的functions.php文件的<?下面添加以下代碼：
//添加自定義設(shè)置選項(xiàng)
function npcink_customize_register( $wp_customize ) {
//給相關(guān)設(shè)置項(xiàng)目加小鉛筆
if ( isset( $wp_customize->selective_refresh ) ) {
//One
$wp_customize->selective_refresh->add_partial( 'npcink_sections_text_one', array(
'selector' => '.1-1',
'render_callback' => 'lifet_customize_partial_npcink_sections_text_one',
) );
//Two
$wp_customize->selective_refresh->add_partial( 'npcink_sections_text_two', array(
'selector' => '.1-2',
'render_callback' => 'lifet_customize_partial_npcink_sections_text_two',
) );
}
//-----------------------------------------------------------------------------
//添加主題設(shè)置面板，ID = npcink_options
$wp_customize->add_panel( 'npcink_options',
array(
'title' => __( '我是面板 - Npcink', 'npcink' ),
'description' => __( 'Npcink首發(fā)，Muze原創(chuàng)', 'npcink' ),
'priority' => 30,
'capabitity' => 'edit_theme_options',
) );
//添加文本設(shè)置節(jié)，ID = npcink_sections_text
$wp_customize->add_section('npcink_sections_text',
array(
'title' => '節(jié) - Npcink',
'description' => '主題的文本設(shè)置',
'panel' => 'npcink_options',
) );
//文字設(shè)置:one，ID = npcink_sections_text_one
$wp_customize->add_setting('npcink_sections_text_one',
array(
'default' => 'Npcink 榮譽(yù)出品',
)
);
$wp_customize->add_control('npcink_sections_text_one',
array(
'label' => '文本設(shè)置：One',
'section' => 'npcink_sections_text',
'type' => 'text',
)
);
//文字設(shè)置:two，ID = npcink_sections_text_two
$wp_customize->add_setting('npcink_sections_text_two',
array(
'default' => 'Npcink 榮譽(yù)出品',
)
);
$wp_customize->add_control('npcink_sections_text_two',
array(
'label' => '文本設(shè)置：Two',
'section' => 'npcink_sections_text',
'type' => 'text',
)
);
}
add_action( 'customize_register', 'npcink_customize_register' );保存上面的代碼，我們就可以在網(wǎng)站后臺(tái) → 外觀 → 自定義中看到我們添加的新選項(xiàng)：我是面板 – Npcink。
為了方便看到演示效果，我們?cè)谥黝}根目錄下的header.php文件底部添加以下代碼：
<dl style="padding: 1em;">
<dd class="1-1">1-1：<?php echo get_theme_mod( 'npcink_sections_text_one', 'Npcink榮譽(yù)出品' ); ?></dd>
<dd class="1-2">1-2：<?php echo get_theme_mod( 'npcink_sections_text_two', 'Npcink榮譽(yù)出品' ); ?></dd>
</dl>保存上面的代碼，刷新下自定義，您就可以在自定義中看到這個(gè)效果：
到這里為止，您已經(jīng)知道了WordPress Customize API的面板、節(jié)、設(shè)置和控件之間的關(guān)系，知道了如何跟著教程做出一個(gè)設(shè)置出來并調(diào)用了，那么上面中添加的代碼都有啥用呢？迫于篇幅就不在此處提及，請(qǐng)看下文。
推薦：
這個(gè)原生設(shè)置框架優(yōu)點(diǎn)是體積小，輕量，能用，如果您需要更加豐富和專業(yè)的功能，那么您可以嘗試這款wordpress設(shè)置框架：
