內容目錄
歡迎回到鵠學苑 — WordPress 網頁設計超詳細攻略 – OneSignal 推播通知對網站而言是相當實用的網路行銷工具，當網站訪客進入後會主動在頁面上詢問當有新內容發布時是否想要收到網頁通知，並且在OneSignal 官網會有紀錄有多少人訂閱了網站通知，也能夠自訂消息發送給訂閱者。OneSignal 推播通知與電子報訂閱有些類似，差別在於前者是在網站與電腦上 ” 自動 ” 跳出新通知，而電子報則需要透過 ” 手動 ” 編輯電子郵件來發送給訂閱者，兩者並不衝突，建議可以同時使用，電子報教學：MailChimp WordPress 電子報 製作 – WordPress 必學行銷工具。
在 OneSignal 網頁推播通知的教學中，將解說如何在 OneSignal 官方網站的註冊與設定流程，並且在 WordPress 網站中安裝 OneSignal 專屬外掛，透過設定介面調整 OneSignal 推播按鈕的文字內容、位置、色彩等項目，以及使用者訂閱後通知訊息動作指定等，按照步驟指示操作相信很快就能完成設定，希望可以幫助到有開啟網頁推播通知需求的朋友。接下來跟著鵠學苑的腳步，讓我們開始學習吧！
(小提醒：必須要在網站加入 OneSignal 外掛才能完成啟用網站推播通知功能，並建議將網站升級為 SSL 加密（非必要）
，詳細說明：HTTPS、SSL是什麼？SSL憑證 對網站來說重要嗎？ )
OneSignal 官方網站
https://onesignal.com/
OneSignal 説明文件
https://documentation.onesignal.com/docs
Github OneSignal
https://github.com/OneSignal
第一步：進入到 OneSignal 官網，點擊右上角的註冊按鈕。
第二步：可以使用社交帳戶快速建立快速註冊，或者填入使用者資訊，步驟與一般網站註冊流程，在此不多做說明。
第三步：註冊完成後會有介紹 OneSignal 功能的提示視窗，可以自行觀看，點擊 NEXT 到最後一頁後，選擇中央的按鈕建立 OneSignal App（下圖二）。
第四步：在接下來的畫面中點選左上角 ADD APP ，會跳出設定 APP 名稱的提示窗，輸入網站名稱後（可使用中文），如下圖二所示。
第五步：因為是要在網站上加入通知，因此在接下來的選項中請點選 Web Push ，如果要在 MacOS 或 Window 上也開啟網站推播通知，就必須分別重複教學的設定步驟，本篇教學會以網站設定作為示範，選擇完後請點擊右下角的 NEXT 。
在接下的 Configure Web Push 設定畫面中要選擇網站架設平台，請選中 WordPress Plugin 後選擇 WordPress，如下圖所示。
第六步：設定 WordPress 基本項目，由上至下分別是網站名稱、網址、網站品牌標示圖片，如果網址是以 HTTP 開頭的話，要將 My site is not fully HTTPS 的選項開啟至綠色，輸入後點選 Save，會跳出圖二的 APP ID 與 APP KEY ，將兩組英數混合的字串記下保留，下一小節設定 OneSignal 外掛時會要輸入。
第七步：完成後到 OneSignal 網站上方的 SETTINGS 可以確認網站通知功能是否啟用，如果有的話會在該欄位顯示 ACTIVE 的標示。
第一步：在外掛安裝介面 輸入 OneSignal，如下圖所示，依序點選安裝與啟用，完成後在側邊工具欄下方可以找到 OneSignal Push 的設定項目。
第二步：進入後首先到 Configuration 的標籤頁中，將剛剛申請的 APP ID 與 APP KEY 分別貼到對應欄位，同樣要注意網站 SSL 欄位，如果為 HTTPS 就要開啟，反之則關閉。另外在 Sent Notification Settings 設置的項目是不需要變動的，使用系統預設即可。
第三步：接續要設定的是 Subscription Bell （一般稱為小鈴鐺），在安裝並啟用外掛後，預設會在網站左下角顯示 Subscription Bell 圖示，當使用者同意接收網站通知或取消訂閱通知時，都會在小鈴鐺圖示中顯示提示文字，以下將設定項目翻譯為中文（順序為由上至下），提供給各位參考，也可以直接使用預設值，對推播通知功能不會有太大影響，請根據自己網站中所想要的功能做調整。
另外在下圖標示 2 的區塊是設定 Subscription Bell 在網頁上顯示的位置以及呈現的樣式，可以自行試驗。
第四步： Subscription Bell Offset Position Customization 可以設定小鈴鐺在網頁中上下左右的間隔距離，以 px 為單位 ; Subscription Bell Color Customization 則是設置顏色，以十六進位制色彩代碼做為設定值，如 #FDDA24 。
第五步：Subscription Bell Text Customization 可以自定義小鈴鐺的提示文字，預設為英文，可以在此將文字內容翻譯為中文，直接在欄位輸入即可，下圖二就是完成翻譯的結果。
第六步：當網站為 HTTP 開頭時，就必須要在 HTTP Pop-Up Settings 中做變更，同樣可以自訂文字內容。
第七步：下圖是當使用者開啟推播通知時所顯示的歡迎訊息內容，同樣建議編輯為中文，並且在 URL 網址中輸入像聯絡我們的頁面網址，或其他內容較為重要的網站頁面網址等。
第八步：另外在 OneSignal 外掛設定介面中有另外一個名稱為 Setup 的頁籤，基本上就是啟用 OneSignal Push 的安裝指引手冊，如果有遇到本篇文章沒有提到的問題，可以在此頁籤中瀏覽看看。
第九步：下圖是筆者完成 OneSignal 外掛設定後的範例畫面，圖一是當有新訪客進入網站後會顯示的推播訊息，圖二為小鈴鐺圖示。
第十步：回到 OneSignal 主畫面，可以看到開啟網站通知的人數，在 Messages 中也可以自訂通知發送給所有訂閱者。
下圖是編輯文章時會自動在右上角啟用 OneSignal 選項，如果勾選項目當此篇文章發布時將自動發送通知給所有訂閱者。
在本篇教學中只有先初步提到 OneSignal 如何註冊及使用外掛啟用網站推播通知，在 OneSignal 的網站中其實還有不少功能，為了避免文章內容過多影響閱讀體驗，在之後的教學文章中會再推出與 OneSignal 官方網站相關的設定教學。
今天的教學到這裡告一段落了，不要忘記在右側訂閱鵠學苑電子報，確保收到最新 WordPress 教學文章，如果有網頁設計相關需求，或者想了解最新網站知識，也可以到 鵠崙設計 做線上免費諮詢喔！我們下次的教學見～
GDPR 歐盟 個人資料保護 法規發佈，網站必須建立 隱私 政策 ！
B2B 外銷網站 – 網站設計與規劃的五大面向
Elementor 網頁編輯器 突破 300 萬下載次數，最受歡迎的外掛！