WP / 架站教學:想要讓聯絡表單的信好好寄出去嗎?手把手 WP Mail SMTP 綁定Gmail API 設定教學

Quen Luo
11 min readApr 28, 2021

相信大家在使用 WordPress 建立好網站後,都會需要利用到其中的留言表單功能,而要讓 WP 擁有寄件功能的方法有很多種,今天要教大家使用 WP Mail SMTP Lite (免付費版) 來建立完整的流程,包含 “綁定 Gmail API 成功寄出信件”、”利用別名郵件地址當寄件人”

什麼是 SMTP ?Simple Mail Transfer Protocol,SMTP
是網際網路上傳送 Email 用的文字協定(Protocol),Protocol 協定主要是為了讓電腦與電腦(主機)間能夠順利的溝通,郵件伺服器會依據 SMTP 來處理每一次的收發信件。
簡單具象化來說,要寄送一封電子郵件會有以下幾個步驟:
1. 我在電腦上使用了 [郵件客戶端程式] Outlook 撰寫了一封郵件、並按下 "送出"
2. [郵件客戶端程式] 聯絡 [SMTP 伺服器]
3. 電腦上的 [SMTP 伺服器] 從 Port 25 聽到有訊號要聯絡
4. [SMTP 伺服器] 和 [郵件客戶端程式] 開始溝通,確認身份
5. 確認成功,[SMTP 伺服器] 收下郵件,放在 “等待寄出隊伍的最後”
6. 累積了一定量或一定的時間(通常會很短),輪到了我的信件可以被送出去,[SMTP 伺服器] 會和收件方的 [SMTP 伺服器] 聯絡
7. 雙方的 [SMTP 伺服器] 彼此確認身份後,收件方的 [SMTP 伺服器] 會收下信件
8. 收件方的 [SMTP 伺服器] 將信件放至 [POP3 伺服器] 收件人的家中
SMTP Protocol
SMTP Protovol

安裝好 WP Mail SMTP 後,可以在側邊欄找到他的條目,點進去後如果不是 Pro 版本會出現 “這個網站目前使用的是 WP Mail SMTP Lite,不需使用授權即可繼續使用,請不必擔心。” 字樣,就代表我們已經成功安裝也啟動好了這項外掛囉!

WP Mail SMTP

其他外掛的推薦可以看這篇
WP / 架站教學:五大類實用、免費、不安裝會後悔的外掛推薦

Pre、測試郵件

在還沒有設定任何東西的情況下,會預設郵件程式為 php 也就是不使用其他的服務,直接使用 WP 搭配 php 去處理,但這項常常會出現寄件失敗,WP Mail SMTP 也會在我們選擇使用 PHP 郵件程式時跳出警告訊息,不建議我們使用。

當然我們也可以真的來嘗試看看是否真的如他所緊告的 — 無法解決電子郵件傳送問題,點選上方的 “電子郵件測試”,填寫收件者後按下 “傳送電子郵件”,失敗會馬上顯示結果在下方「傳送測試電子郵件時發生問題。」

傳送測試電子郵件時發生問題。
傳送測試電子郵件時發生問題

這時就要依靠其他的郵件服務商,WP Mail SMTP 支援包含大家常用的 Google Gmail、AWS Amazon SES、Microsoft Outlook 等等,接下來要示範如何串接 Gmail API 使用。

壹、成功寄出信: 件綁定 Gmail API

官方文件
How to Set Up the Gmail Mailer in WP Mail SMTP

Step1. 設定 WP Mail SMTP Plugin

在外掛的「一般」分頁中,填上寄件者郵件地址與寄件者名稱
注意:如果有要用別名的郵件地址,「強制使用 [寄件者電子郵件地址] 設定」的選項不要勾選喔!

設定寄件人資料

於郵件程式的選項中,選擇「Gmail」,下方區塊會自動顯示需要填寫的相關欄位。

選擇 Gmail 作為郵件程式

Step2. 在 Google 帳號中創建 Web App

使用新的分頁開啟 Gmail 應用程式的申請:(需登入)
https://console.developers.google.com/flows/enableapi?apiid=gmail&pli=1

登入成功後,就會讓我們選擇專案,可以直接我們之前為了架 WordPress 而創建的專案,會必較好統一管理。接著會讓我們同意一些隱私權、使用規範之類的條款,確定沒問題後「同意並繼續」。

選擇專案並同意條款

當我們按下同意鍵,會看到視窗顯示 API 已啟動 (The API is enabled) 的通知字樣,接著點選「前往憑證」(Go to credentials)

API 已啟用

Step2–2. 應用程式的憑證 — 新增至專案

將憑證新增至您的專案+ 您目前使用哪個 API? 
Gmail API
+ API 的呼叫來源為何?
網路伺服器(例如 node.js、Tomcat)web server (e.g. node.js, Tomcat)
+ 您需要存取什麼資料?
使用者資料 User data
將憑證新增至專案

在按下「我需要哪些憑證」後,Google 會顯示一個彈出式視窗,問我們要不要接著設定 OAuth,請選擇「設定」(Set up),而後會另開分頁是 OAuth 同意畫面。
註:不要關閉現在的分頁等等還會用到!

