添加小铅笔 -WordPress Customize API

为自己的WordPress Settings API设置添加小铅笔,方便用户使用主题设置。

我们使用WordPress Settings 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' ),
		'description' => __( 'Npcink出品', 'npcink' ),
		'priority'    => 30,
		'capabitity'  => 'edit_theme_options',
	) );

	//添加文本设置节,ID = npcink_sections_text
	$wp_customize->add_section('npcink_sections_text',
	array(                
		'title'     => '文本设置',
		'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' );

保存上面的代码,我们就可以在网站后台 → 外观 → 自定义中看到我们添加的新选项:添加小铅笔演示。

为了方便看到演示效果,我们在主题根目录下的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>

注意这里的 class :1-1、1-2

效果如下图:

添加小铅笔 -WordPress Customize API

代码解释:

如果您阅读了我之前发布的文章,那么在这里您需要注意这几点:

一:

在做效果演示时我给dd标签添加了CSS,分别是1-1、1-2,这将有助于接下来的小铅笔进行定位。

二:

我新添加了一段if判断语句:

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

简化后为:

	if ( isset( $wp_customize->selective_refresh ) ) {

	$wp_customize->selective_refresh->add_partial( '控件ID', array(
		'selector'        => '添加的CSS',
		'render_callback' => 'xxx_控件ID',
	) );
		
	}

这一段的意思就是给指定的CSS处添加小铅笔。

以上代码均可正常使用,但其具体实现原理我是一概不知,仅供参考,如果能够帮助到您那是最好啦。

举一反三,相信你已经知道了如何添加小铅笔了,如果你还有疑问的话,欢迎在评论区留言交流。

补充(参考):

你搜callback 里的函数
没有那个是不起作用的添加小铅笔 -WordPress Customize API
这个callback 是要返回修改后前端展示的结果的

基于 留的class 找元素直接替换内容
你文章没提这个 
别人只写个函数名 啥作用没有

这个  render_callback  跟 id 没半毛钱关系

完全是可以 自定义命名的

网站

站长平台

2018-7-31 12:22:09

innerHTML、outerHTML、innerText、outerText的用法与区别 - js笔记

2020-5-9 1:58:24

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