您是否要向WordPress网站添加警报栏？

警报栏或通知栏是一种使访问者了解重要更新，特价，新产品发布等的好方法。

在本文中，我们将向您展示如何通过3种简单的解决方案在WordPress中创建警报栏。

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

警报栏是一种让访问者了解任何重要信息的好方法。那可能是正在进行的销售活动，有关您的营业时间的更新或服务的更改。

您还可以使用提醒栏来告知访问者特殊交易，例如“ 买一送一”的免费优惠。如果您经营在线商店，这是一个不错的选择。

使用警报栏比仅在主页上发布公告要好。您的警报栏可能会突出显示在整个网站的每个页面的顶部。

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

• 方法1：OptinMonster
• 方法2：SeedProd
• 方法3：自定义HTML和CSS

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

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

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

您也可以使用OptinMonster为您的网站创建一个警报栏。这是我们要创建的一个：

OptinMonster内部有很多预构建的模板。这使得在几分钟之内创建看起来很棒的警报栏非常容易。

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

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

该插件将您的WordPress网站连接到OptinMonster应用。

激活后，您需要输入许可证密钥。您可以在OptinMonster网站上的帐户区域中找到它。

在您的WordPress仪表板中，单击OptinMonster菜单。然后，您需要单击“连接您的帐户”按钮。只需按照屏幕上的提示将您的WordPress网站连接到您的OptinMonster帐户即可。

连接OptinMonster后，只需转到WordPress仪表板中的OptinMonster»广告系列。继续并点击“创建新广告系列”按钮：

您将被带入OptinMonster广告系列创建工具。在这里，您需要选择“浮动栏”作为您的广告系列类型。

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

我们将在警报栏中使用“促销”模板：

接下来，系统将提示您为模板命名，并选择要在其上使用的网站。OptinMonster应该已经在此处填写了您网站的名称和URL。

为广告系列命名后，请点击“开始构建”按钮。

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

您将看到默认情况下，警报栏出现在屏幕底部。要将其移至屏幕顶部，请点击左侧的“浮动设置”。

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

要更改浮动条上的文本，只需单击要更改的区域。编辑器将在左侧打开。只需在此处输入任何文本即可。

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

要更改倒数计时器，只需单击它，然后单击“倒数”标签。然后继续输入所需的结束日期和时间。

如果愿意，您还可以将计时器设置为常绿倒数而不是静态倒数。为您网站的每个访问者分别设置了常绿倒计时。

继续并根据需要对警报栏进行任意更改。对它感到满意后，请不要忘记单击屏幕顶部的“保存”按钮。

接下来，您需要转到“显示规则”标签，以选择警报栏在网站上显示的时间和位置。默认规则是在访问者进入页面5秒钟后显示警报栏。

我们将其更改为0秒，因此警报栏会立即显示。只需将“秒”倒计时更改为0：

然后，点击“下一步”按钮，并在下一个屏幕上将操作保留为“显示广告系列视图：优化”。再次单击“下一步”，您将看到一个摘要。

感到满意后，只需单击屏幕顶部的“保存”按钮，然后单击“发布”标签。单击“状态”滑块将其设置为“活动”。

最后一步是在您的网站上激活广告系列。点击WordPress信息中心中的OptinMonster标签，然后点击“刷新广告系列”按钮

然后，您会在此处看到您的广告系列。

只需访问您网站上的任何页面，您就会看到您的广告系列正在运行：

方法2：使用SeedProd创建警报栏

制作警报栏的另一种方法是使用SeedProd WordPress插件。SeedProd 以WordPress的“即将推出”和维护模式页面而闻名。

SeedProd还有一个Notification Bar插件，您可以在注册任何付费软件包时获得。

首先，您需要访问SeedProd网站并注册一个帐户。接下来，转到您帐户内的“下载”页面，然后下载Notification Bar Pro插件：

然后，您需要在网站上安装并激活Notification Bar Pro插件。有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。

安装后，您会看到一个页面，需要在其中输入许可证密钥。您可以在您的SeedProd帐户中找到它。

接下来，转到“设置”»“通知栏专业版”，您将在其中开始创建通知栏。只需为其输入名称，然后单击“创建栏”按钮。

现在，您将看到SeedProd通知栏编辑器。首先，通知栏将在屏幕顶部显示为橙色条：

要将文本添加到通知栏，请点击左侧的“号召性用语和按钮”标签。只需输入您要使用的文本。如果要添加号召性用语按钮，可以输入按钮的文本和链接：

默认情况下，文本的字体和大小与WordPress主题中的主要文本相同。要使其更大，只需单击“版式”选项卡。

在这里，您可以为栏本身的文本和按钮文本设置所需的任何字体和大小。

如果需要，可以在“颜色”选项卡中更改栏和按钮的颜色。

您甚至可以在通知栏中添加其他元素，例如电子邮件选择，倒数计时器，点击通话按钮，甚至链接到您的社交资料。

当您对通知栏感到满意时，请单击“启用/禁用栏”选项卡，然后切换到“启用栏”选项。最后，点击屏幕顶部的“保存”按钮。

您的通知栏现在将出现在您的网站上：

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

如果您不想使用OptinMonster或Notification Bar Pro怎么办？在这种方法中，我们将向您展示如何使用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代码添加到您的站点。

最好的方法是安装并激活免费的Insert Headers and Footers插件。

注意：插入页眉和页脚是WPBeginner自己的插件之一。我们创建它的目的是使添加脚本，HTML代码以及更多内容到您的网站页面变得非常容易。

激活插件后，转到WordPress管理员中的“设置”»“插入页眉和页脚”。只需将以下HTML代码行复制并粘贴到“正文中的脚本”框中：

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

在插入页眉和页脚的“正文中的脚本”框中，该代码应如下所示：

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

现在，您可以访问您的站点以查看警报栏。它应显示在每个页面的顶部，如下所示：

提示：在一些WordPress主题中，警报栏可能与菜单重叠。您可以将条形的高度更改为40px或30px，以避免出现这种情况。您还需要相应地减小行高，以使文本在栏中垂直居中。

---

---

需要提供WordPress主题/插件的汉化服务可以随时联系我们！另外成品WordPress网站以及半成品WordPress网站建设，海外Google SEO优化托管服务，百度SEO优化托管服务，Centos/Debian服务器WP专用环境搭建，WP缓存服务器搭建，我们都是你的首选，拥有多年WP开源程序服务经验，我们一直在坚持客户体验，没有最好，只有更好！