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

2019年4月25日23:37:31 4 4,953
摘要

当我看到这个教程，感觉很实用，特别是发布某些活动，是活动肯定有截止日期，所以博客在发布活动类型的文章底部添加一个活动结束倒计时还是不错的。

 

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

 

纯代码添加倒计时到 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. }
  27. add_shortcode('countdown', 'countdown');
  28. add_action('wp_footer', 'countdown_js');
  29. wp_register_script( 'countdown_js', get_template_directory_uri() . '/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站点添加倒计时功能

 

 

若文章图片、下载链接等信息出错，请在评论区留言反馈，博主将第一时间更新！如果喜欢，请打赏支持本站，谢谢大家！
历史上的今天
4月
25

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论：4   其中：访客  0   博主  0

    • y y 1 来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 联通
      回复 2020年1月19日 11:14  沙发

      博主您好，我都照你说的做了怎么还是不行显示出来的是[countdown time=”2019-01-15 18:41:57″]

        • 仙踪小栈 仙踪小栈 博主 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省苏州市 电信
          回复 2020年1月19日 11:38  1层

          @y 首先看清楚教程每一步，比如在发布的时候，一定要切换到文本模式

            • Y . Y . 1 来自天朝的朋友 QQ浏览器 Redmi K20 Pro Build/QKQ1.190825.002 湖北省武汉市 联通
              回复 2020年1月19日 11:49  2层

              @仙踪小栈 谢谢已经可以了，是我时间没改。

                • 仙踪小栈 仙踪小栈 博主 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省苏州市 电信
                  回复 2020年1月21日 09:32  3层

                  @Y . 是吧，我的教程是能有多通俗就多通俗