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

众所周知动态的倒计时代码是通过 javascript 来实现的[后面简称为 js],我们只需要运用 js 和 function 调用再通过 wordpress 短代码功能的获取就可以实现一个简单的倒计时功能。在发现限时的活动或是报名中,做为促进消费和转化用户是非常好用的一个营销功能,可以让访客抓紧时间想要获取内容或是福利。前两天分享了通过安装一个 Countdown Timer Ultimate 插件来实现为 WordPress 站点添加倒计时的功能,虽然很方便但是部分站长对插件天生不喜,所以今天就给大家转载分享一个纯代码的办法来为 WordPress 站点添加倒计时。代码结构有点小复杂或是应用起来非常简单,只需要在现有的 wordpress 主题里加入一个 js 文件,然后把调用的代码添加到主题 function 主函数文件内,然后找到需要触发和显示的位置。添加 wordpress 短代码功能就可以实现了。同样给大家了另外一种调用形式,对于时间的调整更灵活有兴趣的可以尝试一下。

实现步骤

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

  1.     function getAdd(time){
  2.     if(time<10){
  3.     return "0"+time;
  4.     }else{
  5.     return time;
  6.     }
  7.     }
  8.     var interval = 1000;
  9.     function ShowCountDown(year,month,day,hourd,minuted){
  10.     var now = new Date();
  11.     var endDate = new Date(year, month-1, day, hourd, minuted);
  12.     var leftTime = endDate.getTime() - now.getTime();
  13.     var leftsecond = parseInt(leftTime/1000);
  14.     var day = Math.floor(leftsecond/(60*60*24));
  15.     day = day < 0 ? 0 : day;
  16.     var hour = Math.floor((leftsecond-day*24*60*60)/3600);
  17.     hour = hour < 0 ? 0 : hour;
  18.     var minute = Math.floor((leftsecond-day*24*60*60-hour*3600)/60);
  19.     minute = minute < 0 ? 0 : minute;
  20.     var second = Math.floor(leftsecond-day*24*60*60-hour*3600-minute*60);
  21.     second = second < 0 ? 0 : second;
  22.     var getDay = getAdd(day);
  23.     var getHour = getAdd(hour);
  24.     var getMinute = getAdd(minute);
  25.     var getSecond = getAdd(second);
  26.     if(endDate > now){
  27.     document.getElementById('time').innerHTML = '活动倒计时:';
  28.     document.getElementById('day').innerHTML = getDay +'天';
  29.     document.getElementById('hour').innerHTML = getHour +'时';
  30.     document.getElementById('min').innerHTML = getMinute +'分';
  31.     document.getElementById('sec').innerHTML = getSecond +'秒';
  32.     }else{
  33.     document.getElementById('countdown').innerHTML= '本次活动已经结束'
  34.     }
  35.     }

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

  1.     function countdown($atts, $content=null) {
  2.     extract(shortcode_atts(array("time" => ''), $atts));
  3.     date_default_timezone_set('PRC');
  4.     $endtime=strtotime($time);
  5.     $nowtime=time();
  6.     global $endtimes;
  7.     $endtimes = str_replace(array("-"," ",":"),",",$time);
  8.     if($endtime>$nowtime){
  9.     return '
  10.     <div id="countdown">
  11.     <span id="time"></span>
  12.     <span id="day"></span>
  13.     <span id="hour"></span>
  14.     <span id="min"></span>
  15.     <span id="sec"></span>
  16.     </div>
  17.     ';
  18.     }else{
  19.     return '本次活动已经结束';
  20.     }
  21.     }
  22.     function countdown_js() {
  23.     global $endtimes;
  24.     echo '<script>window.setInterval(function(){ShowCountDown('.$endtimes.');}, interval);</script>'."n";
  25.     }
  26. 
    
  27.     add_shortcode('countdown', 'countdown');
  28.     add_action('wp_footer', 'countdown_js');
  29.     wp_register_script( 'countdown_js', get_template_directory_uri() . 'https://img.2kss.com/js/countdownjs.js', array(), '1.0', false );
  30.     wp_enqueue_script( 'countdown_js' );

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

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

其中 time=”2019-01-15 18:41:57″引号中的时间就是活动结束时间,修改为其他日期时间时请保持格式一致即可。
纯代码WordPress站点添加倒计时功能-云模板这个纯代码为 WordPress 站点添加倒计时还是非常简单易用的,只需要添加好 JS 文件和代码后,想添加倒计时就通过短代码来实现即可。如果担心忘记,我们还可以将倒计时的短代码集成到编辑器中。文章中的代码只是一种思路,倒计时的样式并没有美化,建议有需要的站长结合自己的主题来进行 DIY 会更好。

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/98311

WordPress安全防护插件
服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

电子邮件地址不会被公开。 必填项已用*标注

51建站客服微信二维码
点击这里购买