代码实现wordpress倒计时

代码实现wordpress倒计时

在WordPress中实现倒计时通常涉及到使用JavaScript来创建一个简单的倒计时计时器。以下是一个简单的实现示例：

1.在WordPress主题的functions.php文件中添加一个新的函数来输出倒计时脚本。

function countdown_script() {
    // 设置倒计时结束时间（UNIX时间戳）
    $countdown_end = strtotime('2023-12-31 23:59:59'); // 示例结束时间，请修改为实际结束时间
    if (is_single() || is_page()) {
        wp_enqueue_script('countdown', get_template_directory_uri() . '/js/countdown.js', array('jquery'), filemtime(get_template_directory() . '/js/countdown.js'), true);
        wp_localize_script('countdown', 'countdown_params', array(
            'end_time' => $countdown_end
        ));
    }
}
add_action('wp_enqueue_scripts', 'countdown_script');

2.创建一个JavaScript文件countdown.js并放置在你的WordPress主题的js目录下。

// countdown.js
jQuery(function($) {
    var endTime = countdown_params.end_time; // 使用WordPress本地化传递的结束时间
    var countdownElement = $('#countdown');
 
    function updateCountdown() {
        var currentTime = Math.floor(Date.now() / 1000);
        var timeLeft = endTime - currentTime;
 
        if (timeLeft >= 0) {
            var days = Math.floor(timeLeft / (60 * 60 * 24));
            var hours = Math.floor((timeLeft % (60 * 60 * 24)) / (60 * 60));
            var minutes = Math.floor((timeLeft % (60 * 60)) / 60);
            var seconds = Math.floor(timeLeft % 60);
 
            countdownElement.text(days + 'd ' + hours + 'h ' + minutes + 'm ' + seconds + 's');
        } else {
            clearInterval(interval);
            countdownElement.text('Countdown finished');
        }
    }
 
    updateCountdown();
    var interval = setInterval(updateCountdown, 1000);
});

3.在你想要显示倒计时的WordPress文章或页面中，添加一个用于显示倒计时的HTML元素。

<div id="countdown"></div>

确保你的WordPress主题有一个js目录，并且countdown.js文件放置在那里。这段代码会创建一个倒计时，显示剩余的天、小时、分钟和秒数，直到倒计时结束。你需要根据实际的结束时间和计数器的显示方式来调整这段代码。

提示：仅供参考