如何在WordPress中按时间自动切换导航菜单链接？

当然可以实现！这其实是个挺常见的动态调整元素跳转链接的需求，用JavaScript就能轻松搞定。我给你准备了几种实用的方案，你可以根据自己的场景来选：

方案1：页面加载时直接设置链接（适合用户会主动刷新页面的场景） #

这种方案最简单，页面一加载就根据当前时间判断并设置「主活动」按钮的跳转链接。假设你的按钮是一个<a>标签，且给它加了id="main-activity-btn"，代码如下：

// 获取「主活动」按钮元素
const mainActivityBtn = document.getElementById('main-activity-btn');

// 获取当前本地时间的小时数（范围0-23）
const currentHour = new Date().getHours();

// 根据时间段设置不同的跳转链接
if (currentHour < 10) {
  mainActivityBtn.href = '你的链接1地址';
} else if (currentHour >= 10 && currentHour < 11) {
  mainActivityBtn.href = '你的链接2地址';
} else {
  // 11点及以后
  mainActivityBtn.href = '你的链接3地址';
}

把这段代码放在页面的<script>标签里（建议放在</body>前，确保元素已经加载完成），或者你的项目JS文件中即可。

方案2：定时自动更新链接（适合用户长时间停留在页面的场景） #

如果用户可能打开页面后一直不刷新，到了10点或11点需要自动切换链接，那就要加上定时检查逻辑，确保时间到了自动更新：

// 封装更新链接的函数
function updateMainActivityLink() {
  const mainActivityBtn = document.getElementById('main-activity-btn');
  const currentHour = new Date().getHours();

  if (currentHour < 10) {
    mainActivityBtn.href = '你的链接1地址';
  } else if (currentHour >= 10 && currentHour < 11) {
    mainActivityBtn.href = '你的链接2地址';
  } else {
    mainActivityBtn.href = '你的链接3地址';
  }
}

// 页面加载时先执行一次，初始化链接
updateMainActivityLink();

// 每隔1分钟（60000毫秒）检查一次时间，更新链接
setInterval(updateMainActivityLink, 60000);

这样用户不用刷新页面，到了时间点按钮的链接会自动切换。

额外补充：如果按钮是<button>标签而非<a>标签 #

如果你的「主活动」是按钮元素，不是跳转链接，那就要修改点击事件的跳转逻辑：

const mainActivityBtn = document.getElementById('main-activity-btn');

// 绑定点击事件
mainActivityBtn.addEventListener('click', function() {
  const currentHour = new Date().getHours();
  let targetUrl = '';

  if (currentHour < 10) {
    targetUrl = '你的链接1地址';
  } else if (currentHour >= 10 && currentHour < 11) {
    targetUrl = '你的链接2地址';
  } else {
    targetUrl = '你的链接3地址';
  }

  // 跳转到目标链接
  window.location.href = targetUrl;
});

进阶优化：精准到分钟切换 / 使用服务器时间 #

• 精准到分钟：如果你需要严格在10:00整、11:00整切换，而不是只要到了10点就切换，可以同时获取分钟数判断：

  const now = new Date();
  const currentHour = now.getHours();
  const currentMinute = now.getMinutes();
  
  if (currentHour < 10 || (currentHour === 10 && currentMinute === 0)) {
    // 10:00前的逻辑
  }
  

• 使用服务器时间：如果担心用户修改本地时间导致判断错误，可以通过后端接口获取服务器时间，再基于服务器时间判断（需要后端配合提供时间接口）：

  async function getServerTime() {
    const response = await fetch('/api/get-server-time'); // 替换成你的后端接口
    const data = await response.json();
    return new Date(data.timestamp); // 假设后端返回时间戳
  }
  
  async function updateLink() {
    const serverTime = await getServerTime();
    const currentHour = serverTime.getHours();
    // 后续判断逻辑和之前一致
  }
  

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