第5課:如何設定WordPress網站的寄信SMTP?並使用Brizy製作聯絡我們頁面
當你剛架設好WordPress的時候,網站本身是無法發出信件的。我們要如何讓網站具有發送信件的功能呢?此時必須要有一台專門提供發信的SMTP伺服器。也就是說,只要網站需要發信的時候,就會請求SMTP伺服器代為送信。所以WordPress網站幾乎都需要配合一部SMTP,也就是傑哥為何推薦買網址時要在Gandi註冊的原因。(有送2個免費郵件,並提供SMTP代發信件功能)
傑哥架站教室的YouTube的影片教學
以下是傑哥錄製的影片「如何設定WordPress網站的寄信SMTP?並使用Brizy製作聯絡我們頁面,表單送出後自動發郵件通知你」
如果你喜歡看影片的話,那麼就直接去YouTube觀看吧!
發送信件的時機
以下是幾個常見的網站需要發送信件的時機:
- 重設管理員信箱時:當你去更改管理員的信箱時,網站會發出一封認證信。若無法接收到此信件,則無法順利更改管理員的信箱。
- 網站自動升級時:網站升級後,會自動發出電子郵件,具有提醒通知性質。
- 網站損壞時:網站遭到不明原因,無法正常運作時,在某些情況下會自動發出信件。
- 網站有人留言時:若開放留言功能,則預設當有人留言時,會發出郵件通知管理員。
- 送出表單時:這是最常見的功能,例如:網站上有聯絡我們表單,那麼送出表單後,需要發出信件通知管理員或是填表單者。
- 會員註冊時:當網站允許會員註冊時,那麼會員的認證、開通、忘記密碼等一連串功能,都需要發送信件來輔助。
- WooCommerce購物訂單產生時:如果是購物網站,那麼當有人購買成立訂單、付款時,等訂單狀態變動的時候,都需要發出信件通知。
安裝SMTP外掛
要使WordPress網站能夠寄出信件,需安裝SMTP外掛。這類的外掛有很多,傑哥認為最方便好用的是WP Mail SMTP這款外掛。
一般人可能不常接觸「郵件伺服器」、「SMTP」這類的資訊,所以設定時常常會感到困難,主要是不熟悉SMTP SERVER、PORT等等的資訊。
而WP Mail SMTP這款外掛的好處是具有精靈導引功能,並輔助設定,使設定成功率增加,並支援許多第三方的SMTP服務平台。它的基本版是免費的,且已經足夠使用。
現在就讓我們來安裝寄信外掛,在後台控制台→外掛
→安裝外掛
,搜尋WP Mail SMTP
,按安裝
後,啟用
外掛。
我們可以在設定
介面中看到,它除了能設定自己的SMTP發信伺服器(其他SMTP)之外,也能配合常見的第三方SMTP平台,並且設定簡單。
接下來,我們就來看看如何設定它。
使用自己的發信SMTP伺服器
如果你像傑哥一樣,是在Gandi租用網域,那麼直接在Gandi新增一個免費的電子郵件。
在電子郵件的介面,就可以看到SMTP郵件伺服器的設定值。
接下來,到WordPress後台,WP Mail SMTP外掛這邊,郵件程式選擇其他SMTP,並輸入如下圖的資訊:
按儲存設定
,這樣就已經設定好了。可以跳到下一節,準備發信測試。
使用SendGrid第三方SMTP服務
如果您並沒有寄信的Server,那麼可以用第三方的SMTP平台代替。在WP Mail SMTP外掛裡面有支援各種SMTP平台,為了節省大家摸索的時間,傑哥推薦SendGrid這個平台。
SendGrid一日在寄信100封以內是免費的,對於大多數人來說是夠用的。同時它的寄信機制也非常專業,寄出的信件較不會被歸類為垃圾信件。所以,我們可以先在SendGrid註冊一個帳戶。
在Sendgrid註冊帳戶
為了驗證帳戶的真實性,註冊時需要填入較多的個人資料,並且要經過電子郵件認證,並輸入手機號碼,以確認使用者的個人資料。
建立Sender
首先,需要在Sendgrid中建立一位「寄件者」,寄件者本身必需先經過認證。填入寄件者的個人資料後,再去收驗證信,驗證通過後,之後就可以使用這位寄件者的名義,透過Sendgrid平台發出信件。
此時你可以填寫你的Gmail,或是任何你可以收信的信箱,然後建立一個Sender。
驗證信箱後,你的Sender就建立完成了。之後透過Sendgrid發出信件時,就會以此Sender的信箱為名義發出信件。
提取API KEY
在Sendgrid中Setting中,按Create API Key鈕,建立一個API KEY。
在建立Key時,記得先複製起來,並保存好,Key只會在此時出現一次。
設定WP Mail SMTP
取得Sendgrid的API KEY之後,在WP Mail SMTP的設定中,選擇Sendgrid,然後填入API KEY
,按儲存
,即完成設定。
驗證是否能發信
當一切都設定好了之後,我們可以來驗證網站是否能發信,直接在外掛
→WP Mail SMTP
的設定
→電子郵件測試
中,填入自己的Gmail或能收信的信箱,按傳送電子郵件
鈕,就可以發送測試郵件。
如果能收到一封郵件,就代表網站現在已經具有發信功能。
之後網站只要需要發信的時候,就會自動透過現在這個SMTP設定來發出信件。包含系統用的郵件,表單,電子商務等,所有用到發信的功能,都會自動使用這個預設定SMTP機制發信。
製作「連絡我們」表單,並自動發郵件通知表單內容
接續第四節課,傑哥繼續用Brizy頁面編輯器來做示範,製作「連絡我們」頁面,並且設計一個表單,讓客戶填完表單後,自動寄信通知。
由於WordPress已經具備了發郵件的功能,所以當做好聯絡表單後,WordPress網站需要發信的時候,就會請求SMTP伺服器代為送信。
永久連結的設定
開始製作聯絡我們頁面之前,我們先去設定永久連結
。在WordPress裡,永久連結是非常重要的設定。我們在後台,把永久連結
改為「文章名稱」,然後儲存
。
也就是說每個頁面或文章,它都有一個代稱(別名),這個代稱就直接用來做為此頁的網址。例如,在連絡我們頁面,的代稱為contact-us,那麼此頁的網址就會是https://yourdomain/contact-us
現在使用Brizy編輯器來製作聯絡我們頁面。點擊Edit with Brizy
,先將此頁的 template 改為 default
,這樣頁首、頁尾才會顯示出來。
接著,可以引用Brizy提供的 block 樣版來製作,選定後可以直接引入contact 的block。
表單的設計
表單的設計與操作,請看YouTube的影片介紹。重點是要依據欄位的性質,選擇不同的欄位型式。例如:姓名為文字
的型式;email是email
的型式;詳細說明為段落
的型式。表單與送出鈕的外觀,也可以直接在屬性上更改。
送出表單後的處理
用戶按下送出
鈕之後,為何可以寄信通知站主呢?
按鈕後的動作,需在按鈕的插頭icon這裡設定。也就是按下送出
之後,要執行什麼動作?因為剛剛已經設定好WordPress 的寄信機制,所以這裡可以直接選 WordPress
。
下一步,填入寄信的主旨、收件人、CC等資料,按最右下角的 Update鈕
即可存檔。
然後去前台查看聯絡我們頁面,填好表單,測試一下是不是真的可以收到信件?按下送出鈕之後,會顯示「YOUR EMAIL WAS SENT SUCCESSFULLY」,且信箱已經收到信了,而且主旨與內容都正確。
Brizy 的表單元件,雖然是一個簡單元件,它的欄位種類不多,但是若用於一般的聯繫表單,剛好夠用,不用再另外購買表單的外掛了。那麼到此為止,連絡我們的頁面就完成了。
問與答
問:WordPress網站是否一定要有SMTP功能?
答:沒有SMTP功能,也不會網站仍然是可以運作的,只是不能發信而已。
就算是沒有表單,但是網站有些基本功能(例如:忘記密碼),還是需要發信,建議網站還是要具備發信的功能。
問:使用自己的SMTP和平台式的SMTP有什麼不同?
答:都可以達到發信的目的。
使用自己的SMTP方便設定,快捷,不需要經過第三方。寄件者就是自己的設定的email。
使用第三方的SMTP會具有統計等功能,需要API KEY,所以安全性更佳。若需要大量發信時,需改用專業的第三方SMTP。寄件者會顯示「經由Sendgrid」。
問:若網站無法發出信件,如何處理?
答:通常是SMTP的PORT設定錯誤,帳號/密碼錯誤,請詳細檢查您的設定後,再測試。若曾經大量發送郵件,則需檢查數量是否超過規定。
網站設定SMTP結論
這篇文章就是協助您的WordPress網站架好之後,有能力發出信件。不論是使用自家的SMTP或是第三方平台,都能讓你的WordPress網站具備發信功能,只要能了解原理,那麼設定也就不那麼難了。
並且使用Brizy頁面編輯器做示範,製作「連絡我們」頁面,讓客戶填完表單之後,能夠以email自動發出郵件給我們。以上的內容,你是不是學會了呢?
傑哥成立一個FB的社團,如果您有問題的話,可以加入社團來共同討論。
另外,也鼓勵訂閱電子報,如果有新的課程資訊,會主動給您通知。
1 則留言
Darren
傑哥您好,我已經在synology架設好wp跟SMPT了,我該怎麼透過表單寄信呢?
傑哥
你可以在WordPress後台安裝smtp的plugin(推薦yaysmtp),在設定smtp後,可以測試一封郵件,是否能寄出信。
先確認可以寄出測試信,第二步才在表單設定表單「送出」鈕之後的寄信方式。
Chloe
傑哥你好
我想請教一下你在SendGrid裡輸入的info信箱是怎麼申請的?
因為我輸入gmail的個人信箱他說不建議使用gmail.com信箱,這個電郵伺服器我是想要做我品牌官網聯絡的信箱用的
我有品牌官網的網域了,但是這個SMTP一直用不好,不知道能不能教教我
傑哥
要看您的網址在哪裡申請的?
傑哥推薦Gandi這家網域商不錯,有贈送2個免費的email,且它的操作介面很清楚明白。所以我自己和客戶都盡量在Gandi買網址。
買完網址,就可以使用它的信箱了。
如果你不是在Gandi買的,也可以將網址管理「轉移」到Gandi,這樣長久來說,是一個比較好的辦法。