WordPress添加文章倒计时短代码的步骤

美工学习 · 发表于 2023-12-1 22:06:37

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

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

x

文章倒计时对于T楼，预告等方面有奇异之效，可以勾起各种访客们的再次回访。代码来自麦田一根葱，感谢想出这么好的功能~

使用方法

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

function BYMT_countdown($atts, $content=null) {
extract(shortcode_atts(array("time" => ''), $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;
global $endtimes;
$endtimes = str_replace(array("-"," ",":"),",",$time);
if($endtime>$nowtime){
return '
这里面是什么内容？倒计时结束后，马上为您揭晓！还剩：
'.$day.'天
'.$hour.'时
'.$min.'分
'.$sect.'秒
';
}else{
return $content;
}
}
function BYMT_countdown_foot_JS() {
global $endtimes;
echo ''."\n";
}
add_shortcode('countdown', 'BYMT_countdown');
add_action('wp_footer', 'BYMT_countdown_foot_JS');
wp_register_script( 'BYMT_countdown_head_JS', get_template_directory_uri() . '/js/countdownjs.js', array(), '1.0', false );
wp_enqueue_script( 'BYMT_countdown_head_JS' );

复制代码

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

function add0(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 day2 = add0(day)
var hour2 = add0(hour)
var minute2 = add0(minute)
var second2 = add0(second)
$("#day").html(day2);
$("#hour").html(hour2);
$("#min").html(minute2);
$("#sec").html(second2);
}

复制代码

最后再添加一个小样式，加入style.css里：

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

复制代码

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

没问题了！

[countdown time=""]倒计时完成后显示的内容[/countdown]

复制代码

ime就是倒计时结束的时间，格式是20xx-08-08 18:20:57

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