WordPress

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

微信扫一扫,分享到朋友圈

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

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

效果图

代码实现

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

下载地址:https://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"]
自媒体人,喜欢网络,热爱研究。本站头条号:星河 熊掌号:海拔科技

规则 | Imagus 阿里巴巴、1688网站图片放大正则

上一篇

6月11日小米手环4发布!雷军再曝NFC支付新功能

下一篇

你也可能喜欢

2 条评论

  1. 您好 我根据您上面的步骤,没有效果?请问怎么弄?谢谢前辈

    1. @z 现在是啥情况,没效果具体表现是什么?

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示:点击验证后方可评论!

插入图片