WordPress纯代码为网站或文章添加倒计时功能

admin 2019年8月18日22:19:50 评论 169

这个教程很实用,特别是发布某些活动,是活动肯定有截止日期,所以博客在发布活动类型的文章底部添加一个活动结束倒计时还是不错的,WordPress通用。下面菜鸟IT资源网就来介绍下使用方法

纯代码添加倒计时到 WordPress

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

function ShowCountDown(prefix,year,month,day,hourd,minuted,seconded){
var now = new Date();
if( typeof(hourd) == "undefined" ) hourd=23;
if( typeof(minuted) == "undefined" ) minuted=59;
if( typeof(seconded) == "undefined" ) seconded=59;
var endDate = new Date(year, month-1, day, hourd, minuted,seconded);
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 day2 = (day<10?"0"+day:day);
var hour2 = (hour<10?"0"+hour:hour);
var minute2 = (minute<10?"0"+minute:minute);
var second2 = (second<10?"0"+second:second);
 
 jQuery("#"+prefix+"_countDown_day").html(day);
 jQuery("#"+prefix+"_countDown_hour").html(hour2);
 jQuery("#"+prefix+"_countDown_min").html(minute2);
 jQuery("#"+prefix+"_countDown_sec").html(second2);
 
}

2、复制下列代码,加入主题的function.php中 (注意倒数第二行的js文件路径,根据你主题的情况更改。)

function Brain_countdown($atts, $content=null) {
 extract(shortcode_atts(array("time" => ''), $atts));
 extract(shortcode_atts(array("prefix" => ''), $atts));
 date_default_timezone_set('PRC');
 $endtime=strtotime($time);
 $nowtime=time();
 $counttime=$endtime-$nowtime;
 $day=floor($counttime/(60*60*24));
 $day=$day<10 ? "0".$day : $day;
 $hour=floor(($counttime-$day*24*60*60)/3600);
 $hour=$hour<10 ? "0".$hour : $hour;
 $min=floor(($counttime-$day*24*60*60-$hour*3600)/60);
 $min=$min<10 ? "0".$min : $min;
 $sect=floor($counttime-$day*24*60*60-$hour*3600-$min*60-1);
 $sect=$sect<10 ? "0".$sect : $sect; $endtimes = str_replace(array("-"," ",":"),",",$time); if($endtime>$nowtime){
return '
<div class="countDownCont">活动倒计时: <span id="'.$prefix.'_countDown_day" style="left: 10px;">'.$day.'</span>天 <span id="'.$prefix.'_countDown_hour" style="left: 125px;">'.$hour.'</span>时 <span id="'.$prefix.'_countDown_min" style="left: 232px;">'.$min.'</span>分 <span id="'.$prefix.'_countDown_sec" style="left: 342px;">'.$sect.'</span>秒</div>
<script>window.setInterval(function(){ShowCountDown("'.$prefix.'" , '.$endtimes.' );}, 1000);</script> '; }else{ return $content; } } add_shortcode('countdown', 'Brain_countdown'); wp_register_script( 'Brain_countdown_head_JS', get_template_directory_uri() . '/js/countdownjs.js', array(), '1.0', false ); wp_enqueue_script( 'Brain_countdown_head_JS' );

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

[countdown time='2019-01-15 20:30:30' prefix='pro1']活动已结束[/countdown]

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

如图:

admin

发表评论

您必须才能发表评论!