wordpress弹窗通知_如何将Web推送通知添加到WordPress网站

wordpress弹窗通知

Do you want to add push notifications to your WordPress site? Push notifications allow you to send notifications to users even when they are not visiting your website.

您是否要向您的WordPress网站添加推送通知？ 推式通知允许您向用户发送通知，即使他们没有访问您的网站。

In this article, we will show you how to easily add web push notifications to your WordPress site. We will also talk about the best WordPress push notification plugins and how to send desktop & mobile push notifications from your WordPress site.

在本文中，我们将向您展示如何轻松地将Web推送通知添加到WordPress网站。 我们还将讨论最佳的WordPress推送通知插件，以及如何从WordPress网站发送桌面和移动推送通知。

什么是推送通知？ (What is Push Notification?)

Push notifications are clickable messages displayed on top of user’s desktop or notification area on their mobile device. They can be shown even when the user’s browser is not open.

推送通知是显示在用户桌面或移动设备通知区域上的可单击消息。 即使未打开用户的浏览器，也可以显示它们。

Aside from desktop, web push notifications also work on mobile devices. This allows you to reach your users across devices with latest updates and offers. Web push notifications have proven to be a very effective way to convert website visitors into customers and loyal followers.

除了台式机，Web推送通知还可以在移动设备上使用。 这样，您可以通过最新的更新和优惠跨设备访问您的用户。 事实证明，Web推送通知是将网站访问者转换为客户和忠实拥护者的非常有效的方法。

为什么要向您的WordPress网站添加Web推送通知？ (Why Add Web Push Notifications to Your WordPress Site?)

We have already discussed that 70% of people who leave your website will never come back. This is why you need to convert those website users into subscribers or customers.

我们已经讨论过，离开您网站的人中有70％永远不会回来。 这就是为什么您需要将那些网站用户转换为订户或客户。

You can do this by utilizing multiple channels at once. This includes email marketing, social media, mobile or SMS marketing, and web push notifications.

您可以一次利用多个渠道来做到这一点。 这包括电子邮件营销 ，社交媒体，移动或SMS营销以及Web推送通知。

While email lists are still the most dominant and effective marketing tool at your disposal, push notifications for us are proving to be quite effective.

虽然电子邮件列表仍然是您掌握的最主要和最有效的营销工具，但事实证明，推送通知对我们非常有效。

Here is why:

原因如下：

• Users need to give their explicit permission to receive push notifications. This means they are already interested in what you have to offer and are more likely to engage with notifications.
  用户需要明确授予接收推送通知的权限。 这意味着他们已经对您提供的产品感兴趣，并且更有可能参与通知。
• Push notifications are shorter and demand less attention than email or social media updates.
  与电子邮件或社交媒体更新相比，推送通知更短并且需要更少的关注。
• There is no algorithm, so nearly 100% of messages are delivered.
  没有算法，因此几乎100％的邮件都已传递。
• Users can control how their devices display notifications, they can snooze them, or turn them off entirely.
  用户可以控制其设备如何显示通知，可以暂停或完全关闭通知。
• Not as many companies are using it.
  使用它的公司不多。

Popular sites including Facebook, Pinterest, LinkedIn, and many others understand the importance and are already using web push notifications.

包括Facebook，Pinterest，LinkedIn和许多其他站点在内的流行网站都了解其重要性，并且已经在使用Web推送通知。

These notifications are more engaging than SMS, email marketing, and social media platforms. According to a survey, push notifications have a 50% higher open rate than email and twice as much click-rate.

这些通知比SMS，电子邮件营销和社交媒体平台更具吸引力。 根据一项调查 ，推送通知的打开率比电子邮件高50％，点击率是后者的两倍。

Having said that, let’s take a look at how to add web push notifications to a WordPress site.

话虽如此，让我们看一下如何向WordPress网站添加Web推送通知。

使用OneSignal在WordPress中设置Web推送通知 (Setting up Web Push Notifications in WordPress with OneSignal)

