如何設定WordPress網站的寄信SMTP?並使用Brizy製作聯絡我們頁面

本文最後更新日期:
2021-08-12

當你剛架設好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的社團,如果您有問題的話,可以加入社團來共同討論。

另外,也鼓勵訂閱電子報,如果有新的課程資訊,會主動給您通知。

加入FB社團

WordPress 新手站長 | 網站建置 | SEO優化 -傑哥架站教室交流團

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

在這裡搜尋其他的文章

歡迎來到傑哥架站教室

現在開始將教學拍成影片,希望您也可以訂閱我的頻道。將每周推出一支教學影片。希望得到您的回饋!
傑哥的 YouTube
Email:info@jclassroom.net
homeenvelopelaptoprocketearth linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram