# 5.1 顶级菜单和子菜单

管理菜单是 WordPress 后台左侧显示的后台管理功能菜单,可以让我们为插件或主题添加自定义设置选项页面。

顶级菜单在 WordPress 后台左侧显示,可以包含一组子菜单。插件需要添加顶级菜单还是子菜单,可以根据最终用户需求确定。

# 5.2 顶级菜单

添加一个顶级菜单

如果我们需要添加顶级菜单到 WordPress 后台,可以使用 add_menu_page() 函数。

.e.g.

比如,我们需要添加一个名为 “电影” 的顶级菜单。

第一步,我们需要创建一个输出 HTML 的函数,在这个函数中,我们会执行必要的安全检查,并使用 设置 API 显示我们注册选项。

<?php
function mla_options_page_html() {
   // 检查用户能力
   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
         // 输出已注册设置 mla_options 的安全字段 
         settings_fields('mla_options');
         // 输出设置组及其字段
         do_settings_sections('mla');
         // 输出应用设置按钮
         submit_button('应用');
         ?>
        </form>
    </div>
   <?php
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

第二步,把上面生成 HTML 的函数挂载到 admin_menu Action 钩子上面。

<?php
function mla_options_page() {
   add_menu_page(
      '我的电影主页',
      '我的电影',
      'manage_options',
      'mla_movies',
      'mla_options_page_html',
      'dashicons-admin-settings', //或者使用 plugin_dir_url(__FILE__) . 'images/icon_wporg.png'
      20
   );
}
add_action('admin_menu', 'mla_options_page');
1
2
3
4
5
6
7
8
9
10
11
12
13

使用 PHP 创建 HTML

可移植代码的最佳实践是创建一个需要包含文件的回调函数。为了完整性和帮助理解遗留代码,我们将使用另外一种方法注册菜单:把一个文件路径作为参数传递。

<?php
function mla_options_page() {
   add_menu_page(
      '我的电影主页',
      '我的电影',
      'manage_options',
      'mla_movies',
      plugin_dir_path(__FILE__) . 'admin/view.php',
      null,
      'dashicons-admin-settings', //或者使用 plugin_dir_url(__FILE__) . 'images/icon_wporg.png'
      20
   );
}
add_action('admin_menu', 'mla_options_page');
1
2
3
4
5
6
7
8
9
10
11
12
13
14

删除顶级菜单

如果我们需要删除后台中已经注册的顶级菜单,可以使用 remove_menu_page() 函数

<?php
remove_menu_page(
    string $menu_slug
);
1
2
3
4
删除菜单不会阻止用户直接访问它们,永远不要采用这种操作来限制用户功能。

# 5.3 子菜单

如果我们需要添加一个子菜单到 WordPress 后台,使用 add_submenu_page() 函数。

<?php
add_submenu_page(
   string $parent_slug,
   string $page_title,
   string $menu_title,
   string $capability,
   string $menu_slug,
   callable $function = ''
);
1
2
3
4
5
6
7
8
9

.e.g

假设我们需要在 “工具” 顶级菜单中,添加一个子菜单:“MLA 设置”

第一步,我们将创建一个输出 HTML 的函数,在这个函数中,我们执行必要的安全检查,使用 设置 API 显示我们注册的选项。

<?php
function mla_options_page_html() {
   // 检查用户能力
   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
         // 输出已注册设置 mla_options 的安全字段 
         settings_fields('mla_options');
         // 输出设置组及其字段
         do_settings_sections('mla');
         // 输出应用设置按钮
         submit_button('应用');
         ?>
        </form>
    </div>
   <?php
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

第二步,把上面生成 HTML 的函数挂载到 admin_menu Action 钩子上。

<?php
function mla_options_page() {
   add_submenu_page(
      'tools.php',
      'mla Options',
      'mla Options',
      'manage_options',
      'mla',
      'mla_options_page_html'
   );
}
add_action('admin_menu', 'mla_options_page');
1
2
3
4
5
6
7
8
9
10
11
12

add_submenu_page 的相关参数,请参阅参考中的 add_submenu_page()

预定义子菜单

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

删除子菜单

删除子菜单的方法和删除顶级菜单是一样的。