WordPress · 2019年6月10日

实用 | 给WordPress添加倒计时功能 可自定义计时内容

本内容已实测并正式应用,无bug,但是具体细节需要您根据自己的情况进行修改,这里以演示为例,实现指定时间倒计时,计时到期后显示指定链接。

效果图

代码实现

1、将contdownjs.js上传至主题目录下的js文件夹(可根据实际情况自己行修改,但是下面的代码也要计时修改为对应的可以访问到的路径)

下载地址:http://yun.haibakeji.com/index.php?share/file&user=1&sid=j5dxqFQK

提取密码:BpvVU

2、需添加至function.php的代码部分

//倒计时模块
function countdown($atts, $content=null) {
	extract(shortcode_atts(array("time" => '',"url"=>''), $atts));
	date_default_timezone_set('PRC');
	$endtime=strtotime($time);
	$nowtime=time();
	global $endtimes;
	$endtimes = str_replace(array("-"," ",":"),",",$time);
	if(is_single()){
	echo "<script type='text/javascript' src='".get_stylesheet_directory_uri()."/js/countdownjs.js?ver=1.1'></script>";
	echo '<script>window.setInterval(function(){ShowCountDown('.$endtimes.');}, interval);</script>'."\n";
	}
	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 '
		<div id="countdown">资源现已免费,欢迎下载保存。<br><br>下载地址:<a href="'.$url.'" target="_blank" style="color:blue">★点击进入下载页面★</a></div>'
		;
	}
}
function countdown_js() {
	global $endtimes;
	echo '<script>window.setInterval(function(){ShowCountDown('.$endtimes.');}, interval);</script>'."\n";
}
add_shortcode('countdown', 'countdown');

后台实现

后台实现为短代码方式,具体内容如下(可根据实际情况调整上面的代码进而实现自定义内容展现)

[countdown time="2019-06-15 14:00:00" url="https://baidu.com"]