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

2024-02-01 分类：内容 阅读()

在上一节中，我们学习了如何在 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. //Demo菜单的回调
  16. function demo_menu_page_display()
  17. {
  18. ?>
  19. <div class="wrap">
  20. Npcink
  21. </div><!--/wrap-->
  22. <?php
  23. }

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

添加选项卡

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

  1. <h2class="nav-tab-wrapper">
  2. <ahref="?page=demo_id&tab=display_options"class="nav-tab">Display Options</a>
  3. <ahref="?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. <h2class="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. }// end if/else
  13. ?>

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

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

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

  1. <formmethod="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. submit_button();
  21. ?>
  22. </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. //Demo菜单的回调
  16. function demo_menu_page_display()
  17. {
  18. ?>
  19. <div class="wrap">
  20. <!--标题-->
  21. <h2>
  22. <?php echo esc_html(get_admin_page_title());?>
  23. </h2>
  24. <!--在保存设置时调用WordPress函数以呈现错误.-->
  25. <?php settings_errors();?>
  26. <?php
  27. //检查URL中是否存在名为 "tab" 的GET参数，并将其值分配给变量 $active_tab
  28. if(isset($_GET['tab'])){
  29. $active_tab = $_GET['tab'];
  30. }// end if
  31. //设置默认值
  32. $active_tab = isset($_GET['tab'])? $_GET['tab']:'display_options';
  33. ?>
  34. <!--这里的链接手动构造，注意，page=你填的菜单slug-->
  35. <h2 class="nav-tab-wrapper">
  36. <a href="?page=demo_id&tab=display_options"class="nav-tab <?php echo $active_tab == 'display_options' ? 'nav-tab-active' : ''; ?>">DisplayOptions</a>
  37. <a href="?page=demo_id&tab=social_options"class="nav-tab <?php echo $active_tab == 'social_options' ? 'nav-tab-active' : ''; ?>">SocialOptions</a>
  38. </h2>
  39. <form method="post" action="options.php">
  40. <?php
  41. //根据当前 Tab 展示对应内容
  42. if($active_tab =='display_options'){
  43. ?>
  44. <h3>Npcink放置需要展示的内容</h3>
  45. <?php
  46. //展示设置字段和设置节
  47. settings_fields('sandbox_theme_display_options');
  48. do_settings_sections('sandbox_theme_display_options');
  49. }else{
  50. ?>
  51. <h3>Npcink放置准备展示的函数</h3>
  52. <?php
  53. //展示设置字段和设置节
  54. settings_fields('sandbox_theme_social_options');
  55. do_settings_sections('sandbox_theme_social_options');
  56. }// end if/else
  57. //保存按钮
  58. submit_button();
  59. ?>
  60. </form>
  61. </div><!--/wrap-->
  62. <?php
  63. }

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

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

赞(0)
未经允许不得转载：大象juǎn » 01：讲透WordPress 菜单开发 - 在菜单中添加Tab选项卡
分享到

相关推荐

置顶推荐