Step2–3. 應用程式的憑證 — OAuth

OAuth 同意畫面+ User Type?
如果是使用 GSuite 帳號請選:內部 Internal
如果是使用一般的免費 Google 帳號請選:外部 External
OAuth 同意畫面

點選建立後會出現許多的欄位可以填寫,包括應用的名稱(ex, 公司官網)、用戶 email、Logo、App domain(網站連結) 等等,也不是每個欄位都是必填的,這部分就不一個一個細講了。一樣記得最後要儲存喔!

Step2–4. 應用程式的憑證 — OAuth Client ID

回到一開始的設定分頁,現在要來創建 OAuth Client ID 以及開通授權,供 WordPress 使用 Gmail API。

+ 名稱
-> 取個喜歡且看得懂的名稱
+ 已授權的 JavaScript 來源
託管您網頁應用程式的 HTTP 來源
-> 直接輸入網站連結
+ 已授權的重新導向 URI
使用者完成 Google 驗證程序之後,系統就會將他們重新導向這個路徑。
-> 回到 WP 介面複製
網頁應用程式 的用戶端 ID

已授權的重新導向 URI,請回到 WP Mail SMTP 外掛介面中,於「一般」分頁下,複製「已授權的重新導向 URI」的內容。

已授權的重新導向 URI

按下「儲存」後會出現「建立 OAuth用戶端ID」的按鈕,再點一次該按鈕,頁面便會自動跳轉,並出現 Client ID 號碼,也會問使否要下載憑證,這邊我們直接點「稍後再下載」(I’ll do this later) 即可。

Client ID 號碼

Step3. 授與權限

在憑證頁面上,可以看到 OAuth 2.0 用戶端 ID 多了一項剛剛我們建立的憑證,請點擊鉛筆符號來查看用戶端編號以及用戶端密碼,並將其複製到 WP Mail SMTP 的欄位上,並點擊「儲存」。

複製帳號密碼至 WP

Step3–2. 授與權限-使用帳戶傳送電子郵件

當以上步驟都成功後,最後一項工作便是授與外掛使用 Google 帳戶傳送電子郵件的權限,點擊驗證旁的「授與外掛使用 Google 帳戶傳送電子郵件的權限」,Google 會自動跳出授權的介面詢問我們願不願意同意。

基本上要全都「允許」才會串連上 Gmail,回到頁面時會看到原本的驗證區塊出現了「移除連線」的按鈕以及連線身份的字樣,就表示已經串接成功。

串接成功

貳、寄件人名稱設定

官方文件
How to Send Emails From a Gmail Alias in WP Mail SMTP

Step1: 建立一個新的 Email Alias (非 GSuite 用戶可跳過)

注意:必須是該機構的 Google Workspace 管理者才能完成此步驟

進入 Gmail 介面,於上方選單中點選「設定」,接著按下「管理這個機構」(Manage this organization),就會跳轉至 Google Admin 介面。
也可以直接登入:https://admin.google.com/ac/home

點選管理這個組織

點選「使用者」區塊下的「建立備用電子郵件地址(電子郵件別名)」(Create an alternative email address (email alias)

Create an alternative email address (email alias)

接著會以彈出視窗要我們輸入欲新增備用電子郵件地址的使用者名稱,(在這篇教學文的情況下會是我們自己)

輸入您要新增備用電子郵件地址的使用者名稱

選擇帳戶後,系統會請你自訂想要取的別名,如果你同時擁有多個網域名稱,也可以在網域的部分已下拉式選單選擇。

備用電子郵件地址 (電子郵件別名)

按下「儲存」後,就正式建立了電子郵件別名(alias),如未來想要修改只要點選右方的鉛筆符號即可。

按下鉛筆可再次修改

Step2. 將新的別名加入 Gmail 寄件人名單中

如此一來 WP Mail SMTP 才能夠在 WP 中使用此別名

回到 Gmail 介面中,一樣點選上方的「設定」按鈕,接著點選第一個「查看所有設定」(See all settings),接著進入「帳戶」,按下「新增另一個電子郵件地址」(Add another email address)

Add another email address

按下後頁面會跳出視窗讓我們填寫別名,下方的「指定不同的[回覆至]地址」點選後則是會多一欄可以填上指定的回覆地址。而視為別名的選項基本上會已經被勾選,記得這是要勾的喔!

新增其他的電子郵件地址

當成功設定,Gmail 帳戶設定上換顯示新的 email 地址

成功新增

Step3. 在 WP Mail SMTP 中選擇我們新建的別名

回到 Wordpress 控制台介面,在 WP Mail SMTP 的「一般」分頁下,於「寄件者電子郵件地址」以下拉式選單的方式選擇剛剛所建立的別名。
也別忘了要滑到最下面按下 「儲存設定」喔!

選擇寄件人地址

補充、避免成為垃圾信的 DMARC 機制

官方文件
How to Add a DMARC Record

當我們綁定了 Gmail API ,也設定了 email 別名來給網站使用,但在寄件測試時卻出現了一個待改進的地方,那就是 DMARC 認證機制還沒有被設定上去,而設定 DMARC 與 Domain 的管理有關,就不在這邊贅述了。

DMARC Recommended

--

--