OneSignal is a free push notification service for WordPress websites. It allows you to easily add push notifications to any website.

OneSignal是针对WordPress网站的免费推送通知服务。 它使您可以轻松地将推送通知添加到任何网站。

First thing you need to do is install and activate the OneSignal plugin. Need help installing the plugin? See our step by step guide on how to install a WordPress plugin.

您需要做的第一件事是安装并激活OneSignal插件。 需要安装插件的帮助吗？ 请参阅有关如何安装WordPress插件的分步指南。

Upon activation, the plugin will add a new menu item labeled OneSignal to your WordPress admin bar. Clicking on it will take you to the plugin’s settings page.

激活后，插件将在您的WordPress管理栏中添加一个标记为OneSignal的新菜单项。 单击它会将您带到插件的设置页面。

The settings page is divided into Setup and Configuration tabs. The setup tab is actually detailed documentation on how to setup OneSignal push notifications in WordPress. It has the same steps that we will show you in this tutorial.

设置页面分为“设置”和“配置”选项卡。 设置选项卡实际上是有关如何在WordPress中设置OneSignal推送通知的详细文档。 它具有与本教程中介绍的步骤相同的步骤。

To setup OneSignal, you will need to add API Key and APP ID into the plugin settings.

要设置OneSignal，您需要将API密钥和APP ID添加到插件设置中。

Let’s get started.

让我们开始吧。

步骤1：设置OneSignal推送通知 (Step 1: Setting up OneSignal Push Notifcations)

First, you need to visit the OneSignal website and click on the get started button next to the Web Push option.

首先，您需要访问OneSignal网站，然后单击“ Web Push”选项旁边的“开始”按钮。

You’ll be asked to provide your email and password to create a free account. After your account is created, you’ll reach the OneSignal dashboard.

系统将要求您提供电子邮件和密码以创建一个免费帐户。 创建帐户后，您将进入OneSignal仪表板。

On the dashboard, click on the ‘Add App’ button to create your first app.

在信息中心上，点击“添加应用”按钮以创建您的第一个应用。

You’ll be asked to provide a name for your app. You can use anything here that helps you identify it.

系统会要求您提供一个名称。 您可以在此处使用任何有助于您识别的内容。

Next, you’ll need to select a platform. You can select multiple platforms for an app. For now, we recommend selecting ‘Web Push’ and click on the next button to continue.

接下来，您需要选择一个平台。 您可以为一个应用选择多个平台。 目前，我们建议选择“ Web推送”，然后单击下一个按钮以继续。

In the next step, you’ll be asked to select an integration method. Go ahead and click on ‘WordPress Plugin or Website Builder’ box and then select WordPress.

在下一步中，将要求您选择一种集成方法。 继续并单击“ WordPress插件或网站构建器”框，然后选择WordPress。

When you scroll down a bit, you will see a ‘WordPress Site Setup’ section.

向下滚动时，将看到“ WordPress网站设置”部分。

You need to enter your website name, URL, and upload a logo. This logo would appear in your notifications, so we recommend using your site icon (favicon) or website logo.

您需要输入网站名称，URL并上传徽标。 该徽标将出现在您的通知中，因此我们建议您使用网站图标(favicon)或网站徽标。

Below that, you will see a toggle that you can turn on if your WordPress site is not using SSL/HTTPS. You can only send web push notifications from a secure HTTPS URL. If your WordPress site is not using HTTPS, then you need to turn this setting on and enter a label.

在其下，如果您的WordPress网站未使用SSL / HTTPS，您将看到一个可以打开的开关。 您只能从安全的HTTPS URL发送Web推送通知。 如果您的WordPress网站未使用HTTPS，则需要打开此设置并输入标签。

A label is basically a subdomain hosted on OneSignal servers using a secure HTTPS URL. This subdomain will be used to send your push notifications.

