WordPress插件开发——自定义管理菜单

WordPress

类型：CMS系统

简介：一款开源的内容管理系统（CMS），用于构建和管理网站。

在WordPress插件开发过程中经常需要添加自定义设置选项页面，一般位于WordPress后台左侧显示的后台管理功能菜单，包括顶级菜单和子菜单。顶级菜单在WordPress后台左侧显示，支持包含一组子菜单，是需要顶级菜单还是子菜单需要根据不同的用户需求决定。开发出来的自定义菜单选项一般位于设置或工具栏目下。

一、WordPress顶级菜单

使用add_menu_page()函数可以将顶级菜单添加到WordPress后台，以下是函数使用方法：

<?php
add_menu_page(
string $page_title,
string $menu_title,
string $capability,
string $menu_slug, 
callable $function = '',
string $icon_url = '',
int $position = null
);

下面展示详细的使用示例。例如我们需要添加一个名为“WPzzbaike”的顶级菜单，只需要创建一个输出HTML的函数，在函数中执行必要的安全检查，使用设置API显示我们的注册选项，相关示例如下：

<?php
function wpzzbaike_options_page_html() {
// check user capabilities
if (!current_user_can('manage_options')) {
return;
}
?>
<div class=wrap>
<h1><?= esc_html(get_admin_page_title()); ?></h1>
<form action=options.php method=post>
<?php
// output security fields for the registered setting wpzzbaike_options
settings_fields('wpzzbaike_options');
// output setting sections and their fields
// (sections are registered for wpzzbaike, each field is registered to a specific section)
do_settings_sections('wpzzbaike');
// output save settings button
submit_button('Save Settings');
?>
</form>
</div>
<?php
}

将以上生成的HTML函数挂载到 admin_menu Action 钩子上面。相关参考：《WordPress插件开发——钩子(Hooks)》。

<?php
function wpzzbaike_options_page() {
add_menu_page(
'wpzzbaike',
'wpzzbaike Options',
'manage_options',
'wpzzbaike',
'wpzzbaike_options_page_html',
plugin_dir_url(__FILE__) . 'images/icon_wpzzbaike.png',
20
);
}
add_action('admin_menu', 'wpzzbaike_options_page');

我们也可以使用PHP创建HTML，可以完整性的帮助理解遗留代码：把一个文件路径作为 $menu_slug 参数传递给 $function 参数。

<?php
function wpzzbaike_options_page()
{
add_menu_page(
'wpzzbaike',
'wpzzbaike Options',
'manage_options',
plugin_dir_path(__FILE__) . 'admin/view.php',
null,
plugin_dir_url(__FILE__) . 'images/icon_wpzzbaike.png',
20
);
}
add_action('admin_menu', 'wpzzbaike_options_page');

若需要删除已创建的顶级菜单，只需要使用remove_menu_page()执行以下代码：

remove_menu_page(
string $menu_slug
);

如果我们需要从WordPress后台删除“工具”这个顶级菜单，执行以下代码：

<?php
function wpzzbaike_remove_options_page(){
remove_menu_page(‘tools.php’);
}
add_action(‘admin_menu’, ‘wpzzbaike_remove_options_page’, 99);

删除之前需要确保已经注册了这个菜单，删除Action的优先级应该要比注册的低。

二、WordPress子菜单

在WordPress插件开发中，使用add_submenu_page()函数可以将子菜单添加到后台，代码如下：

<?php
add_submenu_page(
string $parent_slug,
string $page_title,
string $menu_title,
string $capability,
string $menu_slug,
callable $function = ''
);

如果我们需要在 “工具” 顶级菜单中，添加一个子菜单：“wpzzbaike设置”，首先需要创建一个输出的HTML函数，执行必须的安全检查，使用设置API显示注册选项，步骤和创建顶级菜单时比较像。建议使用一个div代码，用来装HTML的内容。

<?php
function wpzzbaike_options_page_html() {
// check user capabilities
if (!current_user_can('manage_options')) {
return;
}
?>
<div class=wrap>
<h1><?= esc_html(get_admin_page_title()); ?></h1>
<form action=options.php method=post>
<?php
// output security fields for the registered setting wpzzbaike_options
settings_fields('wpzzbaike_options');
// output setting sections and their fields
// (sections are registered for wpzzbaike, each field is registered to a specific section)
do_settings_sections('wpzzbaike');
// output save settings button
submit_button('Save Settings');
?>
</form>
</div>
<?php
}

再把上面生成HTML的函数挂载到admin_menu Action钩子上。

<?php
function wpzzbaike_options_page() {
add_submenu_page(
'tools.php',
'wpzzbaike Options',
'wpzzbaike Options',
'manage_options',
'wpzzbaike',
'wpzzbaike_options_page_html'
);
}
add_action('admin_menu', 'wpzzbaike_options_page');

另外，WordPress还内置了一些辅助函数，提前帮助我们设置好了$parent_slug 参数，只需使用相应的函数即可添加页面为我们需要的顶级菜单的子菜单。以下是 WordPress 为我们定义好的辅助函数。