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

2021-05-22 0 1,844 百度已收录

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

实现步骤

1、把下面的代码保留为 countdownjs.js,保留在当前所使用主题的 js/目录里:

  1.     function getAdd(time){
  2.     if(time<10){
  3.     return "0"+time;
  4.     }else{
  5.     return time;
  6.     }
  7.     }
  8.     var interval = 1000;
  9.     function ShowCountDown(year,month,day,hourd,minuted){
  10.     var now = new Date();
  11.     var endDate = new Date(year, month-1, day, hourd, minuted);
  12.     var leftTime = endDate.getTime() - now.getTime();
  13.     var leftsecond = parseInt(leftTime/1000);
  14.     var day = Math.floor(leftsecond/(60*60*24));
  15.     day = day < 0 ? 0 : day;
  16.     var hour = Math.floor((leftsecond-day*24*60*60)/3600);
  17.     hour = hour < 0 ? 0 : hour;
  18.     var minute = Math.floor((leftsecond-day*24*60*60-hour*3600)/60);
  19.     minute = minute < 0 ? 0 : minute;
  20.     var second = Math.floor(leftsecond-day*24*60*60-hour*3600-minute*60);
  21.     second = second < 0 ? 0 : second;
  22.     var getDay = getAdd(day);
  23.     var getHour = getAdd(hour);
  24.     var getMinute = getAdd(minute);
  25.     var getSecond = getAdd(second);
  26.     if(endDate > now){
  27.     document.getElementById('time').innerHTML = '流动倒计时:';
  28.     document.getElementById('day').innerHTML = getDay +'天';
  29.     document.getElementById('hour').innerHTML = getHour +'时';
  30.     document.getElementById('min').innerHTML = getMinute +'分';
  31.     document.getElementById('sec').innerHTML = getSecond +'秒';
  32.     }else{
  33.     document.getElementById('countdown').innerHTML= '本次流动已经竣事'
  34.     }
  35.     }

2、把下面的代码添加到当前主题的 functions.php 文件最后一个 ?> 的前面:

  1.     function countdown($atts, $content=null) {
  2.     extract(shortcode_atts(array("time" => ''), $atts));
  3.     date_default_timezone_set('PRC');
  4.     $endtime=strtotime($time);
  5.     $nowtime=time();
  6.     global $endtimes;
  7.     $endtimes = str_replace(array("-"," ",":"),",",$time);
  8.     if($endtime>$nowtime){
  9.     return '
  10.     <div id="countdown">
  11.     <span id="time"></span>
  12.     <span id="day"></span>
  13.     <span id="hour"></span>
  14.     <span id="min"></span>
  15.     <span id="sec"></span>
  16.     </div>
  17.     ';
  18.     }else{
  19.     return '本次流动已经竣事';
  20.     }
  21.     }
  22.     function countdown_js() {
  23.     global $endtimes;
  24.     echo '<script>window.setInterval(function(){ShowCountDown('.$endtimes.');}, interval);</script>'."\n";
  25.     }
  26.  
  27.     add_shortcode('countdown', 'countdown');
  28.     add_action('wp_footer', 'countdown_js');
  29.     wp_register_script( 'countdown_js', get_template_directory_uri() . '/js/countdownjs.js', array(), '1.0', false );
  30.     wp_enqueue_script( 'countdown_js' );

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

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

其中 time=”2019-01-15 18:41:57″引号中的时间就是流动竣事时间,修改为其他日期时间时请保持花样一致即可。
纯代码WordPress站点添加倒计时功能
这个纯代码为 WordPress 站点添加倒计时照样异常简朴易用的,只需要添加好 JS 文件和代码后,想添加倒计时就通过短代码来实现即可。若是忧郁遗忘,我们还可以将倒计时的短代码集成到编辑器中。文章中的代码只是一种思绪,倒计时的样式并没有美化,建议有需要的站长连系自己的主题来举行 DIY 会更好。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3308869544
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有猫币奖励和额外收入!

主题镇 WP教程 纯代码WordPress站点添加倒计时功能 https://zhutizhen.com/14498.html

永远为用户服务的镇长!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或联络我们。
查看详情

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务