給網站添加頂部通知欄

11 月122013

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

網站有時需要一些通知來給所有訪客，所以我就參考了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/wordpress-top-notice/

外掛（插件）版

教程

預覽（圖片點擊放大）

總結

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

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