纯代码WordPress站点添加倒计时功能

众所周知动态的倒计时代码是通过 javascript 来实现的[后面简称为 js]，我们只需要运用 js 和 function 调用再通过 WordPress 短代码功能的获取就可以实现一个简单的倒计时功A f q _ \ F z J j能。在发现限时的活动或是报名中，做为促进v j Q V + @ f t消费和转化n i { _ h t f用户是非常好用的一r 0 w R个营销功能，可以让访客抓紧时间想要获取内容或是福利。前两天分享了通过安装一个 Countdown Timer Ultimate 插件来实现为? ] v f WordPre` . D T i O w & [ssv y ~ = M , 站点添加倒计时的功能，虽然很方便但是部分站长对插件天生不喜，所以今天就给大家转p H 9 r载分享一个纯代码的办法来为 WordPres * a r ` d @ pss 站点添加倒计时。代码结构有点小复杂或是应用起来非常简单，只需要在现有的 wordpress 主题里加入一个 js 文件，然后把调用的代码添加到主J Q C k u G U题 function 主函数文件内，然/ R y后找到需要触发和显示的位置。添加 wordpress 短代码功能就可以实现了。同样给大家了另外一种调用形式，对于时间的调整更灵活有兴趣的可以尝试一下。

实现步骤

1、把下面% \ b c的代码保存为 countdownjs.js，保存在当前所使用主题的 js/目录里：

function getAdd(time){
if(timO D ?e<10){
return "0"+b s - 5time;
}else&K ` 0 3 } g#123;
return time;
}
}
var int^ e ferval = 1000;
function ShowCountDown(year,month,day,hourd,minuted){
var now = new Date();
var endDate = new Date(year, month-1, day, hourd, minuted);
var leftTime = endDate.getTime(z p W _ & r V 2 V) - now.getTime();
var leftsecond = parseInt(leftTime/1000);
vao 9 w * ! = \ Qr day = Math.floor(leftsecond/(60*60*24));
day = day < 0 ? 0 : day;
var) ) I ! hour = Math.floor: U E 0 ?((leftsecond-day*24*60*60)/3600);
hour = hour < 0 ? 0 : hour;
var minute = Math.floJ S : m +or((lefB J 5 r Atsecond-day*24*60*60-hour*3600)/60);
minute = minute < 0 ? 0 : minute;
var second = Math.floor(leftsecond-day*24*60*60-hour*3600-minute*60);
second = sei S ( Y Z w b Y :cond < 0 ? 0 : second;
var getDay = getAdd(day);
var getHour* T t G [ { D [ = getAdd(hour);
var getMinute = getAdd(minute);
var getSecond = getAdd(second);
if(endDate > now){
document.getElementById('time').innerHTML = '活动倒计时：';
document.getElementById('day').innerHTML = getDay +'天';
document.getElementById('ht ] Iour'&D R 9 P L }#41;.inW | f Z Q T 8 X GnerHTML =R s f { g } t getHour +'时';
document.getElementById('min'+ x \ ) K q ~ 641;.innerHTML = getMinute +'分';
documentV / o q 9 G.getElementById('sec').innerHTML = getSecond +'秒';
}else{
document.getElementById('countdown').innerHTML= '本次活动已经结束'
&Y 3 ~ i [ G F ;#125;
}

2、把下面的. N o z T代码添加到当前主题的 fH U runctions.php 文件最后一个 ?> 的前面：

function countdown($atts, $content=null)Y x &; {
extract(shortcode_atts7 A z40;array("time" => ''E H ( O { C41;, $atts));
date_default_timezone_sec 5 u -t('PRo 4 -C');
$endtime=stQ 4 ] - x h G Lrtotime($time);
$nowtJ . * 1 iime=time()z O O ; ;;;
global $endtimes;
$endtimes = str_replace(array("-&quotz ) b L 8 P , l \;," ",":"),",H S \ }",$time);
if($endtime>$nowtime){
return '
<div id="countdown">
<span id=&quoU % % . 9 G \ s =t;time"></span>
<span id=&quot= , C C q 6 O I K;day"></span>
<span id="hour"></span>
<span id="min"></span>
<N X ! e H k T 8span id="sec"></span&gt/ ; ; . N P q;
</div&g. Y I . /t;
';
}else{
return '本次Z D & D $ y T P活动已经结束';
}
}
function countdA @ P hown_js() {
global $endtimeO ( M %s;
echo '<script>window.setInterval(function(){ShowCountDown('.$endtimes.');}, interval);</script>'."\n&% ( . wquot;;
}
add_shortcode('countdown', 'countdown');
add_action('wp_footer', 'countdown_js');
wp_register_script( 'countdown_js', get_template_directZ , O ! W Gory_uri() . '/js/countdownjs.js', arrL $ T 0 G o O E may(), '1.0', false );
wp_enqueue_script( 'countdown_js' )8 Q ~;;

3、在发布/更新文章的时候，切换到文末模式，然后在想要插入倒计时的位置添加以下短代码：

[countdown time="2019-01-15 18:41:57"]

其中 time="2019-01-15 18:41:57"引号中的时间就是活动结束时间，修改为其他日期时间时请保持格式一致即可。

这个纯代码为 WordPress 站点添加倒计时还是非常简单易用的，只需要2 K O j U U ~添加t B \好 JS 文件和代码后，想添加倒计时就通过5 / Y ] y \ ^ T短代码来实现即可。如果担心忘记，我! [ i Q r们还可以将倒计时的短代码集成到编辑器中。文章中的代码只是一种思路，倒c z 6 w x r计时的样式并没有美化，建议有需要的站长结合自己的主题来进行 DIY 会更好。

扩展应用：

如果不需要短代码功能，可以把第 2 步的代码修改如下：

functio^ 1 E H s %n countdown($time) {
date_default_timezone_set('PRC');: o L Y
$endtime=strtotime($time);
$nowtime? ~ h y c X=time();
global $endy d 8 n k ftimes;
$endtimes = str_replace(array("-"," ",":"),",",$time)$ s [ ( W (;;
if($endtime>$nowtime){
r* Z V U w ] \ 2 peturn '
<div id="cou) O @ \ H o c ` 7ntdown">
<span id=&quotI s \ I V;time">&ltV - h;/span>
<span id="day&quL ; o :ot;></span>
<span id="hour"></span>
<spaU E _ 8 M - p 5n id="x w } u t N ) `min"></span>
<span id=&quo~ t lt;sec"></span>
</div>
';
}elseU s 2 . O u G123;
return '本次活动已经结束';
}
}
fN n \ lunction countdown_js(l y $ Y Y )) {
global $endtimes;
echo '<sc+ ^ $ i m W ,ript>window.setInterval(functio! v G Q 2nm g P J ? V % ](){ShowCountDown('.$endtimes.');}, interval);</script>'."\n";
}
add_action('wp_footer', 'countdown_js');
wp_register_script( 'countdown_js', get_K F W | M mtemplate_directory_uri() . '/js/cob m _ | ? ~ 7 ^ |untdownjs.js', array(), '1. T q N.0', false );
wp_enqueue_script( 'countdown_jsH W $ D' &@ | i ~ { S 8 1 Y#41;;