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

2023-06-30 20:01 作者:Npcink_牧泽 0人读过 | 我要投稿

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

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

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

问题详解

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

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

流程和帮助

流程如下

感谢以下文章的帮助

WordPress 设置 API，第 5 部分：设置的选项卡式导航
https://code.tutsplus.com/tutorials/the-wordpress-settings-api-part-5-tabbed-navigation-for-settings--wp-24971

添加菜单

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

//创建一个Demo菜单
function demo_create_menu_page()
{
add_menu_page(
'Demo选项', // 此菜单对应页面上显示的标题
'Demo', // 要为此实际菜单项显示的文本
'administrator', // 哪种类型的用户可以看到此菜单
'demo_id', // 此菜单项的唯一ID（即段塞）
'demo_menu_page_display', // 呈现此页面的菜单时要调用的函数的名称
'dashicons-smiley', //图标 - 默认图标
'600.1', //位置
);
} // end vuespa_create_menu_page
add_action('admin_menu', 'demo_create_menu_page');
//Demo菜单的回调
function demo_menu_page_display()
{
?>
<div class="wrap">
Npcink
</div>
<?php
}

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

添加选项卡

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

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

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

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

菜单切换

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

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

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

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

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

修改上面的选项卡内容

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

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

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

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

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

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

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

内容切换

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

我们添加以下代码

<?php
//根据当前 Tab 展示对应内容
if ($active_tab == 'display_options') {
?>
<h3>Npcink 放置需要展示的内容</h3>
<?php
} else {
?>
<h3>Npcink 放置准备展示的函数</h3>
<?php
//展示设置字段和设置节
} // end if/else
?>

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

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

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

<form method="post" action="options.php">
<?php
//根据当前 Tab 展示对应内容
if ($active_tab == 'display_options') {
?>
<h3>Npcink 放置需要展示的内容</h3>
<?php
//展示设置字段和设置节
settings_fields('sandbox_theme_display_options');
do_settings_sections('sandbox_theme_display_options');
} else {
?>
<h3>Npcink 放置准备展示的函数</h3>
<?php
//展示设置字段和设置节
settings_fields('sandbox_theme_social_options');
do_settings_sections('sandbox_theme_social_options');
} // end if/else
//保存按钮
submit_button();
?>
</form>

完整代码

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

//创建一个Demo菜单
function demo_create_menu_page()
{
add_menu_page(
'Demo选项', // 此菜单对应页面上显示的标题
'Demo', // 要为此实际菜单项显示的文本
'administrator', // 哪种类型的用户可以看到此菜单
'demo_id', // 此菜单项的唯一ID（即段塞）
'demo_menu_page_display', // 呈现此页面的菜单时要调用的函数的名称
'dashicons-smiley', //图标 - 默认图标
'600.1', //位置
);
} // end vuespa_create_menu_page
add_action('admin_menu', 'demo_create_menu_page');
//Demo菜单的回调
function demo_menu_page_display()
{
?>
<div class="wrap">

<h2>
<?php echo esc_html(get_admin_page_title()); ?>
</h2>

<?php settings_errors(); ?>
<?php
//检查URL中是否存在名为 "tab" 的GET参数，并将其值分配给变量 $active_tab
if (isset($_GET['tab'])) {
$active_tab = $_GET['tab'];
} // end if
//设置默认值
$active_tab = isset($_GET['tab']) ? $_GET['tab'] : 'display_options';
?>

<h2 class="nav-tab-wrapper">
<a href="?page=demo_id&tab=display_options" class="nav-tab <?php echo $active_tab == 'display_options' ? 'nav-tab-active' : ''; ?>">Display Options</a>
<a href="?page=demo_id&tab=social_options" class="nav-tab <?php echo $active_tab == 'social_options' ? 'nav-tab-active' : ''; ?>">Social Options</a>
</h2>
<form method="post" action="options.php">
<?php
//根据当前 Tab 展示对应内容
if ($active_tab == 'display_options') {
?>
<h3>Npcink 放置需要展示的内容</h3>
<?php
//展示设置字段和设置节
settings_fields('sandbox_theme_display_options');
do_settings_sections('sandbox_theme_display_options');
} else {
?>
<h3>Npcink 放置准备展示的函数</h3>
<?php
//展示设置字段和设置节
settings_fields('sandbox_theme_social_options');
do_settings_sections('sandbox_theme_social_options');
} // end if/else
//保存按钮
submit_button();
?>
</form>
</div>
<?php
}

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

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

总结

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

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

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