如何将Web推送通知添加到您的WordPress网站

你有没有注意到像Facebook这样的流行网站上使用的网页推送通知? 最近我们的一位读者询问是否可以在WordPress中添加网页推送通知。 当然如此。 在本文中,我们将向您展示如何将网页推送通知添加到您的WordPress网站。

将网页推送通知添加到WordPress网站

为什么要向您的WordPress网站添加Web推送通知?

网络推送通知是在用户的桌面上显示的可点击的消息。 即使用户的浏览器未打开,也可以显示它们。

使用Google Chrome,Firefox和Safari浏览器在桌面上显示网络推送通知

除了桌面,Web推送通知也可以在移动浏览器上使用。

包括Facebook,Pinterest,LinkedIn和其他许多网站在内的热门网站已经在使用网络推送通知。 它被证明比短信,电子邮件营销和其他社交媒体更有吸引力。 据调查,推送通知在移动设备上的开放率为50%。

这意味着更多的参与者为您的WordPress网站,并显着提高您的整体页面浏览量和回访者。

话虽如此,让我们看看如何将网页推送通知添加到WordPress网站。

使用OneSignal在WordPress中设置Web推送通知

OneSignal是一项免费服务,允许您将推送通知添加到任何网站,网页或移动应用程序。

首先你需要安装并激活OneSignal插件。 更多细节

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

OneSignal WordPress插件设置

设置页面分为安装和配置选项卡。 设置选项卡实际上是关于如何在WordPress中设置OneSignal推送通知的详细文档。 它与我们将在本教程中向您展示的步骤相同。

要设置OneSignal,您需要将不同的API密钥和应用程序ID添加到插件设置中。

让我们开始吧。

第1步:创建Google密钥

首先,您需要访问Google服务向导网站。

创建Google服务应用

只需为您的应用程序提供一个名称并添加一个Android包名称即可。 OneSignal不使用Android软件包名称,但它是必填字段。

接下来,选择您的国家和地区,然后点击“选择和配置服务”按钮。

这将带您进入下一个屏幕,您将被要求选择您想要与您的应用程序一起使用的Google服务。 您需要点击“启用Google云消息传递”按钮。

启用云消息传递

您现在将看到您的服务器API密钥和发件人ID。

服务器API和发件人ID

您需要复制您的发件人ID并将其粘贴到Google项目编号字段下的WordPress插件配置选项卡中。

您还需要复制Server API密钥并将其粘贴到计算机上的文本文件中。 本教程稍后将需要使用此API密钥。

第2步:设置Chrome和Firefox推送通知

我们现在将在Chrome和Firefox上设置推送通知。 首先,您需要访问OneSignal网站并创建您的免费帐户。

一旦你创建了你的账户,你需要登录并点击“添加一个新的应用程序”按钮。

添加新的OneSignal应用程序

您将被要求输入您的应用程序的名称。 你可以使用任何你想要的名字,然后点击“创建”按钮继续。

应用名称

在下一页中,您将被要求选择一个平台进行配置。 您需要选择“网站推送”,然后点击下一步按钮继续。

网站推送

之后,您将被要求选择浏览器平台。 您将在一个框中看到Google Chrome和Mozilla Firefox,在另一个框中看到Safari。

您需要点击Google Chrome和Mozilla Firefox框。 本文稍后将介绍如何设置Safari。

选择浏览器平台

点击下一步按钮继续。

下一步,系统会要求您输入您的WordPress网站网址,Google服务器API密钥以及默认通知图标图片的网址。

应用设置

如果您的网站不支持SSL / HTTPS,那么您需要选中旁边的复选框 “我的网站不完全是HTTPS” 选项。 如果你喜欢,你也可以在你的网站上设置SSL,但这不是必需的。

Google Chrome不支援非SSL或HTTP网站的网页推送通知。 OneSignal通过将用户订阅到他们自己的https域上的子域来解决这个问题。

检查 “我的网站不完全是HTTPS” 选项将显示HTTP后备选项。 您需要为您的应用程序选择一个子域名,然后输入您在第一步中生成的Google项目号码或发件人ID。

