大部分情況下網站公告通常放在首頁，或是有經營 FB 粉絲團、社群媒體的話，重大事情在社群發佈的效果會比較好。然而這樣的處理方式，只能將公告內容擴散給粉絲。至於非粉絲的話，例如從搜尋引擎而來、或從別的網站連結過來的訪客，基本上只會到達文章頁面，不會看到首頁或社群媒體。
所以網站最好的處理方式，是在每個頁面最上方都出現置頂公告，如此可以確保通知所有訪客無漏網之魚。
對於一般部落格而言，可能不會經常有大事件需要公告，不過倒是可以借用置頂公告當作廣告，拿來宣傳「特定的熱門文章」、「社群媒體」等等。如果是商業用途的網站，那麼置頂公告更好用了，可以作為長期宣傳「商品」、「經營業務」、「加入會員」等等之用。
置頂公告這樣的功能已經有現成的免費/付費工具，不過因為這功能很簡單，乾脆自己開發一個，網站也可減少不必要的外連 JS(可參考「為何部落格最好避免第三方外掛」)，避免拖慢網頁速度。
以下先介紹這個小工具的功能，想要直接安裝可跳至「二、安裝程式碼」
(圖片出處: pexels.com)
一、置頂公告功能介紹
- 如果是注重使用者體驗的站長，會希望置頂公告可以讓訪客看過後選擇關閉，將來不再出現同樣的重複訊息，所以此工具可以設定置頂公告是否永遠顯示
- 比較低調的站長或許希望公告不要浮動「置頂」，而是改為浮動置底，此工具也可選擇出現在網頁底部。
- 如果開啟「關閉公告」的功能，當訪客關閉公告後，系統會自動記憶上次的公告內容。當下次站長更新公告內容時，置頂公告會重新顯示，直到訪客按下關閉為止。
- 此工具預設了幾種顏色模版，可自行修改背景顏色、按鈕顏色等等
- 如果熟悉 CSS 的話，可以自行調整所有 CSS 細節
二、安裝程式碼
在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。 請到後台「主題」→ "自訂" 按鈕右方的下拉圖示 →「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<!--Blogger 置頂公告 -->
<script>
//<![CDATA[
(function($) {
var newBulletin = "這裡是置頂公告內容，<a class='blt_btn blue' href='https://www.wfublog.com/' target='_blank'>按鈕</a> 也可使用！", // 填入要顯示的公告內容, 可使用 HTML 碼, 按鈕顏色可改 class 參數 blue、green、red、orange、black、white、gray、navy
enableClose = true, // 是否允許關閉公告, 允許填 true, 不允許填 false
position = "top", // 公告位置, 置頂填 "top", 置底填 "bottom"
bgColor = "white", // 背景色, 可使用 "blue" "green" "red" "orange" "black" "white" "gray" "navy"
delay = 3, // 幾秒後顯示
bulletinStatus = localStorage.bulletinStatus || "unRead";
var _0xb687=["\x75\x6E\x52\x65\x61\x64","\x62\x75\x6C\x6C\x65\x74\x69\x6E","\x62\x75\x6C\x6C\x65\x74\x69\x6E\x53\x74\x61\x74\x75\x73","","\x3C\x64\x69\x76\x20\x69\x64\x3D\x27\x68\x36\x30\x27\x3E\x3C\x2F\x64\x69\x76\x3E","\x3C\x64\x69\x76\x20\x69\x64\x3D\x27\x62\x75\x6C\x6C\x65\x74\x69\x6E\x27\x20\x63\x6C\x61\x73\x73\x3D\x27","\x20","\x27\x3E","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x27\x62\x75\x6C\x6C\x65\x74\x69\x6E\x5F\x62\x6F\x64\x79\x27\x3E","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x27\x62\x75\x6C\x6C\x65\x74\x69\x6E\x5F\x74\x65\x78\x74\x27\x3E","\x3C\x2F\x64\x69\x76\x3E","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x27\x63\x6C\x6F\x73\x65\x42\x74\x6E\x5F\x6F\x75\x74\x65\x72\x27\x3E\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x27\x63\x6C\x6F\x73\x65\x42\x74\x6E\x27\x20\x74\x69\x74\x6C\x65\x3D\x27\u95DC\u9589\u516C\u544A\x27\x3E\xD7\x3C\x2F\x64\x69\x76\x3E\x3C\x2F\x64\x69\x76\x3E","\x3C\x64\x69\x76\x20\x73\x74\x79\x6C\x65\x3D\x27\x70\x6F\x73\x69\x74\x69\x6F\x6E\x3A\x20\x61\x62\x73\x6F\x6C\x75\x74\x65\x3B\x20\x72\x69\x67\x68\x74\x3A\x20\x31\x30\x70\x78\x3B\x20\x62\x6F\x74\x74\x6F\x6D\x3A\x20\x30\x3B\x20\x68\x65\x69\x67\x68\x74\x3A\x20\x31\x35\x70\x78\x3B\x20\x6C\x69\x6E\x65\x2D\x68\x65\x69\x67\x68\x74\x3A\x20\x31\x30\x70\x78\x3B\x20\x6C\x65\x74\x74\x65\x72\x2D\x73\x70\x61\x63\x69\x6E\x67\x3A\x20\x31\x2E\x34\x70\x78\x3B\x27\x3E\x3C\x61\x20\x73\x74\x79\x6C\x65\x3D\x27\x74\x65\x78\x74\x2D\x64\x65\x63\x6F\x72\x61\x74\x69\x6F\x6E\x3A\x20\x6E\x6F\x6E\x65\x3B\x20\x63\x6F\x6C\x6F\x72\x3A\x20\x23\x63\x63\x63\x3B\x20\x66\x6F\x6E\x74\x2D\x66\x61\x6D\x69\x6C\x79\x3A\x20\x68\x65\x6C\x76\x65\x74\x69\x63\x61\x2C\x20\x61\x72\x69\x61\x6C\x2C\x20\x73\x61\x6E\x73\x2D\x73\x65\x72\x69\x66\x3B\x20\x66\x6F\x6E\x74\x2D\x73\x69\x7A\x65\x3A\x20\x31\x31\x70\x78\x3B\x27\x20\x68\x72\x65\x66\x3D\x27\x68\x74\x74\x70\x73\x3A\x2F\x2F\x77\x77\x77\x2E\x77\x66\x75\x62\x6C\x6F\x67\x2E\x63\x6F\x6D\x2F\x32\x30\x32\x33\x2F\x30\x32\x2F\x77\x65\x62\x73\x69\x74\x65\x2D\x74\x6F\x70\x2D\x62\x75\x6C\x6C\x65\x74\x69\x6E\x2E\x68\x74\x6D\x6C\x27\x20\x74\x61\x72\x67\x65\x74\x3D\x27\x5F\x62\x6C\x61\x6E\x6B\x27\x20\x74\x69\x74\x6C\x65\x3D\x27\x42\x6C\x6F\x67\x67\x65\x72\x20\u7DB2\u7AD9\u7F6E\u9802\u516C\u544A\x0A\u7A0B\u5F0F\u8A2D\u8A08\uFF1A\x57\x46\x55\x20\x42\x4C\x4F\x47\x27\x3E\u24E6\x20\x42\x75\x6C\x6C\x65\x74\x69\x6E\x3C\x2F\x61\x3E\x3C\x2F\x64\x69\x76\x3E","\x74\x6F\x70","\x70\x72\x65\x70\x65\x6E\x64","\x62\x6F\x64\x79","\x62\x6F\x74\x74\x6F\x6D","\x61\x70\x70\x65\x6E\x64","\x73\x6C\x69\x64\x65\x44\x6F\x77\x6E","\x23\x68\x36\x30\x2C\x20\x23\x62\x75\x6C\x6C\x65\x74\x69\x6E","\x68\x65\x69\x67\x68\x74","\x23\x62\x75\x6C\x6C\x65\x74\x69\x6E","\x23\x68\x36\x30","\x73\x6C\x69\x64\x65\x55\x70","\x68\x61\x73\x52\x65\x61\x64","\x63\x6C\x69\x63\x6B","\x2E\x63\x6C\x6F\x73\x65\x42\x74\x6E","\x74\x65\x78\x74","\x3C\x70\x3E","\x3C\x2F\x70\x3E"];ckNewBulletin();if(bulletinStatus== _0xb687[0]){addHtml();clickClose()};function ckNewBulletin(){var _0x9a2fx2=localStorage[_0xb687[1]];if(_0x9a2fx2&& entityConvert(newBulletin)!= _0x9a2fx2){localStorage[_0xb687[2]]= _0xb687[0];bulletinStatus= _0xb687[0]}}function addHtml(){var _0x9a2fx4=_0xb687[3];_0x9a2fx4+= _0xb687[4];_0x9a2fx4+= _0xb687[5]+ bgColor+ _0xb687[6]+ position+ _0xb687[7];_0x9a2fx4+= _0xb687[8];_0x9a2fx4+= _0xb687[9]+ newBulletin+ _0xb687[10];if(enableClose){_0x9a2fx4+= _0xb687[11]};_0x9a2fx4+= _0xb687[10];_0x9a2fx4+= _0xb687[12];_0x9a2fx4+= _0xb687[10];if(position== _0xb687[13]){$(_0xb687[15])[_0xb687[14]](_0x9a2fx4)};if(position== _0xb687[16]){$(_0xb687[15])[_0xb687[17]](_0x9a2fx4)};setTimeout(function(){adjustHeight();$(_0xb687[19])[_0xb687[18]]()},delay* 1000)}function adjustHeight(){var _0x9a2fx6=$(_0xb687[21])[_0xb687[20]]();_0x9a2fx6= _0x9a2fx6< 60?60:_0x9a2fx6;$(_0xb687[22])[_0xb687[20]](_0x9a2fx6)}function clickClose(){$(_0xb687[26])[_0xb687[25]](function(){$(_0xb687[19])[_0xb687[23]]();localStorage[_0xb687[1]]= entityConvert(newBulletin);localStorage[_0xb687[2]]= _0xb687[24]})}function entityConvert(_0x9a2fx9){return $(_0xb687[28]+ _0x9a2fx9+ _0xb687[29])[_0xb687[27]]()}
})(jQuery);
//]]>
</script>
<style>
#h60, #bulletin {display: none; }
#bulletin {position: fixed; left: 0; width: 100%; z-index: 10000; color: #fff; box-shadow: 0 1px 3px 2px rgb(0, 0, 0, .25);}
#bulletin.top{top: 0;}
#bulletin.bottom{bottom: 0;}
.bulletin_body{display: flex; padding: 10px; align-items: center; justify-content: center; font-size: 1.2rem;}
.bulletin_text{line-height: 40px; text-align: center;}
.closeBtn_outer{padding: 0 15px;}
.closeBtn {width: 24px; height: 24px; font-family: arial, sans-serif; font-size: 24px; font-weight: bold; text-align: center; border-radius: 50%; line-height: initial; background: #fff; color: #343a40; cursor: pointer; box-shadow: 0 0 5px rgb(0, 0, 0, 0.6);}
.closeBtn:hover{background: #6c757d; color: #fff;}
.blue{background: #5bc0de;}
.green{background: #198754;}
.red{background: #d9534f;}
.orange{background: #f0ad4e;}
.black{background: #343a40;}
.white{background: #fff; color: #343a40!important;}
.gray{background: #6c757d;}
.navy{background: #337ab7;}
.bulletin_text .blt_btn{padding: 3px 6px; text-align: center; white-space: nowrap; cursor: pointer; border-radius: 4px; color: #fff;}
.bulletin_text .blt_btn:hover{text-decoration: none; opacity: .7;}
</style>
<!-- Designed by WFU BLOG -->
- 第 1 行綠字可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。
- 所有重要參數的修改，請見藍色註解的說明。
- 如果對 CSS 熟悉可自行修改參數
三、展示效果
- 本頁面即為展示頁面，網頁最上方可看到公告效果
- 使用的參數為背景 navy，按鈕 white
- 為了達到展示效果，點擊關閉按鈕後，本頁面的公告仍然會持續出現，這是跟原本程式效果不同之處。
更多網站工具：
WFU您好!我嘗試加入此功能，但卻出現了這樣的錯誤:https://drive.google.com/file/d/1Uv_VCXVBQUcNf37N7ZiAzzOk0T8Ka8aE/view?usp=drivesdk，另外，在預覽時，螢幕上也顯示以下錯誤訊息:你的主題結構不完整，因此系統無法加以剖析。請確定所有 XML 元素均已正確關閉。< b r / >XML 錯誤訊息：The entity name must immediately follow the '&' in the entity reference.
回覆刪除Error 400。
我已經確認過jQuery沒有重複安裝，請問是發生了甚麼問題?
很高興能幫上忙!也謝謝WFU願意提供這個工具(最近正好在找公告相關的工具
刪除