WordPress Customize API - 添加第一个自定义选项

允许用户修改和配置主题选项,同时还为他们提供这些更改的实时预览。WordPress Settings API旨在为主题开发人员提供一个标准界面,供他们在主题内提供自定义选项时使用

这个WordPress Customize API是wordpress自带的为开发者准备的一套API,通过这个,wordpress开发者们可以开发出不同的主题或是插件设置选项,方便您的主题用户自定义主题。那么这样一个东西该如何使用呢?这一节的wordpress开发教程我们就一起来交流下。

WordPress Customize API - 添加第一个自定义选项-Npcink
背景图片

介绍:

WordPress定制器允许用户修改和配置主题选项,同时还为他们提供这些更改的实时预览。定制程序旨在为主题开发人员提供一个标准界面,供他们在主题内提供自定义选项时使用。

首先,你现在一定比较懵,没关系,我们先看看这个所谓的WordPress Customize API可以做哪些事情吧,下面这张图是我制作的一个例子:

如果你开发的wordpress主题需要的功能不多,那么这些选项足够我们使用了。

正文开始:

我们先明白一些概念,面板、节、设置和控件,他们的关系类似这样:

WordPress Customize API - 添加第一个自定义选项-Npcink
WordPress Settings API - 面板、节、设置和控件关系图

面板

面板展示在自定义面板的首页,也就是这里:

WordPress Customize API - 添加第一个自定义选项-Npcink
WordPress Settings API - 面板

那么,什么是节呢?根据上图可知,节在面板下面,如图:

WordPress Customize API - 添加第一个自定义选项-Npcink
WordPress Settings API - 节

那么设置和控件呢?

设置和控件是在一起的好搭档,可以这么理解,“设置”先挖洞,然后“控件”把“功能”,埋进去,一个“设置”只能挖一个洞,而一个控件只能把一个功能埋进去。这就是设置与控件间的关系了。

设置和控件是在节的下面,而且设置和控件是待在一起的。说了那么多,来实战吧。

实战

以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 - 添加第一个自定义选项-Npcink
WordPress Settings API - 节和控件

到这里为止,您已经知道了WordPress Customize API的面板、节、设置和控件之间的关系,知道了如何跟着教程做出一个设置出来并调用了,那么上面中添加的代码都有啥用呢?迫于篇幅就不在此处提及,请看下文。

推荐:

这个原生设置框架优点是体积小,轻量,能用,如果您需要更加丰富和专业的功能,那么您可以尝试这款wordpress设置框架:

WordPress Customize API - 添加第一个自定义选项-Npcink
WordPress Customize API - 添加第一个自定义选项-Npcink

Kirki - wordpress设置框架

WP开发

添加小铅笔 -WordPress Customize API

2020-4-9 21:51:50

WP开发

怎么删除wp_head多余的代码? - wordpress开发

2020-4-11 16:48:26

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索