一款貼心的wordpress主題如果準備有通知欄，那就會讓用戶感到更加的舒適，來看看這個wordpress卡覅方法，給網站添加頂部通知欄
一款貼心的wordpress主題如果準備有通知欄，那就會讓用戶感到更加的舒適，來看看這個wordpress開發方法，給網站添加頂部通知欄。
方法：
制作了一段函數，放在functions.php的<?php下面：
//頂部通知欄
if ( ! function_exists( 'lifet_function_notice' ) ) :
/**
* 簡單的通知欄
*/
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();">
簡單的通知
</span>
<div class="header_button">
<!--關閉按鈕-->
<button class="top_notice_button" onclick="pushdownclose();">?X?</button>
? <!--了解按鈕-->
<button class="top_notice_button">
<a href="#">
關閉
</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>下面添加以下代碼即可調用。
<?php lifet_function_notice();//通知?>
開始介紹：
網站有時需要一些通知來給所有訪客，所以我就參考了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;
}
?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 } ?>總結
1、其實這個通知欄發揮空間可以很大，例如做成“最新文章”或“警告欄”等?
2、有問題可以回復哦?
在CSS?#top_notice{?加入?position: fixed;?應該就可以固定在頂部啦～
? 版權聲明：本文章采用“姓名標示-非商業性-相同方式分享 4.0 國際（CC BY-NC-SA 4.0）”于“暢想資源”發布，轉載時須以相同方式發布并注明“原文鏈接”！
本文固定鏈接：https://www.arefly.com/zh-cn/wordpress-top-notice/
題外：
將部分代碼改成下方形式，可實現：
關閉瀏覽器后打開顯示
function pushdownyes(){
setCookie("close_top_notice", true);
window.location = "“立即閱讀”跳轉的鏈接";
}
function pushdownclose(){
setCookie("close_top_notice", true);
document.getElementById('top_notice').style.display="none";
}
?參考鏈接：
