wordpress后台添加顶级菜单 add_menu_page()

在 wordpress 插件、主题等制作过程中,经常需要在后台添加菜单,今儿分享一下在 wordpress 后台侧边栏添加顶级菜单的方法,也算加深一下印象吧,用到的函数是:add_menu_page()

函数用法及参数说明

add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position );

下面说说各参数:

$page_title:(字符串) (必须) 这个参数是子菜单的标题,将会显示在浏览器的标题栏,默认为空;

$menu_title:(字符串) (必须) 显示的菜单名称,默认为空;

$capability:(字符串) (必须) 用户权限,定义了具有哪些权限的用户会看到这个子菜单(权限部分请看文章结尾处),默认为空,参照capability;

$menu_slug:(字符串) (必须) 显示在URl上面的菜单名称,默认为空;

$function:返回的方法名称;

$icon_url:(字符串) (可选) 显示的菜单图标,可以使用plugin_dir_url( __FILE__ ),图标宽高为16像素;

$position:(整数) (可选) 显示菜单的位置。常用位置,4或者59或者99。

函数返回值

返回菜单结果页面的hook。

(string) The resulting page's hook_suffix.

针对此返回值,可以实现一些应用,例如:WordPress如何只在插件管理页面调用CSS样式和JS脚本文件

示例

<?php

add_action('admin_menu', 'register_custom_menu_page');
function register_custom_menu_page() {
    add_menu_page('自定义菜单标题', '测试菜单', 'administrator', 'myplugin/myplugin-index.php','',plugins_url('myplugin/images/icon.png'), 6);
}

//然后将下面的代码放到myplugin/myplugin-index.php文件中
echo "Admin Page Test";


//或者使用下面方法

add_action('admin_menu', 'register_custom_menu_page');
function register_custom_menu_page(){
    add_menu_page('菜单标题', '菜单名称', 'administrator', 'custompage', 'custom_menu_page', plugins_url('myplugin/images/icon.png'), 6);
}

function custom_menu_page(){
    echo "Admin Page Test";
}

最后附上:各个用户角色所具有的权限,可以参看这个对应关系表:Capability vs. Role Table,横坐标是用户角色,纵坐标是用户权限,中间蓝色高亮部分为各个角色所拥有的权限。

在看另一个例子:

// YangAddMenuPage() 为 'admin_menu' 钩子的回调函数
function YangAddMenuPage() {
	// 第一个参数 'yang'为菜单名称
	// 第二个参数 'YANG'为菜单标题
	// 第三个参数 'manage_options' 参数为用户权限,'administrator' 为管理员权限
	// 第四个参数 __FILE__ 为本代码文件。
	// 'yangjunwei_toplevel_page' 参数用于调用yangjunwei_toplevel_page()函数,来显示菜单内容
	add_menu_page( 'yang', 'YANG', 'administrator', 'yang-menu', 'yangjunwei_toplevel_page' );
}

// yangjunwei_toplevel_page() 用于显示菜单的内容,填写菜单页面的HTML代码即可
function yangjunwei_toplevel_page() {
	echo '
<div class="wrap">
	<h2>使用帮助</h2>
	<p>这里是使用帮助,通过阅读本文你将了解本程序的使用!有事请<a href="#">与我联系</a></p>
</div>
	';
}

// 通过 add_action 来自动调用 YangAddMenuPage 函数
add_action('admin_menu', 'YangAddMenuPage');

小提示:创建顶级菜单后,如果再使用 添加子菜单时,会自动添加一个与顶级菜单同名的子菜单,想要修改此子菜单显示名称,可手动添加一个子菜单,将其在url中显示的字段设置与顶级菜单在URL中显示字段一致即可,看个小例子:

add_action('admin_menu', 'YAL_menu_page');
function YAL_menu_page() {
	add_menu_page( 'YangJunwei插件列表', 'YANG', 'administrator', 'yangjunwei.com', 'yangjunwei_intro' );
		add_submenu_page( 'yangjunwei.com', 'Yangjunwei插件开发', '老杨简介', 'administrator', 'yangjunwei.com', 'yangjunwei_intro' );//修改与顶级菜单同名子菜单,由“YANG”修改为“老杨简介”
		add_submenu_page( 'yangjunwei.com', 'Yang_Ajax_login 弹窗登录', 'AJAX 弹窗登录', 'administrator', 'Yang_Ajax_login', 'YAL_options' );
}
function yangjunwei_intro() { ?>
	<div class="wrap">
		<h2>老杨简介</h2>
		以下是简介内容……此处省略一万字……
	</div>
<?php }

函数返回值的拓展

函数返回菜单结果页面的hook,针对此返回值,可以实现一些应用,例如:WordPress如何只在插件管理页面调用CSS样式和JS脚本文件

需要将 add_menu_page 返回赋值给 $yjw_settings_page_hook

add_action('admin_menu', 'yjw_custom_menu_page');
function yjw_custom_menu_page(){
	global $yjw_settings_page_hook;
	$yjw_settings_page_hook = add_menu_page('菜单标题', '菜单名称', 'administrator', 'custompage', 'custom_menu_page', plugins_url('myplugin/images/icon.png'), 6);
}