给网站添加顶部通知栏

11 月122013

作者：超级efly 发布：2013-11-12 18:46 分类：网络阅读：9,681

网站有时需要一些通知来给所有访客，所以我就参考了Google的「隐私条款变更通知」来制作了一个适用于任何网页（包括WordPress）的「通知栏」

插件（插件）版

教程

1、首先当然先添加一下外观样式，将下列代码添加至网页的 <style> 或CSS文件内（也就是Wordpress主题目录下的「样式表 (style.css)」）（所有样式均提取于Google）

/** 顶部通知栏 **/
#top_notice{
	font-weight: bold;
	font-size: 13px;
	zoom: 1;
	background-color: rgb(66, 114, 219);
}

.top_notice_text_box{
	margin-left: 12px;
}

.top_notice_text{
	padding: 8px 12px 6px 0;
	zoom: 1;
	color: #fff;
}

.top_notice_close{
	cursor: pointer;
	float: right;
	font-size: 18px;
	margin-right: 13px;
	padding: 5px 0 3px;
	float: right;
	color: #bcc9e8;
}
.top_notice_button{
	cursor: pointer;
	display: inline-block;
	margin-left: 10px;
	padding: 8px 12px 6px;
	zoom: 1;
	color: rgb(188, 201, 232);
	background-color: rgb(34, 85, 203);
}

.top_notice_button:hover{
	color: #fff;
}

/** 顶部通知栏 **/

#top_notice{

font-weight: bold;

font-size: 13px;

zoom: 1;

background-color: rgb(66, 114, 219);

}

.top_notice_text_box{

margin-left: 12px;

}

.top_notice_text{

padding: 8px 12px 6px 0;

zoom: 1;

color: #fff;

}

.top_notice_close{

cursor: pointer;

float: right;

font-size: 18px;

margin-right: 13px;

padding: 5px 0 3px;

float: right;

color: #bcc9e8;

}

.top_notice_button{

cursor: pointer;

display: inline-block;

margin-left: 10px;

padding: 8px 12px 6px;

zoom: 1;

color: rgb(188, 201, 232);

background-color: rgb(34, 85, 203);

}

.top_notice_button:hover{

color: #fff;

}

2、现在就需要添加HTML代码了，我制作的代码是先使用PHP判断用户是否存在已阅读的Cookie，如果没有就显示通告，只需要把如下代码加入网页（也就是「header.php」文件）的 <body> 后方就行啦！（注意把内容修改为你自己需要通知的内容）

<?php if (!isset($_COOKIE['close_top_notice'])){ ?>
<div id="top_notice">
	<div class="top_notice_close" onclick="pushdownclose();"> × </div>
	<div class="top_notice_text_box">
		<span class="top_notice_text">通知内容</span>
		<div class="top_notice_button" onclick="pushdownyes();">「立刻阅读」按钮Value</div>
		<div class="top_notice_button" onclick="pushdownclose();">关闭</div>
	</div>
</div>

<script>
//Set Cookies
function setCookie(c_name,value,expiredays){
	var exdate=new Date()
	exdate.setDate(exdate.getDate()+expiredays)
	document.cookie=c_name+ "=" +escape(value)+
	((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}

function pushdownyes(){
	setCookie("close_top_notice", true, 30);
	window.location = "「立即阅读」跳转的链接";
}
function pushdownclose(){
	setCookie("close_top_notice", true, 5);
	document.getElementById('top_notice').style.display="none"; 
}
</script>
<?php } ?>

<?php if (!isset($_COOKIE['close_top_notice'])){ ?>

<div class="top_notice_button" onclick="pushdownyes();">「立刻阅读」按钮Value</div>

</div>

//Set Cookies

function setCookie(c_name,value,expiredays){

var exdate=new Date()

exdate.setDate(exdate.getDate()+expiredays)

document.cookie=c_name+ "=" +escape(value)+

((expiredays==null) ? "" : ";expires="+exdate.toGMTString())

}

function pushdownyes(){

setCookie("close_top_notice", true, 30);

window.location = "「立即阅读」跳转的链接";

}

function pushdownclose(){

setCookie("close_top_notice", true, 5);

document.getElementById('top_notice').style.display="none";

}

</script>

<?php } ?>

预览（图片点击放大）

总结

1、其实这个通知栏发挥空间可以很大，例如做成「最新文章」或「警告栏」等

2、有问题可以回复哦

觉得这篇文章有用吗？分享一下让更多人受益吧！

本文固定链接：https://www.arefly.com/zh-hans/wordpress-top-notice/

插件（插件）版

教程

预览（图片点击放大）

总结

觉得这篇文章有用吗？分享一下让更多人受益吧！

您可能还会对这些文章感兴趣！