WordPress后台选项是我们定制站点的重要方法,本文介绍如何在设置(Settings)菜单下创建一个简单的后台界面

创建后台界面,要分三步走:

  1. 创建一个function,用来输出界面的HTML结构
  2. 创建一个function,将后台选项界面的菜单链接加入到WordPress后台菜单,在本例中,要加入到设置菜单下
  3. 用Hook功能将上述两个function链入WordPress的执行过程

在创建后台管理界面之前,让我们先来创造一个需要后台界面的理由,比如一个将评论cc(Carbon Copy 即抄送)到某个邮箱的插件

Step 1. 创建CC Comment插件

在plugins目录下创建文件cc_comment.php,填写插件声明和插件功能函数。

<?php
/*
Plugin Name: CC Comment Plugin
Description: This plugin sends an email when a comment is made.
*/

function cc_comment() {
	global $_REQUEST;
	
	$to = 'name@domain.com';
	$subject = 'New comment posted @ your blog ' . $_REQUEST['subject'];
	$message = 'Message from ' . $_REQUEST['name'] . ' at email ' . $_REQUEST['email'] . 
				': \n' . $_REQUEST['comments'];
	wp_mail($to, $subject, $message);
}

add_action('comment_post', 'cc_comment');

这个函数没做什么复杂的事,只是当文章有新评论时,将评论内容抄送给name@domain.com这个邮箱

Step 2. 创建输出后台管理界面的函数

在cc_comment.php中继续写

function cccomm_option_page() {
	?>
	<div class="wrap">
		<?php screen_icon(); ?>
		<h2>CC Comments Options </h2>
		<p>Welcome to CC Comments plugin, here you can edit the email(s) to CC your comments to. </p>
	</div>
	<?php
}

创建一个函数,输出HTML结构,用?>符号结束php,并用<?php重新开启php,这样就可以在两个符号中间直接写HTML代码。

首先用<div class="wrap"></div>包裹我们的内容,wrap是WordPress预定义的class。

screen_icon()函数输出标题旁边的图标,图标是什么将取决于我们将页面菜单置于哪个顶级菜单下。

Step 3. 创建函数,将选项菜单添加到顶级菜单“设置(Settigns)”下

function cccomm_plugin_menu() {
	add_options_page('CC Comments Settings', 'CC Comments', 'manage_options', 'cc-comments-plugin','cccomm_option_page' );
}

WordPress预定义了向各个顶级菜单添加子菜单的函数,向设置菜单下添加子菜单的函数为add_options_page

add_options_page()函数需要我们告诉它几件事,才能工作:

  • 该菜单选项页面标题,这里是CC Comments Settings
  • 菜单标题,CC Comments
  • 查看选项页面的用户必须具备的权限,这里用manage_options,意为只有管理员可以查看
  • 给菜单一个slug,或者说id,这样才能和其他菜单区分开,这里是cc-comments-plugin
  • 最后,需要告诉他用哪个函数产生选项页面的HTML结构,也就是步骤2中定义的cccomm_option_page

Step 4. 用hook将菜单加入

经过前三个步骤,我们在后台还看不到任何变化,因为这些功能刚刚被定义,并没有真正的加入到WordPress的执行过程中。要加入,需要将函数钩到hook中,这个hook简单如下

add_action( 'admin_menu', 'cccomm_plugin_menu' );

至此,我们可以刷新后台界面,并看到设置菜单下多了一项CC Comments,打开该项,可以看到在第二部中定义的HTML内容

cc-comments 菜单
设置菜单下出现CC Comments链接

cc comments选项界面
cc comments选项界面,内容如同我们在第二步函数中定义的那样

总结

本例展示了一个最简单的后台界面的制作方式,不涉及数据保存更新等问题,这些将在后面的文章中介绍。后台界面长什么样子,由第二步决定,复杂与否简单与否,都不过是第二步的HTML代码不同罢了。

示例代码下载

CC Comments-演示创建后台界面 已下载 286 次

继续阅读:创建WordPress后台选项界面(二)—— 保存数据

5条留言

    1. 你的名字让我觉得你更喜欢水箱

评论功能已关闭