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

转载   WordPress挖主题  2019-01-15 07:27:56  136 人阅读  20 条评论

前两天 boke112 导航分享了通过安装一个 Countdown Timer Ultimate 插件来实现为 WordPress 站点添加倒计时的功能,详见『如何添加一个倒计时到 WordPress 网站中?』,虽然很方便但是部分站长对插件天生不喜,所以今天就给大家转载分享一个纯代码的办法来为 WordPress 站点添加倒计时。

纯代码为WordPress站点添加倒计时功能 WordPress 第1张

纯代码添加倒计时到 WordPress 站点步骤

1、把下面的代码保存为 countdownjs.js,保存在当前所使用主题的 js/目录里:

function getAdd(time){
if(time<10){
return "0"+time;
}else{
return time;
}
}
var interval = 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() - now.getTime();
var leftsecond = parseInt(leftTime/1000);
var day = Math.floor(leftsecond/(60*60*24));
day = day < 0 ? 0 : day;
var hour = Math.floor((leftsecond-day*24*60*60)/3600);
hour = hour < 0 ? 0 : hour;
var minute = Math.floor((leftsecond-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 = second < 0 ? 0 : second;
var getDay = getAdd(day);
var getHour = getAdd(hour);
var getMinute = getAdd(minute);
var getSecond = getAdd(second);
if(endDate > now){
document.getElementById('time').innerHTML = '活动倒计时:';
document.getElementById('day').innerHTML = getDay +'天';
document.getElementById('hour').innerHTML = getHour +'时';
document.getElementById('min').innerHTML = getMinute +'分';
document.getElementById('sec').innerHTML = getSecond +'秒';
}else{
document.getElementById('countdown').innerHTML= '本次活动已经结束'
}
}

2、把下面的代码添加到当前主题的 functions.php 文件最后一个 ?> 的前面:

function countdown($atts, $content=null) {
extract(shortcode_atts(array("time" => ''), $atts));
date_default_timezone_set('PRC');
$endtime=strtotime($time);
$nowtime=time();
global $endtimes;
$endtimes = str_replace(array("-"," ",":"),",",$time);
if($endtime>$nowtime){
return '
<div id="countdown">
<span id="time"></span>
<span id="day"></span>
<span id="hour"></span>
<span id="min"></span>
<span id="sec"></span>
</div>
';
}else{
return '本次活动已经结束';
}
}
function countdown_js() {
global $endtimes;
echo '<script>window.setInterval(function(){ShowCountDown('.$endtimes.');}, interval);</script>'."\n";
}

add_shortcode('countdown', 'countdown');
add_action('wp_footer', 'countdown_js');
wp_register_script( 'countdown_js', get_template_directory_uri() . '/js/countdownjs.js', array(), '1.0', false );
wp_enqueue_script( 'countdown_js' );

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

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

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

纯代码为WordPress站点添加倒计时功能 WordPress 第2张

小结

这个纯代码为 WordPress 站点添加倒计时还是非常简单易用的,只需要添加好 JS 文件和代码后,想添加倒计时就通过短代码来实现即可。如果担心忘记,我们还可以将倒计时的短代码集成到编辑器中。文章中的代码只是一种思路,倒计时的样式并没有美化,建议有需要的站长结合自己的主题来进行 DIY 会更好。

历史上的今天:

文章标签:
原文地址:http://www.wazhuti.com/392.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为转载文章,来源于 WordPress挖主题 ,版权归原作者所有,欢迎分享本文,转载请保留出处!
转载砖家

相关文章 分类热门分类热评最新问答

 发表评论

中国赞表情摊手表情吃瓜表情笑哭表情偷笑表情衰表情汗表情思考表情费解表情抓狂表情晕表情流泪表情疑问表情嘻嘻表情吃惊表情鼓掌表情

  1. 仙界
    仙界 @回复

    学到了,现在马上加到我的新模板去!

  2. 去看你博客
    去看你博客 @回复

    这个可以用来做新年倒计时 [笑哭] 如果能加入到时显示提前打好的文字就更好了 [嘻嘻]

  3. 运维学习笔记Blog
    运维学习笔记Blog @回复

    这个真心不错!

  4. 里维斯社
    里维斯社 @回复

    这个小功能很不错,适合电商之类的网站,而且使用比较灵活

  5. Mr.Meng
    Mr.Meng @回复

    为什么搞这么多花里胡哨的的东西。。

    • 懿古今
      懿古今2019-01-16 11:52  回复

      @Mr.Meng[思考] 不是建议所有人所有站点都搞,而是要结合自己的情况来搞,比如某个站点经常搞一些优惠活动或者电商活动,那么在文章最后来一个倒计时的效果还是不错的。

  6. 弥雅尔尔
    弥雅尔尔 @回复

    很棒哦!收藏了,说不定啥时候用上

  7. 趣知识
    趣知识 @回复

    弄个演示地址撒

    • 懿古今
      懿古今2019-01-16 11:55  回复

      @趣知识[摊手] 这么简单的功能而且已经提供截图,喜欢的直接添加到本地自行测试和调试以符合自己的站点更好

  8. share1223
    share1223 @回复

    这个很棒啊 我是typecho程序 不知道这个可以放吗~ 希望作者做这个typecho版本的 谢谢哈

  9. 镜缘轩
    镜缘轩 @回复

    目前是用不着

  10. 青山
    青山 @回复

    这个估计就有人喜欢了