http后备选项

点击保存按钮继续。 现在你可以退出这个对话框。 系统会提示您提示您的设置尚未完成,稍后可以继续。 单击是关闭对话框。

第3步:获取OneSignal密钥

您现在需要为您的网站获取OneSignal Keys。 在应用程序面板中点击应用程序设置。

应用设置链接

这将带你到你的应用程序设置页面。 您需要单击“密钥和ID”选项卡。

密钥和ID

这将显示您的OneSignal应用程序ID和Rest API密钥。

应用程序ID和Rest API密钥

您需要将它们复制并粘贴到您网站上的OneSignal WordPress插件的配置选项卡中。

第4步:设置Safari Web推送通知

请记住,我们跳过了Safari Web推送通知设置。 现在我们将向您展示如何设置Safari Web推送通知。

登录到您的OneSign帐户并进入您的应用程序设置页面。 向下滚动到Web平台,然后单击Apple Safari旁边的配置按钮。

配置Apple Safari

这将弹出一个对话框,您将被要求输入您的网站名称和网站的网址。

Safari浏览器推送通知设置

那么你需要检查旁边的框 “我想上传我自己的通知图标” 选项。

您现在将看到一个选项来上传不同的图标大小。 这些是方形图像,使用Photoshop或任何图像编辑程序来创建精确大小的图标。

点击选择文件按钮上传所有的图标。

上传Safari Web推送通知的通知图标

点击保存按钮,然后关闭对话框。

刷新应用程序设置页面并向下滚动到Web平台部分。 这次你会在Apple Safari下看到“Web ID”。

Safari网络ID

您需要复制此Web ID并将其粘贴到您网站上的OneSignal插件的“配置”选项卡中。

就是这样,您已经成功为您的WordPress网站设置了OneSignal网络推送通知。

第5步:测试您的WordPress网站上的Web推送通知

默认情况下,OneSignal插件会将订阅图标添加到您的WordPress网站。 在支持的浏览器中访问您的网站,然后点击订阅按钮。

订阅推送通知按钮

你会看到默认的“感谢你订阅”的消息。

现在登录到OneSignal帐户。 点击您的应用程序名称,然后点击应用程序设置。

向下滚动到网络平台部分,然后点击Google Chrome和Firefox旁边的配置按钮。

为Chrome和Firefox配置网络推送通知

您将看到您之前填写的平台配置屏幕。 只需点击保存按钮,然后点击继续。

测试网络推送通知

您将被要求选择目标SDK。 您需要选择WordPress,然后点击下一步。

选择WordPress

由于您只有一个用户,您的用户ID将自动填充。

点击下一步按钮,你会到达 “测试设置” 步。

点击 “发送测试通知” 按钮。

发送测试通知

一个信号现在将发送网络推送通知。

通知外观可能会有所不同,具体取决于您用于订阅的浏览器。 当通知出现在电脑屏幕上时,您需要点击它。

测试通知

它将带您到确认屏幕,显示您已成功为您的网站设置OneSignal网络推送通知。

成功消息

返回到OneSignal网站上的配置屏幕,然后点击“ 检查通知状态 ‘按钮。

检查通知状态

您现在将看到另一个成功消息,表示您已成功将Web推送通知添加到您的WordPress网站。

如何使用OneSignal在WordPress中发送Web推送通知

您的WordPress网站上的OneSignal网络推送通知插件会在您发布新帖子时自动向所有订阅者发送通知。

您也可以手动从OneSignal应用程序仪表板发送通知。 登录到您的OneSign帐户并点击您的应用程序名称。

从左侧的菜单中,点击“新消息”按钮。

发送新的Web推送通知消息

这会将您带到新的信息屏幕。 您可以为您的通知输入标题和一些内容。

在OneSignal中写入新的推送通知消息

您也可以点击选项,细分,时间表/稍后发送进一步自定义您的网络推送通知。

例如,您可以将其链接到您网站上的特定页面,将其发送到您用户的特定部分,或安排在特定时间发送。

我们希望这篇文章帮助你添加网站推送通知你的WordPress网站