wordpress创建_如何在WordPress中创建警报栏（3种简单方法）

wordpress创建

Do you want to add an alert bar to your WordPress site?

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

An alert bar or notification bar is a great way to let visitors know about important updates, special offers, new product launch, etc.

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

In this article, we’ll show you how to create an alert bar in WordPress with 3 easy solutions.

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

为什么要在WordPress中创建警报栏？ (Why Create an Alert Bar in WordPress?)

An alert bar is a great way to let your visitors know about anything important. That could be an ongoing sales event, update about your opening times, or changes to your services.

警报栏是一种让访问者了解任何重要信息的好方法。 这可能是持续的销售事件，可能会更新您的营业时间，也可能会更改您的服务。

You can also use an alert bar to tell visitors about a special deal, such as a buy one get one free offer. This is a great option if you run an online store.

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

Using an alert bar is better than just putting an announcement on your homepage. Your alert bar can appear prominently right at the top of every page across your whole site.

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

It’s easy to create an alert bar in WordPress. We will cover the 2 best notification bar plugins plus a manual method using HTML and CSS code. Simply click the links below to jump straight to each option:

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

• Method 1: OptinMonster方法1：OptinMonster
• Method 2: SeedProd方法2：SeedProd
• Method 3: Custom HTML and CSS方法3：自定义HTML和CSS

方法1：使用OptinMonster创建警报栏 (Method 1: Creating an Alert Bar Using OptinMonster)

OptinMonster is the best conversion optimization software on the market. It helps you convert more website visitors into subscribers and customers.

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

It comes with beautiful lightbox popups, welcome mats, countdown timers, and other dynamic overlays that help you increase subscribers and sales for your website.

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

You can also use OptinMonster to make an alert bar for your website. Here’s the one we’re going to create:

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

There are lots of pre-built templates inside OptinMonster. This makes it really easy to create an alert bar that looks great within minutes.

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

First, you need to visit the OptinMonster website and sign up for an account.

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

Next, you need to install and activate the OptinMonster WordPress plugin. For more details, see our step by step guide on how to install a WordPress plugin.

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

This plugin connects your WordPress site to the OptinMonster app.

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

Upon activation, you need to enter your license key. You can find this in your account area on the OptinMonster website.

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

In your WordPress dashboard, click the OptinMonster menu. You then need to click the ‘Connect Your Account’ button. Just follow the on-screen prompts to connect your WordPress site to your OptinMonster account.

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

After connecting OptinMonster, simply go to OptinMonster » Campaigns in your WordPress dashboard. Go ahead and click the ‘Create New Campaign’ button:

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

You will be taken into the OptinMonster campaign creation tool. From here, you need to select ‘Floating Bar’ as your Campaign Type.

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

Next, you will see a choice of campaign templates. Simply choose a template that you want to use. You just need to bring your mouse over it and click the ‘Use Template’ button to select it.

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

We’re going to use the ‘Promo’ template for our alert bar:

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

Next, you will be prompted to give your template a name and choose what site you’re going to use it on. OptinMonster should have already filled in the name and URL of your site here.

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

Once you’ve named your campaign, click the ‘Start Building’ button.

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

Now, you will see the campaign editor. This is where you can design your campaign.

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

You will see that your alert bar appears at the bottom of your screen by default. To move it to the top of the screen, click ‘Floating Settings’ on the left hand side.

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

Next, just click the slider to move the floating bar to the top of the page:

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

To change the text on the floating bar, simply click on the area you want to change. The editor will open up on the left hand side. Just type any text you want here.

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

You can also change the font, the size and color of the text, and more.

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

To change the countdown timer, simply click on it then click the Countdown tab. Then go ahead and enter your desired end date and time.

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

You can also set the timer to act as an evergreen countdown instead of a static countdown, if you prefer. An evergreen countdown is set separately for each visitor to your site.

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

Go ahead and make as many changes to your alert bar as you want. Once you’re happy with it, don’t forget to click the Save button at the top of your screen.

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

Next, you need to go to the ‘Display Rules’ tab to select when and where your alert bar will display on your site. The default rule is for your alert bar to display after the visitor has been on the page for 5 seconds.

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

We’re going to change this to 0 seconds, so the alert bar appears instantly. Just change the ‘sec’ countdown to 0:

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

Then, click the ‘Next Step’ button, and leave the action as ‘show the campaign view: Optin’ on the next screen. Click ‘Next Step’ once more and you will see a summary.

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

Once you’re happy, simply click the ‘Save’ button at the top of the screen, then click the ‘Publish’ tab. Click the ‘Status’ slider to set it to Active.

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

The final step is to activate the campaign on your website itself. Click on the OptinMonster tab in your WordPress dashboard, then click the ‘Refresh Campaigns’ button

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

You will then see your campaign listed here.

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

Simply visit any page on your website, and you will see your campaign in action:

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

