纯代码实现WordPress主题添加倒计时功能,后台编辑器增加快速插入按钮20200728修改版[wordpress教程]

纯代码实现WordPress主题添加倒计时功能,后台编辑器增加快速插入按钮[wordpress教程]

纯代码实现WordPress主题添加倒计时功能,后台编辑器增加快速插入按钮20200728修改版[wordpress教程]-度崩网-几度崩溃

有些WordPress搭建的站点会发布一些限时活动或者限时的营销,仅仅在页面写上结束日期并不是很明了,因为搜索引擎上的内容会一直存在,所以可能会给某些访客造成误导,今天盾给网给大家带来的是纯代码实现WordPress主题添加倒计时功能!

原教程参考自技术宅:https://jszbug.com/17257

盾给网加了活动已经结束的css和后台编辑器的快速插入按钮。

其实很简单,就是给当前主题添加一段JS代码和一段函数即可轻松实现!

JS代码

将以下JS代码片段复制并保存为countdownjs.js,然后复制到主题当前目录下的js目录下:20200728修改,增加判断,修复没有短代码,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));day=day<0?0:day;
  15. var hour=Math.floor((leftsecond-day*24*60*60)/3600);hour=hour<0?0:hour;
  16. var minute=Math.floor((leftsecond-day*24*60*60-hour*3600)/60);minute=minute<0?0:minute;
  17. var second=Math.floor(leftsecond-day*24*60*60-hour*3600-minute*60);second=second<0?0:second;
  18. var getDay=getAdd(day);
  19. var getHour=getAdd(hour);
  20. var getMinute=getAdd(minute);
  21. var getSecond=getAdd(second);
  22. if(null != document.getElementById('countdown')){
  23. if(endDate>now){
  24. document.getElementById('time').innerHTML='<i class="icon-time"></i> 活动倒计时:';
  25. document.getElementById('day').innerHTML=getDay+' <span style="color: #111010; font-weight: 800;">天</span>';
  26. document.getElementById('hour').innerHTML=getHour+' <span style="color: #111010; font-weight: 800;">时</span>';
  27. document.getElementById('min').innerHTML=getMinute+' <span style="color: #111010; font-weight: 800;">分</span>';
  28. document.getElementById('sec').innerHTML=getSecond+' <span style="color: #111010; font-weight: 800;">秒</span>';
  29. }else{
  30. document.getElementById('countdown').innerHTML='<div id="countdown"><span style="color: #d00000; font-weight: 800;"><i class="icon-time"></i> 本次活动已经结束</span></div>';
  31. }
  32. }
  33. }

PHP代码

将以下PHP代码复制到主题的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 '<div id="countdown"><span id="endTime">本次活动已经结束</span></div>';
  20. }
  21. }
  22. function countdown_js() {
  23. global $endtimes;
  24. echo '<script>window.setInterval(function(){ShowCountDown('.$endtimes.');}, interval);</script>'."n";
  25. }
  26. add_shortcode('countdown', 'countdown');
  27. add_action('wp_footer', 'countdown_js');
  28. wp_register_script( 'countdown_js', get_template_directory_uri() . '/js/countdownjs.js', array(), '1.0', false );
  29. wp_enqueue_script( 'countdown_js' );

CSS代码

  1. /*倒计时卡片样式开始*/
  2. #endTime{color:#d00000;font-weight:800}#time{color:#d00000;font-weight:800}#day{color:#d00000;font-weight:800}#hour{color:#d00000;font-weight:800}#min{color:#d00000;font-weight:800}#sec{color:#d00000;font-weight:800}#countdown{background:hsla(0,0%,9%,.32);border-radius:6px;line-height:45px;text-align:center;font-size:15px}
  3. /*倒计时卡片样式结束*/

代码调用

在需要显示倒计时的文章内容中添加以下代码即可,日期按照代码中的格式修改即可:去掉中括号旁边的?

  1. [?countdown time="2020-01-01 00:00:00"?]

编辑器增加按钮

纯代码实现WordPress主题添加倒计时功能,后台编辑器增加快速插入按钮20200728修改版[wordpress教程]-度崩网-几度崩溃
纯代码实现WordPress主题添加倒计时功能,后台编辑器增加快速插入按钮20200728修改版[wordpress教程]-度崩网-几度崩溃

wordpress提高Google Adsense谷歌广告CTR和CPC的方法之一,文章内短代码嵌入广告[wordpress教程]

纯代码实现WordPress主题添加倒计时功能,后台编辑器增加快速插入按钮20200728修改版[wordpress教程]-度崩网-几度崩溃
纯代码实现WordPress主题添加倒计时功能,后台编辑器增加快速插入按钮20200728修改版[wordpress教程]-度崩网-几度崩溃

wordpress后台编辑器增加自定义快捷插入按钮[wordpress教程]

已结束演示

本次活动已经结束

倒计时演示

活动倒计时: 1782 04 43 15

WordPress教程

WordPress网站如何添加面包屑导航[wordpress教程]

2020-7-22 15:17:37

WordPress教程

今日头条四栏金黄卡片_wordpress区块[wordpress美化教程]

2020-7-26 14:46:44

本站所发布的一切源码、模板、应用等文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权。本站内容适用于DMCA政策。若您的权利被侵害,请与我们联系处理,站长 QQ: 84087680 或 点击右侧 私信:盾给网 反馈,我们将尽快处理。
⚠️
本站所发布的一切源码、模板、应用等文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权。本站内容适用于DMCA政策
若您的权利被侵害,请与我们联系处理,站长 QQ: 84087680 或 点击右侧 私信:盾给网 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
欢迎您,新朋友,感谢参与互动!
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
私信列表
搜索