如何在 WordPress 中创建警报栏(2 种简单方法)

您想向您的 WordPress 网站添加警报栏吗?

提醒栏或通知栏是让访问者了解重要更新、特别优惠、新产品发布等的绝佳方式.

在本文中，我们将向您展示如何使用 2 个简单的解决方案在 WordPress 中创建警报栏.

为什么要在 WordPress 中创建警报栏?

提醒栏是让访问者了解任何重要信息的好方法.这可能是正在进行的销售活动、营业时间的更新或服务的变化.

您还可以使用提醒栏向访问者介绍特价商品，例如买一送一.如果您经营在线商店，这是一个不错的选择.

使用提醒栏比仅仅在您的主页上发布公告要好.您的提醒栏可以突出显示在整个网站的每个页面的顶部.

在 WordPress 中创建警报栏很容易.我们将介绍最好的通知栏插件和使用 HTML 和 CSS 代码的手动方法.只需单击下面的链接即可直接跳转到每个选项:

• 方法 1:OptinMonster
• 方法 2:自定义 HTML 和 CSS

方法 1:使用 OptinMonster 创建警报栏

OptinMonster 是市场上最好的转换优化软件.它可以帮助您将更多网站访问者转化为订阅者和客户.

它带有漂亮的灯箱弹出窗口、欢迎垫、倒数计时器和其他动态叠加层，可帮助您增加网站的订阅者和销售额.

您还可以使用 OptinMonster 为您的网站制作警报栏.这是我们要创建的:

OptinMonster 中有很多预先构建的模板.这使得在几分钟内创建一个看起来很棒的警报栏变得非常容易.

首先，您需要访问 OptinMonster 网站并注册一个帐户.

接下来，您需要安装并激活 OptinMonster WordPress 插件.有关更多详细信息，请参阅有关如何安装 WordPress 插件的分步指南.

此插件可让您将 WordPress 站点连接到 OptinMonster 软件.

激活后，您现在需要连接您的帐户.首先，只需转到 OptinMonster »来自 WordPress 仪表板的设置.

接下来，点击"连接现有帐户"按钮.

您现在将看到一个弹出窗口，要求您输入您的电子邮件地址.只需选择您的电子邮件地址，然后单击"连接到 WordPress"按钮.

您现在可以按照屏幕上的提示连接您的 OptinMonster 帐户.

连接 OptinMonster 后，只需转到 OptinMonster » WordPress 仪表板中的广告系列.继续并点击"创建您的第一个广告系列"按钮.

从这里开始，您需要选择"浮动栏"作为您的广告系列类型以创建提醒栏.

接下来，您将看到一系列广告系列模板.只需选择您要使用的模板.您只需将鼠标悬停在它上面，然后单击"使用模板"按钮将其选中.

我们将使用"Promo"模板作为我们的提醒栏.

接下来，系统将提示您为模板命名.为广告系列命名后，点击"开始构建"按钮.

现在，您将看到广告系列编辑器.您可以在此处设计广告系列.

您会看到默认情况下您的警报栏出现在屏幕底部.要将其移动到屏幕顶部，请单击左侧的"浮动设置".

接下来，只需单击滑块即可将浮动栏移动到页面顶部.

要更改浮动栏上的文本，只需点击您要更改的区域并输入您想要的任何文本.

您还可以更改文本的字体、大小和颜色等.

要更改倒数计时器，只需在模板上选择计时器，然后单击左侧菜单中的倒计时选项卡.然后继续输入您想要的结束日期和时间.

如果您愿意，您还可以将计时器设置为常青倒计时，而不是静态倒计时.为您网站的每位访问者单独设置常青倒计时.

继续，根据需要对警报栏进行尽可能多的更改.如果您对此感到满意，请不要忘记点击屏幕顶部的"保存"按钮.

接下来，您需要转到"显示规则"选项卡以选择您的警报栏将在您的网站上显示的时间和位置.默认规则是让您的警报栏在访问者在页面上停留 5 秒后显示.

我们要将其更改为 0 秒，以便立即显示警报栏.为此，只需将"秒"倒计时更改为 0.

然后，单击"下一步"按钮以更改操作设置.您可以将"显示广告系列视图"设置保留为 Optin，并选择是否要在出现警报栏时播放声音效果.

进行更改后，继续并再次单击"下一步"按钮，您将看到一个摘要.

满意后，只需点击屏幕顶部的"保存"按钮即可.

之后，您可以转到顶部的"发布"选项卡并将"发布状态"更改为"发布".

最后一步是在您的网站上激活广告系列.

为此，您可以关闭活动编辑器，然后转到 OptinMonster »广告系列.您会在此处看到您的广告系列，其状态将为待处理.

继续并点击待处理状态，从下拉菜单中将其更改为"发布".

现在，只需访问您网站上的任何页面，您就会看到您的广告系列正在发挥作用.

方法 2:使用自定义 HTML/CSS 手动创建警报栏

如果您不想使用 OptinMonster 怎么办?在此方法中，我们将向您展示如何使用 HTML 和 CSS 代码创建通知栏.

注意:我们不建议初学者使用这种方法.如果您不熟悉 WordPress 或对向网站添加代码没有信心，那么我们建议您改用上述方法.

首先，您需要为警报栏复制并粘贴一些自定义 CSS 代码.只需转到 外观 »自定义工具页面，然后点击底部的"其他 CSS"标签.

现在，继续将此 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 代码.

接下来，您需要将警报栏文本的 HTML 代码添加到您的网站.

最好的方法是安装并激活免费的插入页眉和页脚插件.

注意:插入页眉和页脚是 WPBeginner 自己的插件之一.我们创建它是为了让向您的网站页面添加脚本、HTML 代码等变得非常容易.

激活插件后，进入设置»在您的 WordPress 管理员中插入页眉和页脚.只需将以下 HTML 代码行复制并粘贴到"正文中的脚本"框中即可:

<div class="alertbar">We are currently closed due to Covid-19.</div>

以下是该代码在"插入页眉和页脚"的"正文中的脚本"框中的外观:

当然，您可以将警报文本更改为您喜欢的任何其他内容.完成后不要忘记点击页面底部的"保存"按钮.

现在，您可以访问您的网站以查看警报栏.它应该出现在每个页面的顶部，如下所示:

提示:在一些 WordPress 主题中，您的警报栏可能会与您的菜单重叠.您可以将栏的高度更改为 40px 或 30px 以避免这种情况.您还需要相应地降低行高，以便您的文本在栏中保持垂直居中.

我们希望本文能帮助您了解如何在 WordPress 中创建警报栏.您可能还喜欢我们对最佳 WordPress 拖拽的比较.删除页面构建器可帮助您在不编写任何代码的情况下进一步自定义您的网站，以及我们的最佳 WooCommerce 插件列表，以增加您的商店销售额.