WordPress实现页面刷新时随机切换预设调色板

完全可以通过CSS+JavaScript或者WordPress后端代码实现，以下是几种实用方案：

方案一：CSS变量 + 前端JS随机切换 #

1. 定义调色板CSS类
   在主题的style.css文件中添加预设调色板，用CSS变量统一管理颜色：

/* 5套预设调色板 */
.palette-1 {
  --primary: #2c3e50;
  --secondary: #3498db;
  --accent: #e74c3c;
}
.palette-2 {
  --primary: #8e44ad;
  --secondary: #f1c40f;
  --accent: #1abc9c;
}
.palette-3 {
  --primary: #16a085;
  --secondary: #27ae60;
  --accent: #d35400;
}
.palette-4 {
  --primary: #c0392b;
  --secondary: #9b59b6;
  --accent: #34495e;
}
.palette-5 {
  --primary: #2980b9;
  --secondary: #f39c12;
  --accent: #2ecc71;
}

/* 将变量应用到网站元素 */
.site-header {
  background-color: var(--primary);
}
.button {
  background-color: var(--secondary);
  color: #fff;
}
.accent-text {
  color: var(--accent);
}

2. 添加随机切换JS
   在主题的footer.php文件末尾（</body>标签前）插入以下代码，页面加载时随机给body添加调色板类：

<script>
// 随机选取调色板类
const paletteList = ['palette-1', 'palette-2', 'palette-3', 'palette-4', 'palette-5'];
const randomPalette = paletteList[Math.floor(Math.random() * paletteList.length)];
document.body.classList.add(randomPalette);
</script>

方案二：WordPress后端钩子实现（无需前端JS） #

如果想避免依赖前端JS，可以通过PHP后端给body添加随机类：
在主题的functions.php文件中添加以下代码：

function add_random_palette_body_class($classes) {
    // 定义调色板类列表
    $palette_classes = ['palette-1', 'palette-2', 'palette-3', 'palette-4', 'palette-5'];
    // 随机选取一个类
    $random_class = $palette_classes[array_rand($palette_classes)];
    // 添加到body类中
    $classes[] = $random_class;
    return $classes;
}
// 挂载到body_class钩子
add_filter('body_class', 'add_random_palette_body_class');

之后同样使用方案一中的CSS代码定义调色板和元素样式即可。

方案三：插件辅助实现（无需修改主题文件） #

如果不想修改主题代码，可以使用自定义CSS/JS插件，将方案一中的CSS代码粘贴到插件的自定义CSS区域，JS代码粘贴到自定义JS区域即可生效。

注意事项 #

• 确保网站所有需要变色的元素都使用var(--变量名)引用颜色，不要写死固定色值。
• 建议使用子主题修改代码，避免主题更新时丢失自定义内容。
• 测试各调色板的颜色对比度，保证文字可读性和视觉体验。

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