WordPress网站实现每周一自动轮换4张餐厅午餐菜单图片

核心思路 #

通过JavaScript计算当前日期对应的当月第1-4周（以周一为每周起始），自动切换对应菜单图片，每月4张图循环匹配。

一、日期计算逻辑（定位周一&当月周数） #

先理清JS Date 对象的关键方法：

• getMonth()：返回0-11的月份值（需+1得到实际1-12月）
• getDay()：返回0-6的星期值（0=周日，1=周一，以此类推）
• setDate()：修改日期对象的日份，用来推算本周一的日期

下面是带注释的计算代码，适合基础JS水平：

// 1. 获取当前日期
const today = new Date();
// 当前月份（转换为1-12）
const currentMonth = today.getMonth() + 1;
// 当前星期几（0=周日，1=周一）
const dayOfWeek = today.getDay();

// 2. 计算本周一的日期
// 周日需往前推6天，其他星期往前推（当前星期-1）天
const daysToMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
const mondayOfCurrentWeek = new Date(today);
mondayOfCurrentWeek.setDate(today.getDate() - daysToMonday);

// 3. 计算本周一是当月第几周（1-4）
let weekNumber;
// 特殊情况：本周一不在当前月份（比如11月1日是周三，本周一是10月30日）
if (mondayOfCurrentWeek.getMonth() + 1 !== currentMonth) {
    // 直接显示当月第1周菜单
    weekNumber = 1;
} else {
    // 先找到当月第一个周一的日期
    const firstDayOfMonth = new Date(today.getFullYear(), currentMonth - 1, 1);
    const firstDayWeek = firstDayOfMonth.getDay();
    // 计算1号到第一个周一的天数：周日加1天，其他情况加（8-当前星期）天
    const daysToFirstMonday = firstDayWeek === 0 ? 1 : 8 - firstDayWeek;
    const firstMondayOfMonth = new Date(firstDayOfMonth);
    firstMondayOfMonth.setDate(firstDayOfMonth.getDate() + daysToFirstMonday);

    // 计算本周一与当月第一个周一的天数差，除以7得到周数
    const daysDiff = Math.floor((mondayOfCurrentWeek - firstMondayOfMonth) / (1000 * 60 * 60 * 24));
    weekNumber = Math.floor(daysDiff / 7) + 1;
    // 限制周数在1-4之间（因为只有4张图）
    weekNumber = Math.min(weekNumber, 4);
}

二、实现图片切换 #

在WordPress页面中插入图片标签，再用JS动态替换图片地址：

1. 插入基础图片标签 #

在页面编辑器的自定义HTML块中插入：

<img id="lunch-menu-image" src="/wp-content/uploads/menu-week-1.jpg" alt="本周午餐菜单">

替换src为你默认显示的菜单图片路径。

2. 完整整合代码 #

把下面代码放在同一个自定义HTML块的<script>标签中：

<script>
// 日期计算部分
const today = new Date();
const currentMonth = today.getMonth() + 1;
const dayOfWeek = today.getDay();

const daysToMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
const mondayOfCurrentWeek = new Date(today);
mondayOfCurrentWeek.setDate(today.getDate() - daysToMonday);

let weekNumber;
if (mondayOfCurrentWeek.getMonth() + 1 !== currentMonth) {
    weekNumber = 1;
} else {
    const firstDayOfMonth = new Date(today.getFullYear(), currentMonth - 1, 1);
    const firstDayWeek = firstDayOfMonth.getDay();
    const daysToFirstMonday = firstDayWeek === 0 ? 1 : 8 - firstDayWeek;
    const firstMondayOfMonth = new Date(firstDayOfMonth);
    firstMondayOfMonth.setDate(firstDayOfMonth.getDate() + daysToFirstMonday);

    const daysDiff = Math.floor((mondayOfCurrentWeek - firstMondayOfMonth) / (1000 * 60 * 60 * 24));
    weekNumber = Math.floor(daysDiff / 7) + 1;
    weekNumber = Math.min(weekNumber, 4);
}

// 定义4张菜单图片的路径，替换为你实际的URL
const menuImages = [
    '/wp-content/uploads/menu-week-1.jpg',
    '/wp-content/uploads/menu-week-2.jpg',
    '/wp-content/uploads/menu-week-3.jpg',
    '/wp-content/uploads/menu-week-4.jpg'
];

// 切换图片
const menuImg = document.getElementById('lunch-menu-image');
// 数组索引从0开始，所以周数要减1
menuImg.src = menuImages[weekNumber - 1];
</script>

三、WordPress中添加代码的其他方式 #

如果需要多页面复用，或不想直接写在页面里：

• 用主题自定义JS功能：进入「外观」→「自定义」→「额外JS」（不同主题位置可能有差异），粘贴JS代码
• 修改主题functions.php：用wp_enqueue_script注册脚本，或直接在header.php/footer.php中插入<script>标签

四、优化建议 #

• 避免缓存旧图：给图片URL加版本参数，比如把最后一行改成：

  menuImg.src = menuImages[weekNumber - 1] + '?v=' + new Date().getFullYear() + currentMonth + weekNumber;
  

• 测试切换逻辑：临时修改today的日期测试，比如：

  const today = new Date('2024-05-06'); // 5月6日是周一，对应第2周
  

• 容错处理：确保周数始终在1-4之间，可添加：

  weekNumber = Math.max(Math.min(weekNumber, 4), 1);
  

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