01：讲透 WordPress 菜单开发 - 在菜单中添加 Tab 选项卡

本节详细介绍了在顶级菜单中实现 Tab 切换选项卡的每一步实现的思路，大家可以据此，写出在子菜单中添加 Tab 切换选项卡功能。

最后更新于 2025-06-06

本页目录9 节

在上一节中，我们学习了如何在 WordPress 中添加菜单的操作，包括顶级菜单、子菜单、默认菜单下的子菜单等。

相信你已经可以按照自己的实际需求添加菜单了。

本文主要解决如何在菜单中添加 Tab 选项卡的问题。

问题详解

若单一菜单中内容过多，加子菜单又嫌麻烦，可尝试添加本节介绍的 Tab 选项卡菜单。

他可以在当前页面中展示多个选项卡，可以很方便的在当前菜单页面中的各个 Tab 选项卡中进行切换，效果如下：

流程和帮助

流程如下

感谢以下文章的帮助

WordPress 设置 API，第 5 部分：设置的选项卡式导航 (tutsplus.com)

添加菜单

根据上一节的内容，我们先添加一个顶级菜单，在当前使用主题的 functions.php 文件底部添加以下内容

1
//创建一个Demo菜单
2
function demo_create_menu_page()
3
{
4
    add_menu_page(
5
        'Demo选项',                   // 此菜单对应页面上显示的标题
6
        'Demo',                      // 要为此实际菜单项显示的文本
7
        'administrator',             // 哪种类型的用户可以看到此菜单
8
        'demo_id',                   //  此菜单项的唯一ID（即段塞）
9
        'demo_menu_page_display',    // 呈现此页面的菜单时要调用的函数的名称
10
        'dashicons-smiley',          //图标 - 默认图标
11
        '600.1',                     //位置
12
    );
13
} // end vuespa_create_menu_page
14
add_action('admin_menu', 'demo_create_menu_page');
15

16
//Demo菜单的回调
17
function demo_menu_page_display()
18
{
19
?>
20
    <div class="wrap">
21
    Npcink
22
    </div><!--/wrap-->
23
<?php
24
}

接下来的内容，就是围绕这个菜单回调函数 demo_menu_page_display() 来操作的。

添加选项卡

WordPress 准备好了一套默认的样式，我们直接使用即可。在回调函数中添加以下内容

1
<h2 class="nav-tab-wrapper">
2
    <a href="?page=demo_id&tab=display_options" class="nav-tab">Display Options</a>
3
    <a href="?page=demo_id&tab=social_options" class="nav-tab">Social Options</a>
4
</h2>

这里，我们手动构造了两个选项卡和选项卡的链接，通过点击不同的选项卡，触发不同的链接。

注意 demo_id 部分，这里是用的顶级菜单的 slug 的，需要注意凭借这个，才能找到我们需要的内容

菜单切换

为了知道当前是哪个选项卡，我们需要添加以下函数

1
<?php
2
if( isset( $_GET[ 'tab' ] ) ) {
3
    $active_tab = $_GET[ 'tab' ];
4
} // end if
5
?>

编写一个条件来检查是否设置了查询字符串值，如果是，则将其存储在变量中。

然后，为了让用户知道当前所在的菜单，我们需要进行判断，

若当前的 Tab 的值是当前菜单，显示选中状态。
若当前的 Tab 的值不是当前菜单，显示未选中状态。

修改上面的选项卡内容

1
<h2 class="nav-tab-wrapper">
2
    <a href="?page=demo_id&tab=display_options" class="nav-tab <?php echo $active_tab == 'display_options' ? 'nav-tab-active' : ''; ?>">Display Options</a>
3
    <a href="?page=demo_id&tab=social_options" class="nav-tab <?php echo $active_tab == 'social_options' ? 'nav-tab-active' : ''; ?>">Social Options</a>
4
</h2>

WordPress 也提供了对应的样式，这里，我们通过三元运算符实现样式切换。

若当前链接显示的是当前菜单选项，则添加样式 nav-tab-active

然后，初次进入菜单时，我们是拿不到 Tab 选项内容的，此时，用户还没有点击我们构造的链接。

这里需要设置一个默认展示的菜单。

1
$active_tab = isset( $_GET[ 'tab' ] ) ? $_GET[ 'tab' ] : 'display_options';

这样，在初次进入菜单页面时，如果拿不到 Tab 的值，就展示菜单 display_options 的值。

内容切换

完成了菜单切换，我们还需要切换内容的显示，不同的菜单对应不同的内容。

我们添加以下代码

1
<?php
2
            //根据当前 Tab 展示对应内容
