WordPress添加文章倒计时短代码
背景
- 发表腾讯活动文章的时候，突然想增加一个活动结束倒计时。然后就开始折腾了，记录一下折腾。。。
- 本站主题begin，修改部分网上资源。
- 代码来自网络，感谢作者！
方法
将以下代码加入functions.php中：
functions.php位置：网站根目录/wp-content/themes/begin/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 '
- <div class="reply-to-read">距离结束还剩：
- <div class="Countdownbox">
- <div style="left:10px;" id="day">'.$day.'天</div>
- <div style="left:125px;" id="hour">'.$hour.'时</div>
- <div style="left:232px;" id="min">'.$min.'分</div>
- <div style="left:342px;" id="sec">'.$sect.'秒</div>
- </div></div>
- ';
- }else{
- return $content;
- }
- }
- function BYMT_countdown_foot_JS() {
- global $endtimes;
- echo '<script>window.setInterval(function(){ShowCountDown('.$endtimes.');}, interval);</script>'."\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文件夹里
位置：网站根目录/wp-content/themes/begin/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里：
位置：网站后台/外观/编辑/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文件夹里：
位置：网站根目录/wp-content/themes/begin/images （没有这文件夹，自己新建一个文件夹）
图片地址：https://cvps.top/wp-content/uploads/2019/05/78086-98696d15gy1flhz7qi00fj20co038747.jpg
使用方法
请将下面代码中的"去掉我"删除，得到完整代码！
- [c去掉我ountdown time=""]倒计时完成后显示的内容[/countdown]
time就是倒计时结束的时间，格式是2017-09-09 18:18:18
例子:
- [countdown time="2027-09-15 18:18:18"]活动已结束[/countdown]
在文章内容直接添加代码就可以！！！
[countdown time="2027-09-30 23:59:59"]活动已结束！[/countdown]
阅读剩余
版权声明：
作者：admin
链接：https://www.cyvps.com/7939.html
文章版权归作者所有，未经允许请勿转载。
THE END