纯代码WordPress站点添加倒计时功能

纯代码WordPress站点添加倒计时功能

作者 : 资源客 发布时间: 2019-12-2

众所周知动态的倒计时代码是通过 javascript 来实现的[后面简称为 js],我们只需要运用 js 和 function 调用再通过 wordpress 短代码功能的获取就可以实现一个简单的倒计时功能。在发现限时的活动或是报名中,做为促进消费和转化用户是非常好用的一个营销功能,可以让访客抓紧时间想要获取内容或是福利。前两天分享了通过安装一个 Countdown Timer Ultimate 插件来实现为 WordPress 站点添加倒计时的功能,虽然很方便但是部分站长对插件天生不喜,所以今天就给大家转载分享一个纯代码的办法来为 WordPress 站点添加倒计时。代码结构有点小复杂或是应用起来非常简单,只需要在现有的 wordpress 主题里加入一个 js 文件,然后把调用的代码添加到主题 function 主函数文件内,然后找到需要触发和显示的位置。添加 wordpress 短代码功能就可以实现了。同样给大家了另外一种调用形式,对于时间的调整更灵活有兴趣的可以尝试一下。

实现步骤

1、把下面的代码保存为 countdownjs.js,保存在当前所使用主题的 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= '本次活动已经结束'
    }
    }

2、把下面的代码添加到当前主题的 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' );

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

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

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

这个纯代码为 WordPress 站点添加倒计时还是非常简单易用的,只需要添加好 JS 文件和代码后,想添加倒计时就通过短代码来实现即可。如果担心忘记,我们还可以将倒计时的短代码集成到编辑器中。文章中的代码只是一种思路,倒计时的样式并没有美化,建议有需要的站长结合自己的主题来进行 DIY 会更好。

http://xzh.i3geek.com
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请不要用于商业用途及非法用途,否则后果自负!
3. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"qq301.com",如遇到无法解压的请联系管理员!
资源客是一个优秀的分享资源站,本站资源均为各位友友分享而来,特殊原创会标明如有侵犯版权等可联系删除

资源客 » 纯代码WordPress站点添加倒计时功能