內容目錄
歡迎回到鵠學苑 — WordPress 網頁設計超詳細攻略 – MailChimp 教學 中文 訂閱 電子報 行銷 工具，在之前的教學文章：MailChimp WordPress 電子報 製作 – WordPress 必學行銷工具中我們已經有談過有關如何在 WordPress 中透過安裝外掛的方式來為網站加入電子報的功能，在電子報的教學中，安裝完MailChimp For WordPress 這個外掛後必須在其設定介面中與MailChimp帳號進行連動，才能夠透過MailChimp將電子報表單匯入。而這一篇教學主要就是要教大家如何在MailChimp中製作電子報表單。
這一篇的教學可以說是MailChimp的”續集”，會這樣說的原因是，這兩篇教學必須都要閱讀過後，才能夠了解MailChimp到底要如何運用，其實MailChimp功能眾多且相當齊全，如果說不想要透過安裝外掛的方式來為網站增加電子報的功能，也可以在MailChimp網站設定中就可以取得程式代碼將其放置在網站中，一樣可以在網站中呈現電子報的表單，另外在發送電子報的部分也可以使用定時發送，在指定的時間自動發送電子報給所有訂閱者，相當的方便。以上提到的方法或功能在本篇教學會一一講解，雖然教學的內容有點長，也請務必耐心看完，不然可能會錯過一些重要功能！！接下來跟著鵠學苑的腳步，讓我們開始學習吧！
(小提醒：鵠學苑的所有教學均是以 Apple Mac OS X 系統 做步驟示範！)
MailChimp官方網站
https://mailchimp.com/
相關連結名稱
https://www.design-hu.com.tw/
第一步：進入到MailChimp的官方網站，記得要先註冊成為會員，不然會無法看到下圖中的畫面，登入可以看到在左上角有一個Lists的選項，點擊進入。
第二步：進入後會看到電子報的分組列表，預設的一組列表是在註冊帳號時所輸入的資料，在下圖中鵠崙設計這個列表就是註冊完畢就會有的，另外訂閱電子報的列表是筆者為了教學而新建立的。在列表結尾處點擊名稱為Stats的下拉式選單，選擇Signup forms這個選項。
第三步：進入後可以看到有四種不同顏色的表格建構器，後面會在介紹，在這個步驟先點擊第一個Form builder。
第四步：進入Form builder畫面，選擇第一個頁籤Build it，可以看到如下圖中紅色方匡標示的三個選項由上而下分別是：
第五步：畫面往下，可以看到如下圖的表格，這個就是顯示在網站內表格的樣式，如果說是透過連結的方式，其訂閱電子報的頁面表格一樣是如圖中的樣式，在這裡示範如何為表單增加元素，在紅色方框標示處是 radio buttons 的選項，點擊後會插入可供使用者選擇的項目。
第六步：可以看到在下圖中央表單的位置加入了三個選項，而其標題及選項欄位都是預設的文字，在右方點擊Field settings的標籤，可以開始設定新增字段區塊的內容，Field label就是設定標題，下方的 Required field 如果勾選這個選項就是必填項目，Menu options就是更改選項文字，可以看到本步驟圖三，就是修改完成的樣子。
第七步：點擊紅色方框標示的標題區塊，可以選擇插入網站 Logo 以作為辨識(見圖二)，圖片顯示的方法可以輸入圖片的位址，或者上傳圖片。也可以輸入公司、網站名稱等(見圖三)。
第八步：接下來選擇第二個頁籤Design it，這裡可以設計整體表格所呈現的格式，下圖中筆者修改了表格背景顏色為網站的主色系，也可以設定表格中欄位間距，字體大小等，如同在 WordPress 中佈景主題選項或頁面建構器的設定方式一樣，輸入數值或色碼及可以自定義。
第九步：在標題的部分一樣可以自定義其細節，途中是針對Header的文字大小、行高等做變更。
第十步：點選第三個頁籤 Translate it，這裡是定義表格的主要語言以及將表格提示文字做翻譯，可以看到第二個紅色方框標示的Auto-translate ，如果勾選的話將會自動翻譯表單內容為所選擇的語言，在此建議不要開啟，因為其翻譯出的文字內容並不是很完整，各位同學可以自行試驗參考。
第十一步：點開上一步驟中標示Set default language位置，將會出現如下圖中的下拉式選單，這裡是要定義表單的主要語言，請選擇Chinese (Traditional)，繁體中文，部分表單提示文字會自動轉換成中文，但有些會顯示為簡體中文，因此還是自行將其翻譯成繁體中文會比較妥當。
第十二步：全部設定完後記得點選下圖中標示的灰底儲存變更的按鈕，如此設定才得以保存。
第十三步：在設定完第一個訂閱電子報的表單格式後，記得回到第一步驟中有提到Forms and response emails這個選項，下圖就是點開選單後所顯示的電子報訂閱中其他步驟表格的選項，每一個選項如果要添加區塊其操作方式都跟前面教學一樣，並不是每一個表單都需要更改，但每一個表單都請務必要點進去檢查一次。
第一步：回到Signup forms的清單中，點選第二個 Embedded forms ，這裡是要為了要生成一個電子報訂閱表單的HTML代碼，然後將其嵌入網頁的操作位置，點擊右方Select的按鈕。
第二步：具體的設定方式跟第一小節所說的相差無幾，這裡就不再贅述，可以看到途中紅色方框位置的就是表單預覽樣式，在左邊的Include form title 中修改成我們想要的文字內容後，可以看到圖二中Copy/paste onto your site方框內的代碼，將其複製起來。
第三步：進入到網站後台，筆者在這裡示範的事將訂閱電子報的表格放入到最新消息頁面的側邊欄，點擊外觀→小工具，找到控制最新消息側邊欄的區塊，將自訂HTML元素拉到側邊欄區塊。如何在WordPress後台使用小工具選項請參考：WordPress 教學 基礎介紹五（外觀）。
第四步：在HTML上直接貼上剛剛在 MailChimp 複製的代碼，按下儲存即可。下面這四張圖是筆者將其顯示在網頁上的電子報訂閱表格中選項文字由英文修改成中文，各位同學可以按照圖中反灰底字段的位置，配合 Google 翻譯將其修改成中文，或者不修改亦可。
第五步：下圖是嵌入電子報訂閱後的表格樣式(只有右方紅色方框標示的位置)，如此就完成在網站內加入電子報訂閱表單。
第一步：如同樣在MailChimp的首頁畫面中點擊右上方的 Campaigns 選項，進入畫面後點擊最右方 Create campaign 的灰底按鈕。
第二步：下圖中是選擇要建立的類型，有電子信箱、廣告、登入頁面三種可以選擇，因為這一個小節是要講如何發送電子報給訂閱者，因此選擇 Create an Email 這個選項。
第三步：輸入要發送電子報專案的標題，點擊Begin的按鈕以開始。
第四步：進入到發送電子報設定頁面，第一個選項 ” TO “是要發送的對象，點擊右方的Add Recipients。
第五步：選擇要發送到哪一個列表分類中的訂閱者，順帶一提，不同的列表是可以用以分類不同目標的訂閱者，比如說主要想了解 WordPress 的使用者可以設在一個群組列表，而想諮詢網站架設方案的使用者可以分為另外一個群組列表，因此就可以根據不同的列表發送不同主題的電子報。
第六步：在Segment中可以選擇在列表群組內所分類的使用者，筆者在圖中是選擇全部列表的訂閱者。
第七步：Personalize the “To” field是自定義要傳送給群組內所有訂閱者的”電子郵件標題”，筆者在這裡輸入鵠學苑所有學員，接著點擊Save。
第八步：第二個”From”是設定電子報中要顯示的傳送者名稱，可以分別輸入個人/網站/公司名稱以及客服電子信箱地址。
第九步：這裡是設定主旨的文字，可以是文章標題，也可以是特惠活動內容摘錄，Preview text是指在預覽畫面中將顯示出電報內容簡短說明的文字。
第十一步：點擊Design Email就可以進入電子報內容排版及設定的頁面。
第十二步：編輯的方法與在WordPress中建立頁面及文章的方式一樣，點擊左方要編輯的區塊，右方就會出現該區塊可以編輯的內容，如下圖所示。
第十三步：四個選項內容都設定完成後，可以點擊測試郵件的按鈕，輸入自己的電子信箱，就可以開始測試，如圖二中收到電子報的測試郵件，檢查內容排版有無問題。
第十四步：在設定電子報的最下方有FACEBOOK的設定欄位，輸入標題、精選圖片、並且記得選擇發布位置(個人或粉絲團)。
第十五步：外點擊右上方的Send藍色按鈕，會出現如下圖正中央的小視窗。其中會列出將發送列表的名稱以及列表中所具有的訂閱者數量，接者點擊Send Now，出現如圖二的猩猩五指手掌圖示，就表示發送完成。
第十六步：還記得剛剛我們有設定FB同步發布電子報嗎？下圖就是發布後的畫面，圖二是信箱收到電子報的最終畫面，一次發送就能夠在兩中不同的行銷工具中推廣內容，是不是很方便呢？
第十七步：如果説不想馬上發送電子報，想要預約並指定未來的時間點發送，以下將教學如何設定。回到剛剛發送電子報設定完成的畫面，點擊右上方Schedule。
第十八步：在圖中紅色方框標示的位置設定日期及時間，點擊 Schedule Campaigns 的按鈕。
第十九步：如此就完成排程發送電子報，相當容易的設定。
在MailChimp電子報網頁後台中，其實還有更多其他的功能，比如說管理訂閱者，可以決定是否讓訂閱者取消訂閱，或者設定特定的訂閱者在不同時間內收到電子報的次數等等，在本篇教學所講的是最基本的操作，也是比較常使用的功能，其它有更多進階的操作，就等待各位同學們自行去發掘。不得不說的是，電子報這個行銷工具如果運用得好，是可以挖掘出客戶的不同需求，尤其是適用於商品眾多，更新速度快的電商網站去推廣新產品或促銷活動，對於網站的長期效益而言，是有很大的幫助！今天的教學到這裡告一段落了，不要忘記持續關注鵠學苑的最新文章，想學習超詳細的WordPress攻略嗎？？來 鵠學院 就對了！我們下次的教學見～
如何使用 Elementor 建立 WooCommerce 單一商品頁？圖文步驟教學
Elementor 選單小工具 – 客製化 Menu Widget 功能與樣式操作教學
Site Kit For WordPress – 網站後台顯示 Google 分析數據外掛教學