3
            if ($active_tab == 'display_options') {
4
            ?>
5
                <h3>Npcink 放置需要展示的内容</h3>
6
            <?php
7
            } else {
8
            ?>
9
                <h3>Npcink 放置准备展示的函数</h3>
10
            <?php
11
                //展示设置字段和设置节
12

13
            } // end if/else
14
?>

通过简单的 if 判断，就能根据不同的菜单 Tab 展示不同的内容了。

当然，若您有兴趣了解的话，可以查查什么是设置字段和设置节，

一般情况下，这块的内容应该是这样的

1
<form method="post" action="options.php">
2
            <?php
3
            //根据当前 Tab 展示对应内容
4
            if ($active_tab == 'display_options') {
5
            ?>
6
                <h3>Npcink 放置需要展示的内容</h3>
7
            <?php
8
                //展示设置字段和设置节
9
                settings_fields('sandbox_theme_display_options');
10
                do_settings_sections('sandbox_theme_display_options');
11
            } else {
12
            ?>
13
                <h3>Npcink 放置准备展示的函数</h3>
14
            <?php
15
                //展示设置字段和设置节
16
                settings_fields('sandbox_theme_social_options');
17
                do_settings_sections('sandbox_theme_social_options');
18
            } // end if/else
19

20
            //保存按钮
21
            submit_button();
22

23
            ?>
24
        </form>

完整代码

前面详细介绍了每一步的作用，这里给出完整代码，供大家参考

1
//创建一个Demo菜单
2
function demo_create_menu_page()
3
{
4
    add_menu_page(
5
        'Demo选项',                   // 此菜单对应页面上显示的标题
6
        'Demo',                      // 要为此实际菜单项显示的文本
7
        'administrator',             // 哪种类型的用户可以看到此菜单
8
        'demo_id',                   //  此菜单项的唯一ID（即段塞）
9
        'demo_menu_page_display',    // 呈现此页面的菜单时要调用的函数的名称
10
        'dashicons-smiley',          //图标 - 默认图标
11
        '600.1',                     //位置
12
    );
13
} // end vuespa_create_menu_page
14
add_action('admin_menu', 'demo_create_menu_page');
15

16
//Demo菜单的回调
17
function demo_menu_page_display()
18
{
19
?>
20
    <div class="wrap">
21
    <!--标题-->
22
        <h2>
23
            <?php echo esc_html(get_admin_page_title()); ?>
24
        </h2>
25
        <!-- 在保存设置时调用 WordPress 函数以呈现错误. -->
26
        <?php settings_errors(); ?>
27

28
        <?php
29

30
        //检查URL中是否存在名为 "tab" 的GET参数，并将其值分配给变量 $active_tab
31
        if (isset($_GET['tab'])) {
32
            $active_tab = $_GET['tab'];
33
        } // end if
34

35
        //设置默认值
36
        $active_tab = isset($_GET['tab']) ? $_GET['tab'] : 'display_options';
37
        ?>
38

39
        <!--这里的链接手动构造，注意，page=你填的菜单slug-->
40
        <h2 class="nav-tab-wrapper">
41
            <a href="?page=demo_id&tab=display_options" class="nav-tab <?php echo $active_tab == 'display_options' ? 'nav-tab-active' : ''; ?>">Display Options</a>
42
            <a href="?page=demo_id&tab=social_options" class="nav-tab <?php echo $active_tab == 'social_options' ? 'nav-tab-active' : ''; ?>">Social Options</a>
43
        </h2>
44

45

46

47
        <form method="post" action="options.php">
48
            <?php
49
            //根据当前 Tab 展示对应内容
50
            if ($active_tab == 'display_options') {
51
            ?>
52
                <h3>Npcink 放置需要展示的内容</h3>
53
            <?php
54
                //展示设置字段和设置节
55
                settings_fields('sandbox_theme_display_options');
56
                do_settings_sections('sandbox_theme_display_options');
57
            } else {
58
            ?>
59
                <h3>Npcink 放置准备展示的函数</h3>
60
            <?php
61
                //展示设置字段和设置节
62
                settings_fields('sandbox_theme_social_options');
63
                do_settings_sections('sandbox_theme_social_options');
64
            } // end if/else
65

66
            //保存按钮
67
            submit_button();
68

69
            ?>
70
        </form>
71
    </div><!--/wrap-->
72
<?php
73
}

注意，因为我们没有配置设置字段和设置节，所以，点击保存按钮会报错，

为了专注，这里仅做拓展介绍，并不提供相关实现内容。

总结

这一节，我们详细的介绍了菜单 Tab 切换的每一步，

您可以参考代码，实现在子菜单中添加 Tab 选项内容。

下一节，我们分享如何对菜单进行权限控制，仅允许指定人员访问，以及仅在指定菜单中加载 JS 资源。

阅读偏好

工具