wordpress图文教程

代码实现wordpress倒计时的几种方法

2024年8月23日
酒醒

方法一：用$custom_date变量从某个自定义字段（如Exhibition_time）中获取这个日期时间值。

为特定文章设置一个未来的发布时间，并计算倒计时直到该时间。不过，有几个关键点需要注意和修改，以确保代码能在WordPress环境中正确运行，并符合您的需求。

首先，您提到了$custom_date变量，但在您的代码片段中，这个变量并没有被定义或赋值。我假设您想从某个自定义字段（如Exhibition_time）中获取这个日期时间值。因此，您需要使用get_post_meta()函数来获取这个值。

其次，WordPress中的文章发布时间是由WordPress系统自动管理的，您不能直接更改文章的发布时间戳来“延迟”发布。但是，您可以通过自定义字段来模拟这个行为，并在前端显示倒计时。

以下是修改后的代码，它将从自定义字段Exhibition_time中获取未来的日期时间，并计算倒计时：

<?php
// 假设我们已经在WordPress文章编辑页面设置了自定义字段Exhibition_time
// 获取当前文章的ID
$post_id = get_the_ID();

// 从自定义字段Exhibition_time中获取未来的发布时间（日期字符串）
$custom_date = get_post_meta($post_id, 'Exhibition_time', true);

// 确保$custom_date是有效的日期时间字符串
if (!empty($custom_date) && strtotime($custom_date) !== false) {
    // 将自定义字段的日期时间字符串转换为UNIX时间戳
    $future_post_date = strtotime($custom_date);

    // 获取当前时间的时间戳
    $now = current_time('timestamp');

    // 计算倒计时差值
    $countdown = $future_post_date - $now;

    // 判断未来时间是否已到达
    if ($countdown >= 0) {
        // 倒计时功能的实现
        // 将时间差值转换为天、小时、分钟、秒
        $days = floor($countdown / (60 * 60 * 24));
        $hours = floor(($countdown - ($days * 60 * 60 * 24)) / (60 * 60));
        $minutes = floor(($countdown - ($days * 60 * 60 * 24) - ($hours * 60 * 60)) / 60);
        $seconds = $countdown - ($days * 60 * 60 * 24) - ($hours * 60 * 60) - ($minutes * 60);

        // 输出倒计时信息
        echo "文章将在: {$days} 天 {$hours} 小时 {$minutes} 分钟 {$seconds} 秒后发布";
    } else {
        // 未来时间已到达或已过，输出相应内容
        echo "文章已发布或未来时间已过";
    }
} else {
    // 自定义字段为空或无效
    echo "未设置有效的未来发布时间";
}
?>

方法二：用WordPress自带的发布时间计算倒计时

<?php
 // 假设这是文章页面，并且我们已经有了文章ID
 $post_id = get_the_ID(); // 获取当前文章的ID
 
 // 获取文章的发布时间
 $post = get_post($post_id);
 $post_date = strtotime($post->post_date);
 
 // 获取当前时间
 $now = current_time('timestamp');
 
 // 计算从文章发布时间到现在的差值
 $elapsed_time = $now - $post_date;
 
 // 将时间差值转换为天、小时、分钟、秒
 $days = floor($elapsed_time / (60 * 60 * 24));
 $hours = floor(($elapsed_time % (60 * 60 * 24)) / (60 * 60));
 $minutes = floor(($elapsed_time % (60 * 60)) / 60);
 $seconds = $elapsed_time % 60;
 
 // 输出从文章发布到现在的经过时间
 echo "这篇文章已经发布了: {$days} 天 {$hours} 小时 {$minutes} 分钟 {$seconds} 秒";
?>

方法三：用HTML和JavaScript代码 纯代码wordpress倒计时功能

  1. 显示距离开展时间的倒计时
  2. 显示距离闭展时间的倒计时
  3. 显示已结束的消息
<!-- 纯代码wordpress倒计时功能 开 -->
<div id="countdown-timer"></div>
<script>
// 设置目标日期时间
var launchDate = new Date("2024-08-26T00:00:00").getTime(); // 替换为实际的开展时间
var closingDate = new Date("2024-09-02T23:59:59").getTime(); // 替换为实际的闭展日期时间

// 更新倒计时每一秒
var x = setInterval(function() {
    var now = new Date().getTime();
    var distanceToLaunch = launchDate - now;
    var distanceToClosing = closingDate - now;

    // 显示距离开展时间的倒计时
    if (distanceToLaunch > 0) {
        document.getElementById("countdown-timer").innerHTML = "距离开展还有: " + Math.floor(distanceToLaunch / (1000 * 60 * 60 * 24)) + "天 " + Math.floor((distanceToLaunch % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) + "小时 " + Math.floor((distanceToLaunch % (1000 * 60 * 60)) / (1000 * 60)) + "分钟 " + Math.floor((distanceToLaunch % (1000 * 60)) / 1000) + "秒 ";
    }
    // 显示距离闭展时间的倒计时
    else if (distanceToClosing > 0) {
        document.getElementById("countdown-timer").innerHTML = "距离闭展还有: " + Math.floor(distanceToClosing / (1000 * 60 * 60 * 24)) + "天 " + Math.floor((distanceToClosing % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) + "小时 " + Math.floor((distanceToClosing % (1000 * 60 * 60)) / (1000 * 60)) + "分钟 " + Math.floor((distanceToClosing % (1000 * 60)) / 1000) + "秒 ";
    }
    // 显示已结束的消息
    else {
        document.getElementById("countdown-timer").innerHTML = "展览已结束";
        clearInterval(x);
    }
}, 1000);
</script>
<!-- 纯代码wordpress倒计时功能 闭 -->

总结方法一是比较好用的一种倒计时