WordPress中定制短代码，实现倒计时功能的方法

美工学习 · 发表于 2023-12-1 22:11:45

亲注册登录道勤网-可以查看更多帖子内容哦！（包涵精彩图片、文字详情等）请您及时注册登录-www.daoqin.net

您需要登录才可以下载或查看，没有账号？立即注册

x

很多朋友希望页面上出现一个活动倒计时的效果，为了方便调用，可以利用短代码+参数实现任意调用。实现效果是这样的：

偷懒百度了一下，发现已有人实现出来，参考这个文档。WordPress添加文章倒计时短代码的步骤

但他做的功能比较简单，首先参数必须完整，年月日时分秒一个都不能少，并且在一个页面上还只能出现一个倒计时，限制比较大。于是我在此基础上整理了下代码，完善了一下功能。

首先是PHP部分，以下代码加入主题的function.php

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 style="left:10px;" id="'.$prefix.'_countDown_day">'.$day.'</span>天
<span style="left:125px;" id="'.$prefix.'_countDown_hour">'.$hour.'</span>时
<span style="left:232px;" id="'.$prefix.'_countDown_min">'.$min.'</span>分
<span style="left:342px;" id="'.$prefix.'_countDown_sec">'.$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' );

复制代码

然后是JS部分，将下面代码另存为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);
}

复制代码

调用：
短代码

[countdown time='2016-7-10 20:30:30' prefix='pro1']活动已结束[/countdown]
[countdown time='2016-7-19' prefix='pro2']活动已结束[/countdown]
...

复制代码

其中参数prefix允许在同一个页面调用多个不同的短代码，只要每个的prefix不同即可
标签内部的“活动已结束”可以改成任何文本或HTML代码
如果在time参数中把时分秒省略，会默认时分秒为23:59:59，也就是当天最后一秒，这对一些只需精确到天的倒计时还是比较有用的

也可以用do_shortcode在主题模板上直接调用：

echo do_shortcode("[countdown time='2016-7-10 20:30:30' prefix='pro1']活动已结束[/countdown]");

复制代码

CSS部分就因人而异，不贴出来了。

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！