如何在 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 托管计划！