WordPress添加文章倒计时短代码

背景

  • 发表腾讯活动文章的时候,突然想增加一个活动结束倒计时。然后就开始折腾了,记录一下折腾。。。
  • 本站主题begin,修改部分网上资源。
  • 代码来自网络,感谢作者!

方法


将以下代码加入functions.php中:

functions.php位置:网站根目录/wp-content/themes/begin/functions.php

  1. function BYMT_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. $counttime=$endtime-$nowtime;
  7. $day=floor($counttime/(60*60*24));
  8. $day=$day<10 ? "0".$day : $day;
  9. $hour=floor(($counttime-$day*24*60*60)/3600);
  10. $hour=$hour<10 ? "0".$hour : $hour;
  11. $min=floor(($counttime-$day*24*60*60-$hour*3600)/60);
  12. $min=$min<10 ? "0".$min : $min;
  13. $sect=floor($counttime-$day*24*60*60-$hour*3600-$min*60-1);
  14. $sect=$sect<10 ? "0".$sect : $sect;
  15. global $endtimes;
  16. $endtimes = str_replace(array("-"," ",":"),",",$time);
  17. if($endtime>$nowtime){
  18. return '
  19. <div class="reply-to-read">距离结束还剩:
  20. <div class="Countdownbox">
  21. <div style="left:10px;" id="day">'.$day.'天</div>
  22. <div style="left:125px;" id="hour">'.$hour.'时</div>
  23. <div style="left:232px;" id="min">'.$min.'分</div>
  24. <div style="left:342px;" id="sec">'.$sect.'秒</div>
  25. </div></div>
  26. ';
  27. }else{
  28. return $content;
  29. }
  30. }
  31. function BYMT_countdown_foot_JS() {
  32. global $endtimes;
  33. echo '<script>window.setInterval(function(){ShowCountDown('.$endtimes.');}, interval);</script>'."\n";
  34. }
  35. add_shortcode('countdown', 'BYMT_countdown');
  36. add_action('wp_footer', 'BYMT_countdown_foot_JS');
  37. wp_register_script( 'BYMT_countdown_head_JS', get_template_directory_uri() . '/js/countdownjs.js', array(), '1.0', false );
  38. wp_enqueue_script( 'BYMT_countdown_head_JS' );

将下面代码另存为countdownjs.js文件,并上传到主题js文件夹里

位置:网站根目录/wp-content/themes/begin/js 内

  1. function add0(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. {
  11. var now = new Date();
  12. var endDate = new Date(year, month-1, day, hourd, minuted);
  13. var leftTime=endDate.getTime()-now.getTime();
  14. var leftsecond = parseInt(leftTime/1000);
  15. var day=Math.floor(leftsecond/(60*60*24));
  16. day = day < 0 ? 0 : day;
  17. var hour=Math.floor((leftsecond-day*24*60*60)/3600);
  18. hour = hour < 0 ? 0 : hour;
  19. var minute=Math.floor((leftsecond-day*24*60*60-hour*3600)/60);
  20. minute = minute < 0 ? 0 : minute;
  21. var second=Math.floor(leftsecond-day*24*60*60-hour*3600-minute*60);
  22. second = second < 0 ? 0 : second;
  23. var day2 = add0(day)
  24. var hour2 = add0(hour)
  25. var minute2 = add0(minute)
  26. var second2 = add0(second)
  27. $("#day").html(day2);
  28. $("#hour").html(hour2);
  29. $("#min").html(minute2);
  30. $("#sec").html(second2);
  31. }

最后再添加一个小样式,加入style.css里:

位置:网站后台/外观/编辑/style.css   (一般都在最底部)

  1. .Countdownbox{width:456px; height:116px; position:relative; background: url(images/Countdown.jpg) center center no-repeat; margin:0 auto;}
  2. .Countdownbox div{width:70px;height:90px;text-align:center;font:bold 50px/91px arial;color:#fff;position:absolute;top: 15px;}

这个小小的图片就放在主题目录的images文件夹里:

位置:网站根目录/wp-content/themes/begin/images  (没有这文件夹,自己新建一个文件夹)

 

图片地址:https://cvps.top/wp-content/uploads/2019/05/78086-98696d15gy1flhz7qi00fj20co038747.jpg

 

使用方法

请将下面代码中的"去掉我"删除,得到完整代码!

  1. [c去掉我ountdown time=""]倒计时完成后显示的内容[/countdown]

time就是倒计时结束的时间,格式是2017-09-09 18:18:18

例子:

  1. [countdown time="2027-09-15 18:18:18"]活动已结束[/countdown]

在文章内容直接添加代码就可以!!!

[countdown time="2027-09-30 23:59:59"]活动已结束![/countdown]

阅读剩余
THE END