WordPress实现通过URL直接打开指定标签页的方法求助

在WordPress中实现导航链接直接打开指定标签页，取消默认激活的「15 Nov」标签页，改为激活URL中hash指定的标签页。目前访问domain.com/agenda/#16-nov无法生效。

提供的标签页结构代码：

<ul class="scheduleday_wrapper tab">
   <li data-tab="15-nov" class="scheduleday_title active">
      <div class="scheduleday_title_content">
         <h4>15 Nov</h4>
      </div>
      <br class="clear">
   </li>
   <li data-tab="16-nov" class="scheduleday_title">
      <div class="scheduleday_title_content">
         <h4>16 Nov</h4>
      </div>
      <br class="clear">
   </li>
   <li data-tab="17-nov" class="scheduleday_title">
      <div class="scheduleday_title_content">
         <h4>17 Nov</h4>
      </div>
      <br class="clear">
   </li>
</ul>

标签页内容代码：

<ul id="15-nov" class="scheduleday_wrapper themeborder tab_content"></ul>
<ul id="16-nov" class="scheduleday_wrapper themeborder tab_content hide"></ul>
<ul id="17-nov" class="scheduleday_wrapper themeborder tab_content hide"></ul>

1. 调整初始HTML结构（可选） #

移除硬编码的active和hide类，让JavaScript控制初始状态，避免和JS逻辑冲突：

<!-- 标签页结构：移除15-nov的active类 -->
<ul class="scheduleday_wrapper tab">
   <li data-tab="15-nov" class="scheduleday_title">
      <div class="scheduleday_title_content">
         <h4>15 Nov</h4>
      </div>
      <br class="clear">
   </li>
   <li data-tab="16-nov" class="scheduleday_title">
      <div class="scheduleday_title_content">
         <h4>16 Nov</h4>
      </div>
      <br class="clear">
   </li>
   <li data-tab="17-nov" class="scheduleday_title">
      <div class="scheduleday_title_content">
         <h4>17 Nov</h4>
      </div>
      <br class="clear">
   </li>
</ul>

<!-- 标签页内容：所有内容默认添加hide类 -->
<ul id="15-nov" class="scheduleday_wrapper themeborder tab_content hide"></ul>
<ul id="16-nov" class="scheduleday_wrapper themeborder tab_content hide"></ul>
<ul id="17-nov" class="scheduleday_wrapper themeborder tab_content hide"></ul>

2. 添加JavaScript逻辑 #

这段代码会读取URL中的hash值自动激活对应标签，同时处理标签点击时的hash同步、浏览器前进后退的状态保持。

你可以通过以下方式添加到WordPress中：

• 直接在主题footer.php的</body>标签前插入
• 通过主题functions.php使用wp_enqueue_script注册并加载脚本

document.addEventListener('DOMContentLoaded', function() {
    const tabTitles = document.querySelectorAll('.scheduleday_title');
    const tabContents = document.querySelectorAll('.tab_content');

    // 根据指定ID激活对应标签
    function activateTab(tabId) {
        // 重置所有标签状态
        tabTitles.forEach(title => title.classList.remove('active'));
        tabContents.forEach(content => content.classList.add('hide'));

        // 激活目标标签
        const targetTitle = document.querySelector(`[data-tab="${tabId}"]`);
        const targetContent = document.getElementById(tabId);
        if (targetTitle && targetContent) {
            targetTitle.classList.add('active');
            targetContent.classList.remove('hide');
        }
    }

    // 页面加载时处理初始hash
    const initialTabId = window.location.hash.slice(1);
    activateTab(initialTabId || '15-nov'); // 无hash时默认激活15 Nov，可按需修改

    // 监听hash变化（比如修改URL、浏览器前进后退）
    window.addEventListener('hashchange', function() {
        const tabId = window.location.hash.slice(1);
        activateTab(tabId || '15-nov');
    });

    // 标签点击时更新URL hash
    tabTitles.forEach(title => {
        title.addEventListener('click', function() {
            const targetTab = this.getAttribute('data-tab');
            window.location.hash = targetTab;
        });
    });
});

3. 验证功能 #

• 访问domain.com/agenda/#16-nov，页面加载后会自动激活「16 Nov」标签并显示对应内容
• 点击任意标签，URL的hash会同步更新，刷新页面后仍保持当前激活状态

内容的提问来源于stack exchange，提问作者Serag