一款貼心的wordpress主題如果準(zhǔn)備有通知欄，那就會(huì)讓用戶感到更加的舒適，來(lái)看看這個(gè)wordpress卡覅方法，給網(wǎng)站添加頂部通知欄

一款貼心的wordpress主題如果準(zhǔn)備有通知欄，那就會(huì)讓用戶感到更加的舒適，來(lái)看看這個(gè)wordpress開發(fā)方法，給網(wǎng)站添加頂部通知欄。

方法：

制作了一段函數(shù)，放在functions.php的<?php下面：

//頂部通知欄
if ( ! function_exists( 'lifet_function_notice' ) ) :
	/**
	 * 簡(jiǎn)單的通知欄
	 */
	function lifet_function_notice() {
		 if (!isset($_COOKIE['close_top_notice'])){ ?>
			<div id="top_notice" class="black">
				<div class="top_notice_close" onclick="pushdownclose();"></div>
				<div class="top_notice_text_box">
					<span class="top_notice_txt" onclick="pushdownyes();">
						簡(jiǎn)單的通知
					</span>
				<div class="header_button">
					<!--關(guān)閉按鈕-->
					<button class="top_notice_button" onclick="pushdownclose();">?X?</button>
				 ? <!--了解按鈕-->	
					<button class="top_notice_button">
						<a href="#">
						關(guān)閉
						</a>
					</button>
					</div><!--.header_button-->
				</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 } 

			echo "
			<style type='text/css'>
			/** 頂部通知欄 **/
            #top_notice{
            	font-weight: bold;
            	font-size: 12px;
            	padding: 16px;
            	color: #fff;
            	background-color: #444
            }
            .top_notice_text_box{
                max-width: 980px;
                margin: 0 auto;
            	padding: 0 6px;
            }
            
            .top_notice_close{
            	cursor: pointer;
            	float: right;
            	font-size: 18px;
            	margin-right: 13px;
            	padding: 5px 0 3px;
            }
            
            .header_button{
            	float:right;
            }
            .top_notice_button{/*通告欄按鈕樣式*/
            	margin-left: 10px;
            	padding: 4px 16px;;
            	float: right;
            	background-color: #f5f5f5;
            	cursor:pointer
            }
            .top_notice_button a{
            	text-decoration:none;
            }
            
            .top_notice_txt a{
            	color:#fff;
            }
            			
            </style>";
            	}endif;

如何使用？

在你需要的地方，例如在主題根目錄下header.php的</body>下面添加以下代碼即可調(diào)用。

<?php lifet_function_notice();//通知?>

開始介紹：

網(wǎng)站有時(shí)需要一些通知來(lái)給所有訪客，所以我就參考了Google的“隱私條款變更通知”來(lái)制作了一個(gè)適用于任何網(wǎng)頁(yè)（包括 WordPress ）的“ 通知欄 ”

1、首先當(dāng)然先添加一下外觀樣式，將下列代碼添加至網(wǎng)頁(yè)的? <style> ?或CSS文件內(nèi)（也就是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;
}
?

2、現(xiàn)在就需要添加HTML代碼了，我制作的代碼是先使用 PHP 判斷用戶是否存在已閱讀的Cookie，如果沒有就顯示通告，只需要把如下代碼加入網(wǎng)頁(yè)（也就是“header.php”文件）的? <body> ?后方就行啦！（注意把內(nèi)容修改為你自己需要通知的內(nèi)容）

<?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">通知內(nèi)容</span>
		<div class="top_notice_button" onclick="pushdownyes();">“立刻閱讀”按鈕Value</div>
		<div class="top_notice_button" onclick="pushdownclose();">關(guān)閉</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 = "“立即閱讀”跳轉(zhuǎn)的鏈接";
}
function pushdownclose(){
	setCookie("close_top_notice", true, 5);
	document.getElementById('top_notice').style.display="none"; 
}
</script>
<?php } ?>

總結(jié)

1、其實(shí)這個(gè)通知欄發(fā)揮空間可以很大，例如做成“最新文章”或“警告欄”等? 怎么給網(wǎng)站添加頂部通知欄？ - wordpress開發(fā)

2、有問(wèn)題可以回復(fù)哦? 怎么給網(wǎng)站添加頂部通知欄？ - wordpress開發(fā)

在CSS?#top_notice{?加入?position: fixed;?應(yīng)該就可以固定在頂部啦～

? 版權(quán)聲明：本文章采用“姓名標(biāo)示-非商業(yè)性-相同方式分享 4.0 國(guó)際（CC BY-NC-SA 4.0）”于“暢想資源”發(fā)布，轉(zhuǎn)載時(shí)須以相同方式發(fā)布并注明“原文鏈接”！

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

題外：

將部分代碼改成下方形式，可實(shí)現(xiàn)：

關(guān)閉瀏覽器后打開顯示

function pushdownyes(){
	setCookie("close_top_notice", true);
	window.location = "“立即閱讀”跳轉(zhuǎn)的鏈接";
}
function pushdownclose(){
	setCookie("close_top_notice", true);
	document.getElementById('top_notice').style.display="none"; 
}
?

參考鏈接：