实用 | 给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"]

海拔科技

自媒体人,喜欢网络,热爱研究。本站头条号:星河 熊掌号:海拔科技

相关推荐

解决WordPress 不支持magnet、ed2k 新协议支持

原标题:WordPress 超链接增加magnet、ed2k 新协议支持 需要在Wordpress的超链接中增加对magnet、ed2k等新协议的支持,效果类似: 肖申克的救赎 为防范SQL注入、XSS等攻击,Wordpress会在保存博客内容时候,对内 …

给WordPress古腾堡(Gutenberg)添加自定义块

本文内容参考 倾微博客 ,但是原文有几处错误导致不能使用于最新的WordPress,本博主进行了修改调整达到了无错可用。以下内容在WordPress5.0.4测试通过。 写在前面 Gutenberg(古腾堡)是一个新的 WordPress 编 …

WordPress时间函数the_time() 详细解析

之所以找the_time()函数的相关说明还是源于本站现在使用这个主题,刚刚发了一篇文章,被百度秒收,很开心,但是一看百度收录时间显示的是12小时前。 卧槽,这怎么回事,一看文章时间显示的真的是12小时之前,起 …