标签基本上是使用安全的HTTPS URL托管在OneSignal服务器上的子域。 此子域将用于发送您的推送通知。

If you want to setup HTTPS on your own WordPress site, then see our step by step tutorial on how to move WordPress from HTTP to HTTPS. We highly recommend using your own domain with SSL than a subdomain on OneSignal, so you’re not forever locked in to their platform.

如果您想在自己的WordPress网站上设置HTTPS，请参阅有关如何将WordPress从HTTP移至HTTPS的分步教程。 我们强烈建议您将自己的域与SSL结合使用，而不要与OneSignal上的子域一起使用，这样就不会永远锁定在其平台上。

Once you are done, click on the save button to store your OneSignal settings. You’ll now see the API keys that you need to copy.

完成后，单击“保存”按钮以存储您的OneSignal设置。 现在，您将看到需要复制的API密钥。

Now, you can switch back to OneSignal plugin settings on your WordPress site and switch to the ‘Configuration’ tab. You need to paste the APP and API keys you copied earlier.

现在，您可以在WordPress网站上切换回OneSignal插件设置，并切换到“配置”标签。 您需要粘贴之前复制的APP和API密钥。

These API keys will only allow you to send push notifications via Chrome and Firefox web browsers.

这些API密钥仅允许您通过Chrome和Firefox Web浏览器发送推送通知。

You will also need Safari Web ID in order to send Push notifications via Safari web browser.

您还需要Safari Web ID才能通过Safari Web浏览器发送推送通知。

To get the Safari API key, you need to switch back to OneSignal website and go to the settings page for your app. Once there, you need to click on the edit icon next to Apple Safari.

要获取Safari API密钥，您需要切换回OneSignal网站并转到应用程序的设置页面。 到达那里后，您需要单击Apple Safari旁边的编辑图标。

Next, you’ll be asked to enter your website title, URL, and optionally upload a site icon.

接下来，系统会要求您输入网站标题，URL，并可以选择上传网站图标。

Click on the Save button to store your settings. After that, you’ll see your Safari Web ID on the screen which you need to copy.

单击保存按钮以存储您的设置。 之后，您将在需要复制的屏幕上看到Safari Web ID。

Once again, switch back to the plugin’s settings page on your WordPress site and paste the Safari Web ID under the configuration tab.

再次切换回WordPress网站上插件的设置页面，然后将Safari Web ID粘贴到配置选项卡下。

Don’t forget to click on the save button to store your plugin settings.

不要忘记单击保存按钮来存储您的插件设置。

You can now visit your website in a new incognito browser tab. You will see a push notification popup on the top and a bell notification icon at the bottom right corner of the screen.

现在，您可以在新的隐身浏览器标签中访问您的网站。 您会在屏幕顶部看到一个推送通知弹出窗口，在屏幕的右下角看到一个响铃通知图标。

The push notification popup will also appear on mobile browsers.

推送通知弹出窗口也将出现在移动浏览器中。

Note: The appearance of push notification popup prompt may differ based on http/https settings of your site.

注意：根据站点的http / https设置，推送通知弹出提示的外观可能有所不同。

Now, you may be wondering why this push notification prompt looks different than what you see on some other websites?

现在，您可能想知道为什么此推送通知提示看上去与您在其他网站上看到的有所不同？

Normally users see the browser default notification prompt, which looks something like this:

通常，用户会看到浏览器的默认通知提示，如下所示：

Now the problem is that, if a user clicked on ‘Block’ button, then they will never see a prompt for subscribing to notifications. To fix this, OneSignal comes with two different prompt types.

现在的问题是，如果用户单击“阻止”按钮，那么他们将永远不会看到订阅通知的提示。 要解决此问题，OneSignal带有两种不同的提示类型。

The first one is the push notification popup and the other one is the subscription bell icon. Both of them are fully customizable, and you can change them to meet your needs.

第一个是推送通知弹出窗口，另一个是订阅铃声图标。 两者都是完全可定制的，您可以更改它们以满足您的需求。

