纯代码实现WordPress主题添加倒计时功能，后台编辑器增加快速插入按钮20200728修改版[wordpress教程]

纯代码实现WordPress主题添加倒计时功能，后台编辑器增加快速插入按钮[wordpress教程]

有些WordPress搭建的站点会发布一些限时活动或者限时的营销，仅仅在页面写上结束日期并不是很明了，因为搜索引擎上的内容会一直存在，所以可能会给某些访客造成误导，今天盾给网给大家带来的是纯代码实现WordPress主题添加倒计时功能！

原教程参考自技术宅：https://jszbug.com/17257

盾给网加了活动已经结束的css和后台编辑器的快速插入按钮。

其实很简单，就是给当前主题添加一段JS代码和一段函数即可轻松实现！

JS代码

将以下JS代码片段复制并保存为countdownjs.js，然后复制到主题当前目录下的js目录下：20200728修改，增加判断，修复没有短代码，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(null != document.getElementById('countdown')){
  	if(endDate>now){
      document.getElementById('time').innerHTML='<i class="icon-time"></i> 活动倒计时：';
      document.getElementById('day').innerHTML=getDay+' <span style="color: #111010; font-weight: 800;">天</span>';
      document.getElementById('hour').innerHTML=getHour+' <span style="color: #111010; font-weight: 800;">时</span>';
      document.getElementById('min').innerHTML=getMinute+' <span style="color: #111010; font-weight: 800;">分</span>';
      document.getElementById('sec').innerHTML=getSecond+' <span style="color: #111010; font-weight: 800;">秒</span>';
    }else{
      document.getElementById('countdown').innerHTML='<div id="countdown"><span style="color: #d00000; font-weight: 800;"><i class="icon-time"></i> 本次活动已经结束</span></div>';
    }
  }
  
}

PHP代码

将以下PHP代码复制到主题的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 '<div id="countdown"><span id="endTime">本次活动已经结束</span></div>';
 
}
 
}
 
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' );

CSS代码

/*倒计时卡片样式开始*/
#endTime{color:#d00000;font-weight:800}#time{color:#d00000;font-weight:800}#day{color:#d00000;font-weight:800}#hour{color:#d00000;font-weight:800}#min{color:#d00000;font-weight:800}#sec{color:#d00000;font-weight:800}#countdown{background:hsla(0,0%,9%,.32);border-radius:6px;line-height:45px;text-align:center;font-size:15px}
/*倒计时卡片样式结束*/

代码调用

在需要显示倒计时的文章内容中添加以下代码即可，日期按照代码中的格式修改即可：去掉中括号旁边的？

[?countdown time="2020-01-01 00:00:00"?]

编辑器增加按钮

wordpress提高Google Adsense谷歌广告CTR和CPC的方法之一，文章内短代码嵌入广告[wordpress教程]

盾给网

• 20年4月20日
• 喜欢：0
• 浏览：786

wordpress后台编辑器增加自定义快捷插入按钮[wordpress教程]

盾给网

• 20年7月26日
• 喜欢：0
• 浏览：632

已结束演示

倒计时演示