WordPress使用OneSignal實現用戶訂閱和推送網站通知

相信最近幾天訪問WordPress大學的朋友注意到我們添加了一個訂閱通知的功能,倡萌是使用OneSignal的推送服務,實現用戶訂閱和推送網站通知的。今天就來分享一下具體的操作方法。

OneSignal 是一家提供信息推送的服務商,支持手機端信息推送、Web端信息推送、電子郵件推送和APP應用內信息推送。只需要10多分鐘的簡單設置,就可以實現功能。國外提供這方面的服務的商家有好幾個,但是倡萌通過對比最終選擇了 OneSignal,最大的優勢是免費支持30000訂閱用戶,不限通知推送數量。而別家一般僅支持2000訂閱用戶。

關于訂閱和推送,可能大家比較熟悉的是郵件訂閱。但是郵件訂閱通常需要郵件發送功能和服務,一旦訂閱用戶數量上來了,郵件的發送數量和成功率就是一個瓶頸,或者需要額外的費用支出。

像 OneSignal 這類推送服務貌似是最近幾年才出現在大家的視野中,剛開始還擔心這類國外的服務會水土不服,但是測試了幾天,發現一切都很OK。國內用戶訂閱都很正常、推送消息幾乎秒到!目前雖然還不清楚訂閱量上來以后會是一個什么情況,但是 OneSignal 的免費額度還是相當有吸引力,對于一般的網站來說,30000訂閱用戶數量應該夠用的了。

好了,開始介紹具體的操作吧!

注冊 OneSignal 賬號

我們必須注冊一個OneSignal賬號,才可以使用他們的推送服務。訪問 OneSignal 官方 https://onesignal.com/ ,點擊右上角的 Sign Up 按鈕,即可進入注冊界面:

注冊 OneSignal 賬號

填寫郵箱、密碼和名稱,點擊 Create Account 按鈕完成注冊。

創建一個應用

使用你剛才注冊的賬號登錄以后,就可以在后臺創建應用,點擊下圖的 NEW APP/WEBSITE 按鈕,在彈出的對話框中,填寫一個名稱,然后點擊 CREAT 按鈕:

下一步,我們選擇谷歌瀏覽器的圖標,點擊 NEXT:

然后按照下圖選擇WordPress:

設置網站名稱、網址和上傳一個默認圖標,然后點擊左下角的 SAVE 按鈕:

保存了以后,就會看到下圖界面,里面有一個 APP ID 和 APP KEY,復制下來,稍后我們要用到的

如果你忘記復制了,以后可以進入到這個應用的 Settings 界面,點擊 Keys & IDs 選項卡,可以看到相關的內容:

通過上一步,我們已經創建了瀏覽器推送,但是針對蘋果瀏覽器 Safari ,還需要進一步設置。在應用列表,點擊應用的名稱,進入到管理界面。

點擊 Settings ,在 Platforms 下面可以看到,這里面還有很多需要設置的推送平臺,我們這里已經設置了ALL瀏覽器, 點擊 Apple Safari 后面的那個圖標:

在彈出的對話框中,可以設置網站名稱、網址,還可以設置一個圖標,保存以后,就可以看到一個 Web ID,這個很重要,我們后面要用到的,建議復制下來備用。

到這里,我們需要的瀏覽器推送的平臺已經設置好了,如果你需要設置更多的平臺,請自己去設置,這里就不再做介紹了,一般我們使用瀏覽器推送就可以了。

安裝和配置 OneSignal 推送插件

OneSignal Push Notifications 是一個 OneSignal 開發的WordPress插件,專門用來對接 OneSignal 服務的。我們可以在WP后臺插件安裝界面搜索 OneSignal Push Notifications 進行在線安裝,可以到官方下載后上傳安裝: https://wordpress.org/plugins/onesignal-free-web-push-notifications/

安裝并啟用插件以后,在WP后臺左邊菜單的最底部,可以看到 OneSignal Push 菜單,點擊進入就可以看到如下的設置界面。該插件不支持語言包漢化,所以只有簡單在圖片標注一下中文了。

我們注意一下第一個圖片的 Account Settings 部分,這里有三個選項,需要填寫一些API信息的。這就是我們上面提到的 APP ID 、APP KEY(REST API KEY)和 Safari Web ID,將它們分別填入即可,其他選項請盡可能參照圖片設置:

注意看下面的圖片,在自動通知設置這里,倡萌不推薦勾選,以免每次發布新文章都自動推送通知,數量過多的話,可能會造成用戶的反感!

然后還有一個設置選項需要注意,就是設置自定義文章類型,如果你的網站不僅一種文章類型,這個設置就要根據需要設置一下。

設置完所有選項以后,不要忘記點擊左下角的 SAVE 按鈕!

前臺效果展示

如果按照上面的教程仔細設置好以后,這個時候訪問前臺頁面,刷新一下,應該可以看到下圖界面,提示是否允許顯示通知,所有訪問的用戶都會看到這個提示:

然后在網站右下角,可以看到一個訂閱鈴圖標:

收到通知以后,一般會在電腦界面顯示出來

后臺發布文章推送通知

按照上面的步驟詳細設置了以后,我們就可以在后臺發布文章界面(或者其他文章類型發布界面),看到一個設置選項:

如果你要推送這篇文章,可以勾選設置,但是這里有一點需要注意:發布文章并推送以后,如果你要更新文章,記得先取消勾選,否則更新文章會再次發送推送!!!!

在OneSignal官方推送通知

除了可以在 WordPress后臺發布文章的時候推送通知,還可以在 OneSignal 官方后臺進行推送。進入應用的管理界面,點擊 Messages ,進入即可:

更多的操作方法,請看官方文檔: https://documentation.onesignal.com/docs/notifications

小結

在這篇文章中,倡萌主要分享了 OneSignal 的Web端推送的設置,支持 Chrome、Firefox、Edge、Safari瀏覽器。 它還有很多其他平臺可以開啟,具體就靠大家按需配置了。此外, OneSignal 官方后臺可以查看訂閱用戶信息,支持用戶分組,還有很多設置,大家就自己摸索吧,有什么問題可以看官方文檔,幾乎每一個功能和步驟都有文檔鏈接,非常用心!

倡萌

一個文科IT宅男,喜歡折騰WordPress和被它折騰 ^_^

7 條評論

  1. 不好意思 問一個超級小白的問題,選擇訂閱圖標為右下角,這個圖標正好和返回頂部的圖標沖突了,覆蓋上了,大佬問一下怎樣把這個小鈴鐺往左邊移動20個像素,能不能告訴我是哪行代碼,見笑了

    1. 在插件的設置界面,有一個選項 Customize the Subscription Bell offset position,你啟用這個選項后,會在下面出現新的選項,就可以調整位置的參數了

        1. 不同的系統顯示不一樣,windows10會在右下角顯示,真正的通知忘記截圖了,之前截取了一個歡迎通知的,已經在文章中補上了

發表評論