步骤2.自定义推送通知弹出窗口提示 (Step 2. Customizing The Push Notification Popup Prompt)

The basic push notification popup is quite simple. It uses generic language and displays your site’s logo. You may want to customize that to make it more personal.

基本的推送通知弹出窗口非常简单。 它使用通用语言并显示您站点的徽标。 您可能需要对其进行自定义以使其更加个性化。

Simply switch to the configuration tab under OneSignal plugin’s settings page on your WordPress site and scroll down to the ‘HTTP Pop-Up Settings’ section.

只需切换到WordPress网站上OneSignal插件设置页面下的配置选项卡，然后向下滚动到“ HTTP弹出设置”部分。

You need to click on the toggle next to ‘Customize the HTTP Pop-Up Prompt text’, and then start adding your own text.

您需要单击“自定义HTTP弹出提示文本”旁边的切换按钮，然后开始添加自己的文本。

Don’t forget to click on the Save button to store your settings before testing the prompt.

在测试提示之前，请不要忘记单击“保存”按钮来存储您的设置。

步骤3.自定义响铃通知图标 (Step 3. Customize the Bell Notification Icon)

Normally, the browser prompt for notification and the popup disappear when a user dismisses them.

通常，浏览器提示您进行通知，并且当用户将其关闭时，弹出窗口会消失。

What if users later change their mind and want to receive push notifications?

如果用户以后改变主意并希望接收推送通知怎么办？

The subscription bell in OneSignal allows you to keep showing users a prompt to subscribe push notifications on your site.

OneSignal中的订阅铃使您可以继续向用户显示提示，以订阅您网站上的推送通知。

The bell icon is also fully customizable from the plugin’s settings page. Simply scroll down to ‘Prompt Settings & Subscription Bell’ section and turn on the customization options that you want to change.

铃声图标也可以从插件的设置页面完全自定义。 只需向下滚动到“提示设置和订阅铃声”部分，然后打开要更改的自定义选项。

You can then scroll down and change settings for each option you want to customize. Ideally, you would want to change bell icon colors to match your own theme colors.

然后，您可以向下滚动并更改要自定义的每个选项的设置。 理想情况下，您需要更改响铃图标的颜色以匹配您自己的主题颜色。

Note: We don’t use the bell icon because we feel it’s a bit too intrusive.

注意：我们不使用铃铛图标，因为我们觉得它有点过于侵入。

步骤4.从您的WordPress网站发送推送通知 (Step 4. Sending Push Notifications from Your WordPress Site)

By default, the OneSignal plugin automatically sends push notifications for all new posts published on your website. If you want, then you can turn this feature off from plugin’s settings page under ‘Automatic Notification Settings’ section.

默认情况下，OneSignal插件会自动为您网站上发布的所有新帖子发送推送通知。 如果需要，可以从插件的“自动通知设置”部分下的设置页面关闭此功能。

You can also manually send a notification when you publish or update a post. Simply edit a WordPress post or page, and you will see the OneSignal meta box under document settings column on the right.

您还可以在发布或更新帖子时手动发送通知。 只需编辑WordPress帖子或页面，您将在右侧的文档设置列下看到OneSignal元框。

If you are using the old classic editor, then you will see the meta box like this:

如果您使用的是旧的经典编辑器 ，那么您将看到如下所示的meta框：

Check the box next to ‘Send notification on post update / publish’ and then click on update or publish button.

选中“在帖子更新/发布时发送通知”旁边的框，然后单击“更新”或“发布”按钮。

OneSignal will now send your article as a push notification to all your subscribers.

现在，OneSignal会将您的文章作为推送通知发送给所有订阅者。

Send a welcome push notification to new subscribers

向新订阅者发送欢迎推送通知

You can also send a welcome push notification to your new subscribers. Visit OneSignal’s settings page in your WordPress admin area and scroll down to the ‘Welcome Notification Settings’ section.

