wordpress创建
Email lists are powerful. In a world crowded with a plethora of social networks, from Facebook to Snapchat, email is still one of the most powerful marketing channels.
电子邮件列表功能强大。 在从Facebook到Snapchat的众多社交网络拥挤的世界中， 电子邮件仍然是最强大的营销渠道之一。
Giants like Kissmetrics, Buffer, Michael Hyatt, and Jeff Goins agree that building and marketing to an email list is one of the best moves you can make for your brand. But actually doing that is much easier said than done. If you’ve tried to collect emails from your site, you know how slow of a process it can be.
像Kissmetrics， Buffer， Michael Hyatt和Jeff Goins这样的巨头都同意，建立和营销电子邮件列表是您可以为品牌采取的最佳举措之一。 但是，实际上说起来容易做起来难。 如果您尝试从您的站点收集电子邮件，您会知道该过程可能会很慢。
You might have heard of Hello Bar. It creates a thin bar at the top of your site that spans the screen’s length. Readers can conveniently enter their email into the opt-in box.
您可能听说过Hello Bar。 它会在您网站的顶部创建一个横屏的细条。 读者可以方便地在“选择加入”框中输入他们的电子邮件。
It sounds simple, and it is, but that’s why it works. If you use the Hello Bar right, you can get a jaw-dropping amount of emails. The numbers are crazy, Derek Halpern at DIYThemes got 1,180 emails in a month (He posted more about it on Social Triggers).
听起来很简单，确实如此，但这就是它起作用的原因。 如果您正确使用Hello Bar，您将收到令人jaw目结舌的电子邮件。 数字太疯狂了， DIYThemes的Derek Halpern每月收到1180封电子邮件 ( 他在Social Triggers上发布了更多有关此的信息 )。
The only downside is the click limit for free users. If you use the free Hello Bar, you’ll have a 100-click limit on your bar. That means you won’t be able to collect 101 emails without upgrading. There’s also a watermark that doesn’t go away without a Pro plan. While their paid plans are reasonably priced, you don’t need to upgrade because you can build your own Hello Bar for free.
唯一的缺点是免费用户的点击量限制。 如果您使用免费的Hello Bar，则您的酒吧将不能超过100次点击。 这意味着如果不升级，您将无法收集101封电子邮件。 还有一个水印，如果没有Pro计划就不会消失。 尽管他们的付费计划价格合理，但您无需升级，因为您可以免费构建自己的Hello Bar。
With a little basic WordPress manipulation, you can create your very own Hello Bar clone. Those giants I linked to earlier don’t necessarily love Hello Bar, they love the Hello Bar concept. And you can build that same concept for absolutely no cost. You can also integrate it with your email marketing service. I’ll be showing you how to integrate it with MailChimp.
通过一些基本的WordPress操作，您可以创建自己的Hello Bar克隆。 我之前联系过的那些巨头不一定喜欢Hello Bar，他们喜欢Hello Bar的概念。 您可以完全免费地构建相同的概念。 您也可以将其与电子邮件营销服务集成。 我将向您展示如何将其与MailChimp集成。
If you’re a WordPress novice, fear not––all you have to do is install a couple of plugins and change some settings. It’s that simple, and the result is a nice, appealing top bar in the Hello Bar style that you can modify to your heart’s content.
如果您是WordPress新手，请不要担心–您要做的就是安装几个插件并更改一些设置。 就是这么简单，结果是Hello Bar风格的漂亮，吸引人的顶部栏，您可以修改其内容。
And for those who favor more versatility in the way of coding, we’ll also go over how to code a bar from scratch. But even that’s not complicated.
对于那些喜欢在编码方式上具有更多功能的用户，我们还将介绍如何从头开始编写标准。 但这并不复杂。
So if you’re ready, let’s get started.
因此，如果您准备好了，那就开始吧。
To do this project, you’ll need the following:
要执行此项目，您将需要以下内容：
WordPress account WordPress帐户 MailChimp account MailChimp帐户The MailChimp for WordPress plugin
MailChimp for WordPress插件
The MailChimp Top Bar plugin
MailChimp Top Bar插件
Go to your dashboard and open the MailChimp for WordPress plugin. You should see a section titled MailChimp API Settings. In this area, there’s a small link underneath the API Key box that reads “Get your API key here.” Click on that link and log in to your MailChimp account.
转到仪表板，然后打开MailChimp for WordPress插件。 您应该看到标题为MailChimp API Settings的部分。 在此区域中，API密钥框下方有一个小链接，显示为“在此处获取API密钥”。 单击该链接并登录到您的MailChimp帐户。
Now click “Create a Key.” Your API key should now show up on the page. Highlight it and copy it to your clipboard.
现在，单击“创建密钥”。 您的API密钥现在应该显示在页面上。 突出显示它并将其复制到剪贴板。
Head back to the MailChimp for WordPress plugin. Enter your key into the API Key box and save your changes. Your WordPress and MailChimp are now connected.
回到MailChimp for WordPress插件。 在“ API密钥”框中输入密钥，然后保存更改。 您的WordPress和MailChimp现在已连接。
Now we’ll get to the good stuff. Navigate to the Top Bar plugin, which appears beneath the “MailChimp for WP” heading on the left sidebar. One of the best elements of this plugin is its simplicity. You don’t have to mess with any forms; it’s quite literally plug and play.
现在，我们将介绍好东西。 导航到Top Bar插件，该插件出现在左侧边栏的“ MailChimp for WP”标题下方。 这个插件最好的元素之一就是它的简单性。 您不必弄乱任何形式。 它实际上是即插即用的。
Once you click on the Top Bar plugin, you’ll see the Bar Settings. Here, you can modify what your bar will say. You can change the bar text, the button text, and the email placeholder text.
单击“顶部栏”插件后，您将看到“栏设置”。 在这里，您可以修改酒吧的发言内容。 您可以更改条文本，按钮文本和电子邮件占位符文本。
You can also select which list you want the submitted emails to go to. This comes in handy if you need a devoted email list solely for your site signups or if you want to segment your lists.
您还可以选择要将提交的电子邮件转到哪个列表。 如果您仅需要用于站点注册的专用电子邮件列表或希望对列表进行细分，这将很方便。
Now head over to the Appearance tab. While this menu doesn’t have a lot of options, it does have a lot of power. You can position your bar to be at the top or the bottom of the page. For true Hello Bar style, you’ll want to position it at the top.
现在转到外观选项卡。 虽然此菜单没有很多选项，但确实具有很多功能。 您可以将条形图放置在页面的顶部或底部。 对于真正的Hello Bar风格，您需要将其放置在顶部。
You can also change the size of the bar. The largest size is the closest to the size of a Hello Bar, and it also provides the most visibility. Surprisingly, it’s not obtrusive. Finally, you can modify colors and decide if you want a sticky bar.
您还可以更改栏的大小。 最大的尺寸最接近Hello Bar的尺寸，并且还提供最大的可见性。 令人惊讶的是，它并不引人注目。 最后，您可以修改颜色并确定是否需要粘性条。
On the Messages menu, you can change the wording of the different messages your new subscriber will receive, like a success message. You can also redirect the subscriber to a page upon subscribing. This is extremely useful if you’re funneling your subscribers to a landing page or a free offer that you included as a signup bonus.
在消息菜单上，您可以更改新订户将收到的不同消息(例如成功消息)的措辞。 您还可以在订阅后将订户重定向到页面。 如果您要将订户集中到登录页面或免费赠品作为注册奖金，这将非常有用。
To make your last few tweaks, go to the Advanced menu. Choose whether or not you want your subscribers to double opt-in (which is highly recommended). The second option gives you the ability to update existing subscribers whenever someone new signs up. For obvious reasons, leave this one at “no.”
要进行最后几项调整，请转到“高级”菜单。 选择是否要让订阅者重复加入( 强烈建议使用 )。 第二个选项使您能够在有人新注册时更新现有订户。 出于明显的原因，请将此选项设置为“否”。
Save all of your changes, and head to your homepage!
保存所有更改，然后转到您的主页！
Sign up for your own list, and make sure everything works properly. Are you redirected to the right page? Does your email show up in your MailChimp account? If so, you’re good to go! Your Hello Bar-style bar is now ready to build your email list.
注册您自己的列表，并确保一切正常。 您是否已重定向到正确的页面？ 您的电子邮件会显示在MailChimp帐户中吗？ 如果是这样，那么您就很好！ 您的Hello Bar样式栏现在可以构建您的电子邮件列表。
The most obvious advantage of creating a Hello Bar-style top bar from scratch is the flexibility. You can add CSS and JavaScript to modify the bar and add extra elements like animation. This is also a simple process, so even if you’re afraid of code, you can do this.
从头开始创建Hello Bar样式的顶部栏的最明显的优势是灵活性。 您可以添加CSS和JavaScript来修改栏并添加其他元素，例如动画。 这也是一个简单的过程，因此即使您担心代码，也可以执行此操作。
There’s a little bit of extra work required here. Instead of the Top Bar plugin handling the form creation, you’ll have to do it yourself.
这里需要做一些额外的工作。 无需使用Top Bar插件来处理表单创建，您必须自己做。
In your WordPress dashboard, hover over the MailChimp for WP heading and choose “Forms” from the menu that appears. Title your form, choose a corresponding list, and click “add new form”.
在WordPress仪表板中，将鼠标悬停在MailChimp for WP标题上，然后从出现的菜单中选择“表单”。 为您的表单添加标题，选择一个相应的列表，然后单击“添加新表单”。
On the next screen, you’ll be able to edit your form. You can edit the code directly, and there’s also menus for Messages, Settings, and Appearance. This is similar to the Top Bar plugin.
在下一个屏幕上，您将能够编辑表单。 您可以直接编辑代码，还有“消息”，“设置”和“外观”菜单。 这类似于Top Bar插件。
For this example, we’ll be using a simple form:
对于此示例，我们将使用一种简单的形式：
<input type="email" name="EMAIL" placeholder="Your email address" required /> <input type="submit" value="Sign up" />Once you’ve set up your menu the way you want it, click “get shortcode.” It’s right under the name of your form. The shortcode will pop up; copy it to your clipboard.
按照所需的方式设置菜单后，请点击“获取简码”。 就在您的表格名称下。 短代码将弹出； 将其复制到剪贴板。
Hover over the Appearances heading in the sidebar and select Editor. From here, you’ll want to go to the header.php file for your theme.
将鼠标悬停在侧栏中的外观标题上，然后选择编辑器。 从这里，您将转到主题的header.php文件。
You’ll want to figure out where to place your form in the code. I placed mine right before the closing </head> tag. Note: I used the Twenty Sixteen theme for experimenting, but any theme will work.
您将需要弄清楚将表单放置在代码中的位置。 我将我的代码放在了</ head>标记的前面。 注意：我使用了二十十六主题进行实验，但是任何主题都可以使用。
Here’s the code I used:
这是我使用的代码：
<div class="page-header"> <center> < ?php echo do_shortcode('[mc4wp_form id="53"]'); ?> </center> </div>This increases the page header so there’s enough room for the form. It then inserts the form via the PHP function do_shortcode(). Finally, I centered the form for a nice aesthetic.
这会增加页面标题，因此有足够的空间容纳表单。 然后，它通过PHP函数do_shortcode()插入表单。 最后，我将表格集中在一个漂亮的外观上。
The MailChimp shortcode will be unique for each user, so it won’t always read mc4wp_form id=“53” because the number ID will be different. Just paste your unique shortcode inside those brackets, and you’ll be good to go.
MailChimp简码对于每个用户而言都是唯一的，因此它不会总是读取mc4wp_form id=“53”因为数字ID会有所不同。 只需将您唯一的简码粘贴在这些括号内，就可以了。
Next, in the style.css file, I modified the page header simply, as follows:
接下来，在style.css文件中，我简单地修改了页面标题，如下所示：
.page-header { height: 100px; }And that’s it. The result is a functional yet rough top bar for your site. It’s not complete, but it’s the basic framework for you to experiment with. You can almost endlessly customize it with CSS and JavaScript, and if you want to do that, check out this article by Daymuse.
就是这样。 结果是为您的站点提供了一个功能强大但粗糙的顶部栏。 它并不完整，但是它是您可以尝试的基本框架。 您几乎可以使用CSS和JavaScript对其进行无休止的自定义，如果要这样做， 请查阅Daymuse的这篇文章。
Whether you choose to go with the basic WordPress version or the more customizable code version, you can have a shiny new top bar within a few minutes. Now you can get all the benefits of a Hello Bar without the cost.
无论您选择使用基本的WordPress版本还是使用更可自定义的代码版本，几分钟内您都可以拥有一个闪亮的新顶部栏。 现在，您可以免费获得Hello Bar的所有好处。
And if you’re looking for a completely free, dynamic bar that comes ready to go, check out our very own Random Hello Bar plugin (you should be seeing it in action right now).
而且，如果您正在寻找可以使用的完全免费的动态栏，请查看我们自己的Random Hello Bar插件 (您现在应该会看到它正在运行)。
No matter which route you choose to go, there’s no doubt that a top bar is one of the best marketing tools for your site or blog. Get one today, and you could be seeing spectacular results before you know it.
无论您选择走哪条路线，毫无疑问，顶部栏是您的网站或博客的最佳营销工具之一。 马上获取，您可能会不知不觉间看到了惊人的结果。
翻译自: https://www.sitepoint.com/creating-a-hello-bar-with-wordpress/
wordpress创建
相关资源：jdk-8u281-windows-x64.exe