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

原创

已于 2023-07-03 17:36:34 修改 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#php

于 2023-06-30 20:04:09 首次发布

本文详细介绍了如何在WordPress中为菜单添加Tab选项卡功能，包括创建菜单、构造选项卡链接、切换菜单样式以及内容显示，提供了一种在管理界面中实现多选项卡切换的方法。

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

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

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

问题详解

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

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

流程和帮助

流程如下

感谢以下文章的帮助

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

添加菜单

根据上一节的内容，我们先添加一个顶级菜单，在当前使用主题的 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><!--/wrap-->
<?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=<

最低0.47元/天解锁文章