方法2：使用SeedProd创建警报栏 (Method 2: Creating an Alert bar using SeedProd)

Another way to make an alert bar is to use the SeedProd WordPress plugin. SeedProd is best known for its ‘coming soon’ and maintenance mode pages for WordPress.

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

SeedProd also has a Notification Bar plugin that you can get when you sign up for any paid package.

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

First, you need to visit the SeedProd website and sign up for an account. Next, go to the ‘Downloads’ page within your account and download the Notification Bar Pro plugin:

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

Then, you need to install and activate the Notification Bar Pro plugin on your site. For more details, see our step by step guide on how to install a WordPress plugin.

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

Upon installation, you will see a page where you need to enter your license key. You can find this in your SeedProd account.

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

Next, go to Settings » Notification Bar Pro where you will start creating your notification bar. Simply enter a name for it and click the ‘Create Bar’ button.

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

You will now see the SeedProd notification bar editor. To begin with, the notification bar will show as an orange strip at the top of the screen:

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

To add text to the notification bar, click the ‘Call to Action Message and Button’ tab on the left hand side. Simply enter the text you want to use. If you want to add a call to action button, you can enter the text and the link for the button:

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

By default, the text will have the same font and size as the main text in your WordPress theme. To make it larger, just click on the ‘Typography’ tab.

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

Here, you can set any font and size you want for both the text of the bar itself and the button text.

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

If you want, you can change the color of your bar and button in the ‘Colors’ tab.

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

You can even add other elements to your notification bar, such as an email optin, a countdown timer, click to call button, and even links to your social profiles.

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

When you’re happy with your notification bar, click the ‘Enable/Disable Bar’ tab then switch to the ‘Enable Bar’ option. Finally, click the ‘Save’ button at the top of the screen.

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

Your notification bar will now appear on your site:

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

方法3：使用自定义HTML / CSS手动创建警报栏 (Method 3: Manually Create an Alert Bar Using Custom HTML/CSS)

What if you don’t want to use OptinMonster or Notification Bar Pro? In this method, we’ll show you how to create a notification bar using HTML and CSS code.

如果您不想使用OptinMonster或Notification Bar Pro怎么办？ 在这种方法中，我们将向您展示如何使用HTML和CSS代码创建通知栏。

Note: We don’t recommend this method for beginners. If you’re new to WordPress or don’t feel confident adding code to your site, then we suggest using one of the plugin methods above instead.

注意：我们不建议初学者使用此方法。 如果您是WordPress的新手，或者对将代码添加到站点感到不自信，那么建议您改用上述插件方法之一。

First, you will need to copy and paste some custom CSS code for the alert bar. Simply go to Appearance » Customizer page in your dashboard, then click the ‘Additional CSS’ tab at the bottom.

首先，您将需要为警报栏复制并粘贴一些自定义CSS代码。 只需转到仪表板中的外观»定制程序页面，然后单击底部的“其他CSS”标签。

Now, go ahead and copy and paste this CSS code into that box:

现在，继续并将以下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;
}

After you’ve copied that code, it should look like this. Simply click the Publish button at the top of the page to save your CSS code.

复制该代码后，它应如下所示。 只需单击页面顶部的“发布”按钮即可保存CSS代码。

Next, you need to add the HTML code for the alert bar text to your site.

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

The best way to do this is to install and activate the free Insert Headers and Footers plugin.

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

Note: Insert Headers and Footers is one of WPBeginner’s own plugins. We created it to make it really easy to add scripts, HTML code, and more to your website pages.

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

After activating the plugin, go to Settings » Insert Headers and Footers in your WordPress admin. Just copy and paste the following line of HTML code into the ‘Scripts in Body’ box:

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

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

Here’s how that code should look in the ‘Scripts in Body’ box of Insert Headers and Footers:

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

Of course, you can change the alert text to anything else you like. Don’t forget to click the ‘Save’ button at the bottom of the page once you’re done.

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

Now, you can visit your site to see the alert bar. It should appear at the top of every page, like this:

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

Tip: In a few WordPress themes, your alert bar may overlap your menu. You could alter the height of the bar to 40px or 30px to avoid this. You will also need to reduce the line height accordingly, so that your text stays centered vertically in the bar.

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

We hope this article helped you learn how to create an alert bar in WordPress. You might also like our comparison of the best WordPress drag & drop page builders to help you further customize your site without writing any code, and our list of the best WooCommerce plugins to grow your store sales.

我们希望本文能帮助您学习如何在WordPress中创建警报栏。 您可能还会喜欢我们与最好的WordPress拖放页面构建器的比较，以帮助您无需编写任何代码就进一步自定义网站，以及我们的最佳WooCommerce插件列表，以提高您的商店销售额。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。

翻译自: https://www.wpbeginner.com/wp-tutorials/how-to-create-an-alert-bar-in-wordpress/

wordpress创建