主题、插件设置页面的标准 API 接口应用 (二)

评论(2)

WordPress 的后台标准接口为我们简化了很多输入输出的处理,基本上每项设置都可以以钩子的形式挂载到你设定的配置页上,之前在《主题、插件设置页面的标准 API 接口应用 (一)》中说到,要将整理的代码共享出来,那就闲话少说直接上代码:

后台添加设置页面代码

整个设置页面的注册函数

function xz_theme_options_add_page() {
	$theme_page = add_theme_page(
		'主题设置',   //页面Titlee
		'主题设置',   // 在后台菜单中显示的名字
		'edit_theme_options',// 选项放置的位置
		'theme_options', // 别名,也就是get传送的参数
		'xz_theme_op_page' //显示内容调用的函数
	);
 
	if ( ! $theme_page )
		return;
 
	//在设置页面挂载帮助菜单
	//下面有xz_help()函数的定义
	add_action( "load-$theme_page", 'xz_help' );
}
add_action( 'admin_menu', 'xz_theme_options_add_page' );

用于设置页面显示回调函数

设置页面的总设置函数,当然你也可以设置在表单之外的显示内容,
比如说你得一些牢骚话…….
对本部分代码不熟悉的朋友,可以先阅读一下我的另一篇文章,《add_theme_page()函数-添加你的主题设置菜单

function xz_theme_op_page (){
	echo "我是主题编辑页面<br />";
	settings_errors();
			?><form method="post" action="options.php">
			<?php
				//与register_setting中第一个参数对应
				settings_fields( 'xiangzi_option' ); 
 
				//打印设置内容与add_settings_section最后参数对应
				do_settings_sections( 'theme_options' );
 
				submit_button();//保存按钮
			?>
		</form><?php
}

加载帮助菜单栏

添加帮助菜单的函数,如果你觉得本部分有点突兀,你可以先参考一下我的另一篇文章《get_current_screen() 函数详解》,该文详细阐述了WordPress 帮助菜单的挂在机制。

function xz_help (){
	$help = '这里是帮助中间位置显示的内容
			<ol><li>A</li><li>B</li>
			<li>C</li><li>D</li></ol>';
 
	$sidebar = '这里是帮助右边栏显示的位置';
 
	$screen = get_current_screen();//第一主角,获得对象
		$screen->add_help_tab( array(//用成员方法注册帮助Tab
			'title' => '翔子主题帮助',//左边栏标签的名字
			'id' => 'theme-options-help',//不解释
			'content' => $help,//设定标签对应的内容
			)
		);
		$screen->set_help_sidebar( $sidebar );
}

添加设置页面中的设置选项

有了本部分代码,构建一个提交的选项组变的轻松+愉快,
以下代码块为本文灵魂部分。

function xz_theme_options_init() {
	$xiangzi_theme_options = xz_get_theme_options();
	// If we have no options in the database, let's add them now.
 
	register_setting(
		'xiangzi_option',       //设置的组名称
		'xiangzi_theme_op', // get_option 的设置名称
		'xz_theme_options_show' // 回调函数名,主要被用于过滤我们后台得到的设置
	);
 
	// 注册设置单元
	add_settings_section(
		'general', // 设置单元别名
		'设置 I', // 后台显示的名称
		'__return_false', //设置组的回调函数,__return_false 就是什么都不做
		'theme_options' // 想要显示的页面
	);
	//我们再来一次,让你明白其中意义
	add_settings_section(
		'xiangzi', 
		'设置 II', 
		'__return_false', 
		'theme_options' 
	);
	// 每一个设置项的设置
	add_settings_field(
		// get_option 中第二维数组的key值 该设置设定了该值位于xiangzi_theme_op['color']
		'color', 
		'Color', // 要在后台显示的名称
		'xz_color', //回调函数,实际上是用来显示后台设置
		'theme_options', // 想要显示的页面
		'general' // 属于哪个设置组
	);
 
	add_settings_field( 'feed', 'RSS 地址', 'xz_feed', 'theme_options', 'general' );
 
	//注意以下两个add_settings_field 和上两个的不同
	add_settings_field( 'ad1',     '广告位 I', 'xz_ad1',     'theme_options', 'xiangzi' );
	add_settings_field( 'ad2',     '广告位 II', 'xz_ad2',     'theme_options', 'xiangzi' );
}
//最后将以上动作注册到后台
add_action( 'admin_init', 'xz_theme_options_init' );

设置输入值的过滤

过滤用户输入,是必须要做的事情之一。

function xz_theme_options_show($input){
	//用于过滤输入值的回调函数
	//这里我们可以做很多
	//但因为是演示所以简化直接返回得到的值
	return $input;
}

选项html代码构建函数

这里没什么可说的,以下都是设置中用到的用于显示选项的回调函数

function xz_color (){
	$option = xz_get_theme_options();
	?>
	<div id="xzcolor"><label class="text"><input type="text" name="xiangzi_theme_op[color]" value="<?php echo esc_attr($option['color']); ?>" id="iptcolor"/></label></div>
	<?php
}
function xz_feed (){
	$option = xz_get_theme_options();
	?>
	<div id="xzcolor"><label class="text"><input type="text" name="xiangzi_theme_op[feed]" value="<?php echo esc_attr($option['feed']); ?>" id="iptfeed"/></label></div>
	<?php
}
function xz_ad1 (){
	$option = xz_get_theme_options();
	?>
	<div id="xzcolor"><label class="text"><input type="text" name="xiangzi_theme_op[ad1]" value="<?php echo esc_attr($option['ad1']); ?>" id="iptad1"/></label></div>
	<?php
}
function xz_ad2 (){
	$option = xz_get_theme_options();
	?>
	<div id="xzcolor"><label class="text"><input type="text" name="xiangzi_theme_op[ad2]" value="<?php echo esc_attr($option['ad2']); ?>" id="iptad2"/></label></div>
	<?php
}

其他的附属函数

与添加设置页面无关,但为了简化代码,所以对get_option做了一下封装。
对get_option函数的应用,也许你可以参考一下:《get_option() 函数使用技巧

function xz_get_theme_options() {
	$default_theme_options = array(
		'color' => 'light',
		'feed'   => 'http://feed.pangbu.com/',
		'ad1' => 'Google AD',
		'ad2' => 'BaiDu AD'
	);
	return get_option( 'xiangzi_theme_op', $default_theme_options );
};

总结

虽然添加一个后台设置页面,看似需要有很多函数之间配合,
但总比你自己设计表单要来的简单的多,
其实如果你不需要帮助菜单的话,你可以把该部分代码去掉,
而且利用了标准的api接口我们可以更好的过滤输入数值,
让整个代码看起来更有层次感,而且在日后wordpress 升级的时候我们的主题扩展性会更好一点。
本文所有的代码组合可直接加入你的functions.php文件中,后台会直接被挂载一个设置页面,
至于具体效果,请在本地自己演示一下吧。





  1. $theme_page = add_theme_page(
    ‘主题设置’, //页面Titlee
    ‘主题设置’, // 在后台菜单中显示的名字
    ‘edit_theme_options’,// 选项放置的位置
    ‘theme_options’, // 别名,也就是get传送的参数
    ‘xz_theme_op_page’ //显示内容调用的函数
    );

    这个edit_theme_options这里的注释看官方给出的解释是”$capability”权限?

  2. Pingback: 主题、插件设置页面的标准 API 接口应用 (一) | 主题 - WordPress