您还可以向新订阅者发送欢迎推送通知。 在WordPress管理区域中访问OneSignal的设置页面，然后向下滚动到“欢迎通知设置”部分。

Now when a new subscribes for push notifications, they will receive a welcome notification on their device. Depending on their browser and device the notification may look different.

现在，当新订阅者订阅推送通知时，他们将在其设备上收到欢迎通知。 根据他们的浏览器和设备，通知可能看起来有所不同。

That’s all, you have successfully added web push notifications to your WordPress site.

就是这样，您已经成功将Web推送通知添加到了WordPress网站。

You can also send custom notifications from the OneSignal app dashboard. The process is quite intuitive and you can follow onscreen instructions once you login to OneSignal.

您还可以从OneSignal应用仪表板发送自定义通知。 该过程非常直观，登录到OneSignal后，您可以按照屏幕上的说明进行操作。

其他好的WordPress推送通知插件 (Other Good WordPress Push Notification Plugins)

It is important to choose the right web push notification service from the start. Since most providers try to lock you in their platform, changing your push notification service can result in losing your old subscribers. Meaning if you switch, then you will be starting from scratch.

从一开始就选择正确的Web推送通知服务很重要。 由于大多数提供商都试图将您锁定在其平台上，因此更改推送通知服务可能会导致失去旧订阅者。 这意味着如果您切换，那么您将从头开始。

This is why we recommend asking the provider you choose for all settings you need to configure to make your subscriber list portable.

这就是为什么我们建议您向您选择的提供商询问为使用户列表可移植而需要配置的所有设置的原因。

At WPBeginner, we use OneSignal because it has the features that we need at a reasonable price.

在WPBeginner，我们使用OneSignal是因为它具有我们需要的价格合理的功能。

• OneSignal offers a free WordPress push notification plugin with unlimited mobile push and web push notifications for upto 30K subscribers.
  OneSignal提供了一个免费的WordPress推送通知插件，可为多达3万名订户提供无限的移动推送和Web推送通知。
• tracking with Google analytics, and a robust API.使用Google Analytics(分析)进行跟踪以及强大的API等功能。
• top email marketing services to send your newsletter emails via web push notifications顶级电子邮件营销服务一起使用，以通过网络推送通知发送新闻邮件

WordPress is all about choices. Here are some other WordPress push notification plugins that you can also try.

WordPress是关于选择的全部。 这里还有一些其他的WordPress推送通知插件，您也可以尝试。

• PushCrew – Connects your website to PushCrew’s push notification service. They offer a free plan limited to 2000 subscribers.PushCrew –将您的网站连接到PushCrew的推送通知服务。 他们提供了一个仅限2000个订户的免费计划。
• PushEngage Web Push Notifications – This is the connector plugin for PushEngage, a push notifications service provider. They have a free plan limited to 2500 subscribers, 120 notifications, and 5000 clicks.PushEngage Web推送通知 –这是推送通知服务提供商PushEngage的连接器插件。 他们有一个免费计划，仅限2500个订户，120个通知和5000次点击。
• PushAlert – Web Push Notifications – Helps you connect to PushAlert web push notification service. They also offer a free plan limited to 3000 subscribers.PushAlert – Web推送通知 –帮助您连接到PushAlert Web推送通知服务。 他们还提供了仅限3000名订户的免费计划。
• PushAssist – Connector plugin for PushAssist web push notification service. Their free plan is limited to 2000 subscribers.PushAssist –用于PushAssist Web推送通知服务的连接器插件。 他们的免费计划仅限2000名订户。

We hope this article helped you learn how to add web push notifications to your WordPress site. You may also want to see our guide on how to get a free business email address for your website.

我们希望本文能帮助您学习如何将Web推送通知添加到WordPress网站。 您可能还希望查看我们的指南， 了解如何为您的网站获取免费的企业电子邮件地址 。

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-add-web-push-notification-to-your-wordpress-site/

wordpress弹窗通知