為什麼要在 WordPress 中建立通知欄？

通知欄是一個讓訪客了解網站上重要資訊的好方法。這可能是一個持續的促銷活動、營業時間的更新甚至是服務的變更。

您還可以使用通知欄向訪客提供特別優惠，例如買一送一優惠。如果您經營線上商店，這是一個不錯的選擇。使用通知欄比僅僅在首頁發布公告更好，它可以在整個網站的每一頁頂部顯著出現。

在 WordPress 中建立通知欄非常簡單。我們將介紹使用最佳通知欄插件的方法，以及使用 HTML 和 CSS 代碼手動建立通知欄的方法。請點擊以下鏈接直接跳轉到每個選項：

方法 1：使用 OptinMonster 建立通知欄

OptinMonster 是目前市面上最好的轉換優化和潛在客戶生成軟件。它幫助您將更多網站訪客轉化為訂閱者和客戶。

OptinMonster 提供拖放型活動生成器，擁有漂亮的彈窗、歡迎墊、倒計時計時器等動態疊加層，幫助您提高網站的訂閱和銷售量。您也可以使用 OptinMonster 為您的網站製作通知欄。它們的預製模板讓您非常容易在幾分鐘內創建出美觀的通知欄。

首先，您需要訪問 OptinMonster 官網並註冊一個帳戶。您至少需要選擇基本計劃，因為它包含了浮動欄活動類型。

接下來，您需要安裝並激活 OptinMonster WordPress 插件。更多詳情，請參閱我們的分步指南如何安裝 WordPress 插件。

啟用後，您會看到歡迎屏幕和設置向導。點擊‘連接現有帳戶’按鈕。

之後會打開一個新窗口，您需要將您的 WordPress 網站連接到 OptinMonster。簡單點擊‘連接到 WordPress’按鈕以繼續。

然後按照屏幕上的提示將您的 OptinMonster 帳戶連接起來。接下來，轉到 WordPress 儀表板中的 OptinMonster » 活動，點擊‘創建您的第一個活動’按鈕。

這將打開 OptinMonster 活動生成器。從這裡，您需要選擇‘浮動欄’作為活動類型，以建立通知欄。

接下來，您將看到活動模板的選擇。選擇您想要使用的模板，並點擊‘使用模板’按鈕。我們將使用優惠券代碼促銷模板來建立我們的通知欄。

接下來，您將被要求給您的模板命名。一旦命名好活動，只需點擊‘開始建立’按鈕。

方法 2：使用 Thrive Leads 建立通知欄

另一種在 WordPress 網站上新增通知欄的方法是使用 Thrive Leads。它是 Thrive Themes 套件的一部分，幫助您通過通知欄、光箱、滑入彈窗等方式生成潛在客戶。

首先，您需要訪問 Thrive Themes 網站並註冊一個帳戶。然後安裝並激活 Thrive Product Manager 插件。更多詳情，請參閱我們的指南如何安裝 WordPress 插件。

安裝插件後，進入 WordPress 管理區域中的 Product Manager 頁面，點擊‘登錄我的帳戶’按鈕。

登錄後，您將看到由 Thrive Themes 提供的不同插件和工具。

選擇 Thrive Leads 插件，然後點擊底部的‘安裝選定產品’按鈕。當 Thrive Leads 準備就緒後，您將看到成功信息，然後點擊‘前往 Thrive Themes 儀表板’按鈕。

方法 3：使用自定義 HTML/CSS 手動建立通知欄

如果您不想使用 OptinMonster 或 Thrive Leads，我們將向您展示如何使用 HTML 和 CSS 代碼建立通知欄。

注意：我們不建議初學者使用這種方法。如果您是 WordPress 新手或對於添加代碼到網站不太自信，我們建議使用上述任何一種方法。

首先，您需要複製以下自定義 CSS 代碼來建立通知欄：

.alertbar { background-color: #ff0000; color: #FFFFFF; display: block; line-height: 45px; height: 50px; position: relative; text-align: center; text-decoration: none; top: 0px; width: 100%; z-index: 100; }

一種增加 CSS 代碼到網站的簡單方法是使用 WPCode 插件。它是最佳的代碼片段插件，幫助您在網站上添加自定義代碼。

首先，您需要安裝並激活免費的 WPCode 插件。更多詳情，請參閱我們的指南如何安裝 WordPress 插件。啟用後，前往 Code Snippets » + 添加片段，選擇‘添加您的自定義代碼（新片段）’選項。

接下來，在頂部輸入片段標題並將 CSS 代碼粘貼到代碼預覽區域中。然後變更代碼類型為‘CSS 代碼片段’選項。

移動到插入部分，選擇代碼運行的位置。由於我們希望通知欄顯示在整個網站上，可以使用默認的‘自動插入’方法並保持‘全站運行’設置。

完成後，點擊頂部的‘保存片段’按鈕，並打開切換來激活代碼。

接著，進入 WordPress 管理區域的 Code Snippets » Headers & Footer，只需將以下 HTML 代碼粘貼到‘Header’框內：

完成後，不要忘記點擊頁面頂部的‘保存變更’按鈕。現在，訪問您的 WordPress 網站查看通知欄，它應該在每個頁面的頂部出現。

提示：在某些 WordPress 主題中，通知欄可能會與您的菜單重疊。您可以將欄的高度調整到 40px 或 30px 以避免此問題，還需要相應減小行高度，以使文本在欄垂直居中。

額外提示：為 WordPress 頁面添加自定義通知消息

如果您希望在網站上的不同部分（例如產品頁、結帳頁和商店頁）添加自定義通知消息，可以使用 SeedProd。它是最佳的網站建站和登陸頁設計器。

SeedProd 插件提供拖放式設計器，可以在不編輯代碼的情況下創建自定義主題和網站頁面。也提供了一個通知區塊，您可以將其放置在網站的任何地方。

這個通知區塊可以提醒客戶您的庫存即將售罄、特定商品正在促銷或者其他時間敏感的警告。您可以簡單地將通知區塊添加到頁面，然後添加標題和描述。插件還允許添加動態內容，可插入日期和查詢參數。

還有更多自定義通知區塊的選項。例如，您可以更改其對齊方式、調整字體大小和編輯圖標。

要了解更多有關使用 SeedProd 的資訊，可以參考如何在 WordPress 中建立自定義頁面的指南。

我們希望本文對您了解如何在 WordPress 中建立通知欄有所幫助。您也許還想參閱我們的最佳 WordPress 拖放頁面設計工具指南，以進一步自定義您的網站，以及最佳 WooCommerce 插件指南，助您提升商店銷售。

如果您喜歡本文，請訂閱我們的YouTube 頻道，觀看更多 WordPress 教學視頻，也可以在Twitter 和Facebook 上關注我們。