Create HTML Email Template & Auto Send Email Programmatically In Wordpress
在開發系統時，常常會遇到這樣的需求：
- 在某些情況下，系統要自動寄出一封email給使用者
- 該email的內容是將使用者的某些資料套入一個email模板所產生的
- 系統管理者會需要一個所見即所得的email的模板編輯器
讓管理者能夠在需要時進行模板內容的修改
由於這次使用wordpress開發系統，又遇到上面的需求了…
於是花了點時間研究一些現有的外掛
發現其實動點手腳就可以快速完成這個功能
在這邊筆記一下跟大家分享
當然如果有更簡單方便的做法，歡迎大家不吝指教
不過這篇文章不包含教大家怎麼樣才能在wordpress內寄信
要寄信測試的話，確認寄信服務可行是必須的
有需要可以參考下面這篇文章
Step1. 安裝email模板外掛
俗話說的好，不要重新造輪子
後程式碼時代就是要用別人寫好的code啊～
這個外掛就直接提供了編輯email模板的功能
(有HTML模板/純文字模板各1組，多組HTML模板的外掛我還沒找到QQ)
安裝好之後，在設定的地方會多一個WP Better Emails的選項
一開始的設定進去應該會長這樣
主要可以看到有分4大區
- 寄件者資料
- HTML email模板
- 純文字email模板
- 寄測試信
這篇文章內我們主要會用到的是HTML email模板的部分
畢竟寄出去的信能夠好看一點就好看一點哈哈
Step2. 在HTML email模板區塊貼上你的email內容
假設今天是一個email客服系統
當有用戶寄信來，系統要自動寄出確認信，告知用戶系統有收到信
email模板的內容就大概像是下面這樣
台灣水電工阿賢，您好本系統已在2018-01-19 18:00，收到您所寄的電子郵件
本公司將在三日內派遣專人與您聯絡XX公司客服部
接著在信件中需要把資料置換掉的地方，前後用特殊字元夾起來
ps.特殊字元在email模板內，慣例好像是用%，所以這邊我也順著使用，不過沒有強迫規定
這邊由於姓名與時間會因寄件者和收信時間不同而不同
所以將模板改成這樣
%姓名%，您好本系統已在%時間%，收到您所寄的電子郵件
本公司將在三日內派遣專人與您聯絡XX公司客服部
貼上去之後，把原本的%content%蓋掉
另外也可以使用所見即所得編輯器進行一些排版的調整
像是我這邊就把「三日內派遣專人」加粗
最後拉到最下面，按下Save Changes，把這個模板儲存起來
Step3. 在你需要自動寄信的時候，把email模板從從資料庫拿出來
要把email模板從資料庫拿出來之前，我們要先了解WP Better Emails這個plugin是如何儲存HTML email模板的
Q1:問題來了，WP Better Emails是怎麼儲存email模板的呢？
WP Better Emails是使用wordpress的options API來儲存email模板的
Q2:蛤？什麼是options API啊？
options API是wordpress設計給plugin使用的資料存取機制，讓plugin能夠不需要透過SQL語法，就能夠進行簡易資料庫存取的API
Q3:所以options API是怎麼儲存資料的啊？
wordpress在最一開始啟用時，會在DB中建立一個名為wp_options(更精確的說，應該是your_web_prefix+_option)的資料表
這個資料表有2個主要的欄位 ，一個是key，另一個是value，儲存資料的時候必須以一個唯一的key，搭配你要儲存的資料(value)進行儲存，而讀取資料時候只要給一個key，就能拿到之前使用該key所儲存的value
簡單來說，wp_options這個資料表是以key-value pair為概念來儲存資料的，Options API就是讓開發者可以方便地使用key去存取相對應的value
而這邊要注意一下，value的內容可以是一個值，也可以是一個物件或是陣列，總之你存什麼，拿出來就是什麼，這部分Options API已經幫你處理好了
Q4:可以舉一下實際的例子嗎？
可以，不過要先知道API怎麼使用：
- 儲存資料的API:
add_option( $key, $value); - 讀取資料的API:
get_option( $key );
以及假設資料表的內容是下面這樣
╔═══════════╦═════════════╗
║ key ║ value ║
╠═══════════╬═════════════╣
║ A ║ Apple ║
║ B ║ Banana ║
╚═══════════╩═════════════╝如果想要讀取Apple，要使用$apple = get_option('A');如果想要多儲存一筆資料(Dog)，key可以任意使用，但是不能使用A和B，因為已經有其他value使用A和B了
比如說可以用$apple = add_option('the_dog','dog');那資料表就會變成下面這樣
╔═══════════╦═════════════╗
║ key ║ value ║
╠═══════════╬═════════════╣
║ A ║ Apple ║
║ B ║ Banana ║
║ the_dog ║ dog ║
╚═══════════╩═════════════╝有興趣深入了解的可以參考下面兩個連結
講了這麼多，我們現在已經知道WP Better Emails是靠Options API來儲存資料了，那麼我再補充的更詳細一點：
WP Better Emails把下面4種資料以array的形式，以wpbe_options為key，儲存在wp_options這張資料表內
- from_name (寄件者姓名)
- from_email (寄件者email)
- template (HTML email模板)
- plaintext_template (純文字email模板)
所以我們可以使用get_option('wpbe_options')一次取得上述4種資料
//this is show execute var_dump(get_option('wpbe_options'));
array(4) {
["from_name"]=> string(0) ""
["from_email"]=> string(0) ""
["template"]=> string(3283) "some html code..."
["plaintext_template"]=> string(94) "some plain text..."
}Step4. 將使用者資料填入email模板中
這部分我就直接上程式碼了，註解應該算清楚
如果還是有看不懂的地方歡迎詢問我
這樣就打完收工啦
呼，累死
