[赋能]纯代码为wordpress主题添加倒计时功能

众所周知动态的倒计时代码是通过javascript来实现的[后面简称为js]，我们只需要运用js和function调用再通过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= '本次活动已经结束'}}1617181920212223242526272829303132333435function 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' );1617181920212223242526272829function 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="2016-07-09 18:41:57"]1[countdown time="2016-07-09 18:41:57"]

其中 time=”2016-07-09 18:41:57″ 引号中的是结束时间，格式保持一致

扩展：

如果不需要短代码功能，可以把第2步的代码修改如下：

function countdown($time) {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_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' );161718192021222324252627function countdown($time) {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_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' );

然后在主题文件中添加调用代码：

<?php countdown('2016-07-09 17:29:00');?>1<?php countdown('2016-07-09 17:29:00');?>

引号中的是结束时间格式，格式保持一致

上一篇：把握好这五点wordpress企业站分分钟优化到极致

下一篇：[开发篇]六个步骤轻松搞定wordpress主题小工具开发和创建

---

wordpress主题