Question

我无法在网上找到合适的答案。我创建了一个自定义帖子类型“捐赠”，并在其下有一个“设置”子菜单。我希望设置页面将选项卡用于不同的事情，以使其保持简单。

这是我所拥有的：

<?php
function sg_settings_setup()
{
    add_submenu_page('edit.php?post_type=donation', 'Settings', 'Settings', 'manage_options', 'sg-settings', 'sg_settings_page');
}

function sg_settings_page()
{
?>

      <div class="wrap">
        <h1>Main Title</h1>

        <?php
    settings_errors();
?>

        <?php
    $active_tab = isset($_GET['tab']) ? $_GET['tab'] : 'general-settings';
?>

        <h2 class="nav-tab-wrapper">
          <a href="?page=sg-settings&tab=general-settings" class="nav-tab <?php
    echo $active_tab == 'general-settings' ? 'nav-tab-active' : '';
?>">General Settings</a>
          <a href="?page=sg-settings&tab=email-settings" class="nav-tab <?php
    echo $active_tab == 'email-settings' ? 'nav-tab-active' : '';
?>">Email Settings</a>
          <a href="?page=sg-settings&tab=stripe-settings" class="nav-tab <?php
    echo $active_tab == 'stripe-settings' ? 'nav-tab-active' : '';
?>">API Settings</a>
        </h2>

        <form method="post" action="options.php">
          <?php
    settings_fields('sg_api_settings');
?>
         <?php
    do_settings_sections('sg_api_settings');
?>
         <?php
    submit_button();
?>
       </form>
      </div>
    <?php
}
?>

当我单击一个选项卡时，收到错误消息“对不起，您不允许访问此页面。”我在地址栏中看到该URL正在被重写，而该URL中不再包含“ edit.php？post_type = donation”。我尝试将其添加到选项卡的链接中，但被Wordpress删除了。

如果设置页面是menu_page，我可以使它工作，但是需要为submenu_page重写URL。希望其他人遇到了这个问题并且知道快速解决方案！

Answer 1

嗯，我找不到使用Wordpress API进行这项工作的方法，例如，我知道WooCommerce可以进行这项工作，但是由于没有人回答我的问题，我决定改用jQuery。使用内置的Wordpress类，可以轻松为其设置样式以使其具有本机的Wordpress外观。

在<h2 class="nav-tab-wrapper">中包裹标签链接

给每个标签链接一个nav-tab类

确保“活动”标签的类别为nav-tab-active

我创建了这个简单的jQuery函数：

$('#tabs .tab-content').hide();
$('#tabs .tab-content:first').show();
$('.nav-tab-wrapper a:first').addClass('nav-tab-active');

$(".nav-tab-wrapper").on("click", ".nav-tab", function(e) {
  e.preventDefault();

  $(".nav-tab a").removeClass("nav-tab-active");
  $(".tab-content").hide();
  $(this).addClass("nav-tab-active");
  $($(this).attr("href")).show();
});

这是一些示例HTML：

<div id="tabs">
  <h2 class="nav-tab-wrapper">
    <a href="#tab-1" class="nav-tab">One Time Donation</a>
    <a href="#tab-2" class="nav-tab">Recurring Donation</a>
    <a href="#tab-3" class="nav-tab">My Account</a>
  </h2>

  <div id="tab-1" class="tab-content">
    tab 1 content
  </div>
  <div id="tab-2" class="tab-content">
    tab 2 content
  </div>
  <div id="tab-3" class="tab-content">
    tab 3 content
  </div>
</div>

我将html包裹在<div id="tabs">中，但这不是必需的。

Answer 2

与您使用 $_GET[ 'tab' ] 使用查询字符串显示各个选项卡的方式相同，您还需要使用 $_GET[ 'tab' ] 通过 {{ 的回调来阻止无关字段的显示1}}。

所以你最终得到的是这样的：

add_submenu_page()

我使用的原始代码来自 here，但由于它使用顶级菜单页面作为起点，因此我不得不对其进行一些重构，以便它可以在子菜单也是如此。

带有选项卡的Wordpress子菜单选项页

2 个答案: