這個WordPress Customize API是wordpress自帶的為開發者準備的一套API,通過這個,wordpress開發者們可以開發出不同的主題或是插件設置選項,方便您的主題用戶自定義主題。那么這樣一個東西該如何使用呢?這一節的wordpress開發教程我們就一起來交流下。

介紹:
WordPress定制器允許用戶修改和配置主題選項,同時還為他們提供這些更改的實時預覽。定制程序旨在為主題開發人員提供一個標準界面,供他們在主題內提供自定義選項時使用。
首先,你現在一定比較懵,沒關系,我們先看看這個所謂的WordPress Customize API可以做哪些事情吧,下面這張圖是我制作的一個例子:

如果你開發的wordpress主題需要的功能不多,那么這些選項足夠我們使用了。
正文開始:
我們先明白一些概念,面板、節、設置和控件,他們的關系類似這樣:

面板
面板展示在自定義面板的首頁,也就是這里:

節
那么,什么是節呢?根據上圖可知,節在面板下面,如圖:

那么設置和控件呢?
設置和控件是在一起的好搭檔,可以這么理解,“設置”先挖洞,然后“控件”把“功能”,埋進去,一個“設置”只能挖一個洞,而一個控件只能把一個功能埋進去。這就是設置與控件間的關系了。
設置和控件是在節的下面,而且設置和控件是待在一起的。說了那么多,來實戰吧。
實戰
以wordpress自帶的2019主題為例子,在2019主題根目錄下的functions.php
文件的<?
下面添加以下代碼:
//添加自定義設置選項
function npcink_customize_register( $wp_customize ) {
//給相關設置項目加小鉛筆
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',
) );
}
//-----------------------------------------------------------------------------
//添加主題設置面板,ID = npcink_options
$wp_customize->add_panel( 'npcink_options',
array(
'title' => __( '我是面板 - Npcink', 'npcink' ),
'description' => __( 'Npcink首發,Muze原創', 'npcink' ),
'priority' => 30,
'capabitity' => 'edit_theme_options',
) );
//添加文本設置節,ID = npcink_sections_text
$wp_customize->add_section('npcink_sections_text',
array(
'title' => '節 - Npcink',
'description' => '主題的文本設置',
'panel' => 'npcink_options',
) );
//文字設置:one,ID = npcink_sections_text_one
$wp_customize->add_setting('npcink_sections_text_one',
array(
'default' => 'Npcink 榮譽出品',
)
);
$wp_customize->add_control('npcink_sections_text_one',
array(
'label' => '文本設置:One',
'section' => 'npcink_sections_text',
'type' => 'text',
)
);
//文字設置:two,ID = npcink_sections_text_two
$wp_customize->add_setting('npcink_sections_text_two',
array(
'default' => 'Npcink 榮譽出品',
)
);
$wp_customize->add_control('npcink_sections_text_two',
array(
'label' => '文本設置:Two',
'section' => 'npcink_sections_text',
'type' => 'text',
)
);
}
add_action( 'customize_register', 'npcink_customize_register' );
保存上面的代碼,我們就可以在網站后臺 → 外觀 → 自定義中看到我們添加的新選項:我是面板 - Npcink。
為了方便看到演示效果,我們在主題根目錄下的header.php
文件底部添加以下代碼:
<dl style="padding: 1em;">
<dd class="1-1">1-1:<?php echo get_theme_mod( 'npcink_sections_text_one', 'Npcink榮譽出品' ); ?></dd>
<dd class="1-2">1-2:<?php echo get_theme_mod( 'npcink_sections_text_two', 'Npcink榮譽出品' ); ?></dd>
</dl>
保存上面的代碼,刷新下自定義,您就可以在自定義中看到這個效果:

到這里為止,您已經知道了WordPress Customize API的面板、節、設置和控件之間的關系,知道了如何跟著教程做出一個設置出來并調用了,那么上面中添加的代碼都有啥用呢?迫于篇幅就不在此處提及,請看下文。
推薦:
這個原生設置框架優點是體積小,輕量,能用,如果您需要更加豐富和專業的功能,那么您可以嘗試這款wordpress設置框架: