如何在 WordPress 中創建警告框
已發表: 2023-02-12如果您的網站獲得了大量訪問者，但註冊或轉化率低於您的預期，那麼您並不孤單。 有大量資源可用於幫助增加您的流量——但讓這些流量在您的網站上採取正確的行動是另一回事。
一種可能的解決方案是使用警告框。 這是一個功能強大且簡單的工具，可以顯著提高 WordPress 網站的轉化率。 更重要的是，創建和自定義此功能非常容易。
在本文中，我們將介紹什麼是警告框以及為什麼要使用警告框。 然後我們將向您展示如何在 WordPress 中製作您自己的警告框。 讓我們開始吧！
什麼是警告框？
警告框正是它聽起來的樣子。 這是出現在網站上的警報，用於通知訪問者發生了某些事情。 作為“彈出窗口”，您可能更了解此功能。
WordPress 中的警告框通常採用兩種形式之一。 您可能會看到屏幕上出現一個彈出窗口，或者在您的頁面頂部出現一個欄（有時稱為“問候欄”）。
為什麼要創建警告框？
警報框通常用於通知（或提醒）用戶您網站上發生的重要事件。 例如，您可以使用 WordPress 警告框讓訪問者了解他們可能看不到的產品的特價促銷，或一系列特色帖子。
此功能的另一個非常常見的用途是捕獲訪問者的電子郵件地址。 許多 WordPress 警告框插件可以設置為在用戶將光標移離站點時彈出（例如，關閉選項卡或按後退按鈕）。
這些“最後一分鐘”警報可能是在訪客離開前捕獲其詳細聯繫信息的好方法，可能會導致後續轉化。 這些警報可能非常有效——表現最好的彈出窗口的轉化率超過 9%。 換句話說，它們非常值得努力實施。
使用插件創建警告框
多虧了 WordPress 插件，創建自己的警告框很簡單。 我們將引導您使用功能強大（且免費）的 Popup Maker 插件完成每一步。
第 1 步：下載插件（例如 Popup Maker）
您需要做的第一件事是選擇一個專用插件。 正如我們上面提到的，免費的 Popup Maker 插件經過了廣泛的審查，是一個可靠的選擇。
要安裝此工具，請前往您的 WordPress 儀表板並導航至插件 > 添加新插件。 搜索“popup maker”，它應該是第一個條目：
然後點擊立即安裝。 安裝完成後，不要忘記通過選擇Activate來激活插件。 請注意，雖然 Popup Maker 本身是免費的，但某些功能需要高級計劃才能使用。
第 2 步：創建彈出窗口
安裝 Popup Maker 後，您應該會在 WordPress 側邊欄中看到一個以插件命名的新條目。 單擊它以打開所有彈出窗口的列表。 一開始它是空的，但你要補救它。
要創建彈出窗口，請單擊屏幕頂部的添加新彈出窗口。 這將打開 WordPress 編輯器：
當您訪問此屏幕時，將出現一個教程，向您展示如何創建彈出窗口。 系統要求您做的第一件事是輸入名稱，以便稍後識別彈出窗口。
之後，您可以輸入一個可選標題，該標題將作為標題出現在彈出窗口中。 在主編輯器字段中，您還可以輸入要在彈出窗口中顯示的內容。 如果您只想創建一個簡單的聯繫表單，您也可以使用預定義的簡碼。
這些短代碼位於工具欄中帶有 Popup Maker 徽標的新按鈕下：
單擊訂閱表格以插入用於捕獲電子郵件的基本聯繫表格。 可以通過單擊表單並選擇編輯按鈕來自定義字段和隱私免責聲明的文本。 除了文本之外，還有許多樣式和佈局選項。
第 3 步：為您的彈出窗口配置觸發器
創建彈出表單後，下一步是配置其觸發器。 這些確定何時出現警告框。
在彈出編輯器屏幕上，向下滾動到彈出設置並從列表中選擇觸發器。 然後點擊添加新觸發器：
基本 Popup Maker 插件在此處包含三個選項：單擊打開、時間延遲/自動打開和表單提交。 如果您使用的是高級計劃，您還可以選擇退出意圖作為觸發器——如果您希望在用戶嘗試離開您的站點時彈出窗口出現，則可以使用此選項。
您還可以在定位選項卡下調整警告框出現在哪些頁面上。 如果您不想讓某些頁面或設備類型看到警報，請務必自定義此設置。
第 4 步：設計您的警報框
最後，您可以更改新警告框的外觀以更好地匹配您網站的主題。 在彈出設置區域中，選擇顯示。 在那裡，您可以更改彈出窗口在屏幕上的顯示位置（包括頂部欄），設置其大小和位置，並從幾個可用主題中選擇一個：
完成後，請確保選擇“發布”按鈕以保存更改並激活彈出窗口。
在沒有插件的情況下創建警告框
如果您不想使用插件，您也可以使用一些代碼和一點點苦力自己創建一個警告框。 您需要編輯header.php文件並向您的站點添加一些 CSS。 對於此示例，我們將在頁面頂部創建一個警告欄。
第 1 步：編輯您的 header.php 文件
您需要做的第一件事是向header.php文件中添加一些代碼。 這可以使用 WordPress 主題編輯器訪問。 在您的儀表板中，導航至Appearance > Theme Editor 。 然後從右側的側邊欄中選擇Theme Header (header.php) ：
將以下代碼複製並粘貼到<head>部分末尾的文件中：
<div class="alertbar">All items 20% off!</div>
添加後文件應該如下所示：
這將顯示消息“All items 20% off!” 在您的警報欄中。 您可以根據需要自定義文本。
第 2 步：添加自定義 CSS
最後，您需要使用級聯樣式表 (CSS) 來設置警報的樣式。 您可以使用 WordPress Customizer 添加 CSS。
為此，請前往您的 WordPress 儀表板並導航至外觀 > 自定義。 這將在定制器中打開您的站點。 在邊欄中，選擇Additional CSS 。 這將打開一個代碼框，您可以在其中輸入自定義 CSS。
將以下代碼粘貼到文本字段中：
.alertbar {
background-color: #A9A9A9;
color: #FFFFFF;
display: block;
line-height: 45px;
height: 50px;
position: relative;
text-align: center;
text-decoration: none;
top: 0px;
width: 100%;
z-index: 100;
}
警報如下所示：
上面的代碼創建了一個帶有白色文本的深灰色條——但是您可以根據自己的喜好調整顏色和大小以匹配您的主題。 完成後，單擊發布以保存更改。
使用 WP Engine 增強您的網站
無論您是希望增加電子郵件註冊量，還是需要一種簡單的方式來通知訪問者特別優惠，提醒框都是一種優雅而有效的解決方案。 在您的 WordPress 網站上實施一個可以顯著提高您的轉化率。
您可以使用 Popup Maker 等 WordPress 插件實現警告框。 您也可以使用一些 CSS 相對輕鬆地自己編寫代碼。 無論哪種方式，您都會收到旨在增加註冊和轉化的可自定義提醒。
如果您想進一步增強您的網站，請務必查看我們專門的 WordPress 託管計劃！