创建WordPress后台选项界面（一）

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选项界面，内容如同我们在第二步函数中定义的那样

总结

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

示例代码下载

[download id=38]

继续阅读：创建WordPress后台选项界面（二）—— 保存数据