WordPress使用的2025主题，根据时间自动切换样式
睿诺
最后编辑于 2025年2月26日
在WordPress中，根据时间自动切换样式（例如白天和夜间模式）可以通过多种方式实现。以下是一个基于时间的自动样式切换的解决方案，适用于2025主题或其他自定义主题。
方法 1：使用JavaScript根据时间动态切换样式
通过JavaScript检测当前时间，并根据时间动态加载不同的CSS文件或切换类名。
实现步骤：
- 创建两个CSS文件：
day-style.css：白天模式的样式。night-style.css：夜间模式的样式。
- 将以下代码添加到主题的
functions.php文件中：
这段代码会在页面加载时动态加载对应的CSS文件。
function time_based_styles() {
$current_hour = date('G'); // 获取当前小时（24小时制）
if ($current_hour >= 6 && $current_hour < 18) {
// 白天模式（6:00 - 17:59）
wp_enqueue_style('day-style', get_template_directory_uri() . '/day-style.css');
} else {
// 夜间模式（18:00 - 5:59）
wp_enqueue_style('night-style', get_template_directory_uri() . '/night-style.css');
}
}
add_action('wp_enqueue_scripts', 'time_based_styles');- 创建CSS文件：
- 在主题目录下创建
day-style.css和night-style.css文件。 - 分别定义白天和夜间的样式。
- 测试：
- 访问网站，检查在不同时间段是否加载了正确的CSS文件。
方法 2：使用CSS变量和JavaScript动态切换类名
通过JavaScript根据时间动态切换<body>的类名，然后使用CSS变量定义白天和夜间的样式。
实现步骤：
- 在主题的
functions.php文件中添加JavaScript：
将以下代码添加到functions.php中，以加载自定义JavaScript文件。
function time_based_script() {
wp_enqueue_script('time-based-script', get_template_directory_uri() . '/js/time-based.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'time_based_script');- 创建JavaScript文件：
在主题目录下创建/js/time-based.js文件，并添加以下代码：
document.addEventListener('DOMContentLoaded', function() {
const currentHour = new Date().getHours();
const body = document.body;
if (currentHour >= 6 && currentHour < 18) {
body.classList.add('day-mode');
} else {
body.classList.add('night-mode');
}
});- 在主题的
style.css文件中定义样式：
使用CSS变量定义白天和夜间的样式。
:root {
--background-color: #ffffff;
--text-color: #000000;
}
.day-mode {
--background-color: #ffffff;
--text-color: #000000;
}
.night-mode {
--background-color: #1a1a1a;
--text-color: #ffffff;
}
body {
background-color: var(--background-color);
color: var(--text-color);
}- 测试：
- 访问网站，检查在不同时间段是否切换了正确的样式。
方法 3：使用WordPress Transients缓存时间状态
为了避免每次页面加载都计算时间，可以使用WordPress的Transients API缓存当前的时间状态（白天或夜间）。
实现步骤：
- 在
functions.php中添加以下代码：
function get_time_based_mode() {
// 检查是否有缓存
$mode = get_transient('time_based_mode');
if ($mode === false) {
$current_hour = date('G');
$mode = ($current_hour >= 6 && $current_hour < 18) ? 'day' : 'night';
// 缓存12小时
set_transient('time_based_mode', $mode, 12 * HOUR_IN_SECONDS);
}
return $mode;
}
function time_based_styles() {
$mode = get_time_based_mode();
if ($mode === 'day') {
wp_enqueue_style('day-style', get_template_directory_uri() . '/day-style.css');
} else {
wp_enqueue_style('night-style', get_template_directory_uri() . '/night-style.css');
}
}
add_action('wp_enqueue_scripts', 'time_based_styles');- 创建CSS文件：
- 在主题目录下创建
day-style.css和night-style.css文件。 - 分别定义白天和夜间的样式。
- 测试：
- 访问网站，检查在不同时间段是否加载了正确的CSS文件。
方法 4：使用插件实现
如果你不想手动编写代码，可以使用以下插件来实现自动切换样式：
- WP Night Mode：提供夜间模式切换功能。
- Dark Mode：自动或手动切换夜间模式。
总结
- 如果你熟悉代码，推荐使用方法 1或方法 2，它们更灵活且性能较好。
- 如果你希望减少代码量，可以使用方法 4的插件。
- 方法 3适合需要缓存时间状态的场景，可以减少服务器计算压力。
根据你的需求选择合适的方法，实现根据时间自动切换样式的功能！