记一次给wordpress添加倒计时模块
本文最后更新于 336 天前,其中的信息可能已经有所发展或是发生改变。

想弄个回家倒计时,找了一下没有倒计时的区块,只有Argon主题自带的一个进度条(只能手动调节进度)。遂百度,跟着https://blog.csdn.net/CNITZY/article/details/99825301这篇文章操作一下,也给以后写个教程。

先创建countdownjs.js,保存在当前所使用主题的js目录里,我的是/wp-content/themes/argon/assets/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(endDate > now){
document.getElementById('time').innerHTML = '活动倒计时:';
document.getElementById('day').innerHTML = getDay +'天';
document.getElementById('hour').innerHTML = getHour +'时';
document.getElementById('min').innerHTML = getMinute +'分';
document.getElementById('sec').innerHTML = getSecond +'秒';
}else{
document.getElementById('countdown').innerHTML= '本次倒计时已经结束'
}
}

然后修改functions.php,我的在/wp-content/themes/argon/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 '本次活动已经结束';
}
}
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' );

我没找到最后一个?>就直接复制到最后面了。

弄完之后实验了一下发现不顶用,看了一下第二段代码28行里有个

wp_register_script( 'countdown_js', get_template_directory_uri() . '/js/countdownjs.js', array(), '1.0', false );

这里我输出了一下,发现这个路径和countdownjs.js的实际路径差一个/assets,补上之后就像这样

wp_register_script( 'countdown_js', get_template_directory_uri() . '/assets/js/countdownjs.js', array(), '1.0', false );

再次测试,成功!


效果

在发布/更新文章的时候,在想要插入倒计时的位置直接写这个短代码:

[countdown time="2019-01-15 18:41:57"]

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


到2033-07-23 21:00:00还有


收工!

评论

  1. iPhone UC Browser
    11月前
    2023-7-19 10:35:01

    学习学习

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