【CF7教學】如何將訊息寄送給不同收件人，適用餐廳分店／不同部門業務
如果你的公司業務量逐漸增加，也許是有多個分店，或者是有多個業務／部門在處理客戶需求，當客戶在填寫聯絡表單時，如果可以讓客戶直接選擇他想向哪一名業務，或者哪一個分店聯絡的話，將可以協助客戶更快地聯絡上能夠替他解決問題的對象。
這篇文章要教你如何使用Contact Form 7，透過製作一個下拉式選單，將你想列出的收件者列出，並讓客戶直接選擇要將此封訊息寄送給誰，方法非常簡單哦！
1. 效果預覽
下圖所展示的就是聯絡表單的完成品，透過選擇不同的分店，聯絡表單就會將這封訊息寄送給到分店的聯絡信箱。
2. 步驟教學
Step 1. 安裝外掛Contact Form 7
本教學是以Contact Form 7外掛作為基礎來製作表單的喔，若你的網站還沒有的話，請到「控制台>外掛>安裝外掛」搜尋Contact Form 7後，點選「立即安裝」並「啟用」即可。
Step 2. 新增聯絡表單
安裝完畢後，控制台左邊會出現一個「聯絡表單/Contact Form 7」的選項，點開後，你可以選擇「新增聯絡表單」，或者是直接使用你現有的表單。
Step 3. 增加下拉式選單
進入表單後，一開始你會看到有幾個預設好，要讓客戶填寫的欄位，每一個[]符號都等於一個欄位。
以第一個「名字」的欄位作說明，[text* your-name]最開始的text是欄位的類型，*符號代表這屬於必填的欄位，your-name則是這個欄位的標籤代碼，用來顯示在電子郵件中。
<label>跟<label/>是方便工程師調整表單樣式用的，這部分我們先忽略，不必調整。
你可以依照自己的需求點選上面藍色的按鈕加入不同的欄位，而我要先加入可以選擇收件人的「下拉式選單」，首先，點選「表單」的上方選項「下拉式選單」。
Step 4. 輸入選項
勾選「必填欄位」，在「欄位名稱」中輸入代表該欄位的標籤代碼。
接著在「選項」中，加入「名稱|電子信箱」，在|符號前面的名稱會顯示在聯絡表單中，而|符號後面的電子信箱，則會對應地成為收件者。
每一行會是一個選項，按照下圖範例所示，聯絡表單到時候會有五個選項，完成後點擊「插入標籤」即可。
Step 5. 填入收件者
接著到「電子郵件」欄位中，將收件者填入剛剛的「欄位名稱」，記得前後要加上[]符號哦，像我是將標籤代碼輸入branch，就填上[branch]即可，這樣之後客戶選好分店後，系統便會幫你把這封訊息寄給該分店。
寄件者可以填寫你的主要電子信箱，這樣分店收到訊息時，訊息比較不會被自動分去垃圾郵件區。
主旨會是訊息的標題，我自己習慣將客戶的姓名資訊放在標題後方，未來要找信件時比較方便。
電子郵件的內文就可以將所有的標籤代碼都放進去，訊息內容才不會漏掉，都完成後，點選右手邊的儲存即可。
Step 6. 使用短代碼
最後，上方會有一段「短代碼」，將短代碼整串複製起來，並貼到你想要他顯示的位置，就大功告成囉。記得要自己測試一下傳送訊息，確認是否都有順利運作喔。
【WordPress外掛】串連Google評價及Facebook粉絲頁留言步驟教學
如果你的公司或品牌有和Google資訊（Google My Business）連接，或者是自建Facebook粉絲頁，讓顧客可以在上面評分留言，我相信這些留言都能替你帶來更多潛在客戶，為了讓新客戶順利接收到老客戶的體驗心得，今天要教你如何將Google評價及Facebook留言串連到你的Wordpress網站。
1.串連Google評價
首先，從網站的後台Dashboard點開外掛→安裝外掛，接著搜尋Widgets for Google Reviews，找到作者名稱是Trustindex.io的外掛後，點選安裝並啟用。
接著左邊的工具列會出現Trustindex.io，打開後發現要輸入Google Place ID。
先到Google首頁，搜尋你的品牌名稱或店名，右手邊出現像下圖這樣的資訊欄後，往下滾動找到「撰寫評論」(Write a review)。
滑鼠在網頁空白處點選右鍵，選擇最下面的Inspect管理員，也可以使用 Ctrl+Shift+I 這三個快捷鍵來打開。
接著你的瀏覽器會被一分為二，點選有一堆程式碼左上角的滑鼠小圖示，接著點擊剛剛找到的「撰寫留言」Write a review，下方有幾行程式碼的背景色變成灰色後，在中間找到data-pid，把＝等號後方的一串英文數字反選複製起來。
再回到剛才網站外掛，把這一串代碼貼到空格中，點選Check→Connect，外掛就連結到你的Google資訊面了。
然後，你就可以快樂的選擇想要的樣式啦，第二步跟第三步都是讓你選擇評論要以什麼方式來呈現的。
接著，Google Reviews Widget外掛會讓你做最後的設定，自由依照個人喜好調整即可，左手邊的選項有：
- 顯示評分有幾顆星
- 留言介面的語言
- 日期要顯示的格式
右手邊的選項則是：
- Hide reviews without comments 隱藏無內文的評價
- Hide rating text 隱藏總評分的文字
- Show verifield review icon 顯示有通過審核的使用者圖示
- Show navigation arrows 顯示左右箭頭
- Show reviewers' photo 顯示留言者的頭像
- Enable mouseover animation 啟用滑鼠移動動畫
- Use site's font 使用網站的字體
- Show platform logos 顯示平台的Logo
- Show platform stars 顯示平台的星星數
最後，外掛會產生出一組短代碼，將它複製貼上到你想要顯示Google評價的位置即可，例如：首頁、文章內頁、頁尾、側邊欄等等。
2.串連Facebook評分
至於連結Facebook留言的方式，其實跟前面Google評價的部分非常像，因為都是同一個作者製作的外掛，而串連Facebook留言的外掛名稱是Widgets for Social Reviews & Recommendations，到網站後台→外掛→安裝外掛→啟用即可。
啟用外掛後，到後台左手邊選單找到Trustindex.io，點選Connect連結。
畫面會跳出一個小視窗，點選Connect，登入你的Facebook帳號。
確認要登入的用戶名稱無誤後，點擊藍色按鈕Continue as xxx。
緊接著會出現所有你擁有管理權的Facebook粉絲頁面列表，選擇一個你要連結到網站的粉絲頁面，再點選Next前往下一步。
確認要連結的粉絲頁面無誤，選擇右下角Done完成。
系統會告訴你剛剛選擇的Facebook粉絲頁面已經成功連結，點選ＯＫ繼續進行下一步。
回到網站外掛頁面中，下方會顯示你的粉絲專頁名稱以及頭像，點選Choose進行下一步。
接著就和前面Google評論的設定方式一模一樣了，選擇你要的評論顯示版型與款式。
在這邊一樣是讓你調整一些評論顯示的內容、語言、日期格式等等，如下圖所示：
最後，會出現Facebook專用的短代碼，把他複製起來，貼上到你想要顯示的地方，就大功告成囉！
自動化的客戶評價留言更新，能夠不定期地在網站上添加不一樣的內容，順便提升網站整體SEO，有經營Facebook跟Google My Business的品牌，務必要安裝看看唷！
【WordPress】6個重點整理，用Contact Form 7製作完美的聯絡我們頁面
一個好的聯絡我們頁面，可以吸引到許多潛在的客戶，它可以是除了網站以外，第二個影響讀者觀感的重要頁面之一，極有可能透過它來為你的網站帶來額外的商機，我知道這些道理不用我多說，你一定都懂，然而，你已經設計好一個完美的聯絡我們頁面了嗎？
如果你能夠透過精心設計的聯絡我們頁面，來獲取客戶的資訊，與潛在客戶進行連結與簡單的對話，將會省去你跟客戶之間許多用來溝通的時間，而且製作聯絡頁面的時間，甚至可以花得比一般頁面設計都還要來得更簡單快速！
以下文章將向你介紹五個製作聯絡我們頁面的重點，以及如何使用外掛Contact Form 7的設置教學，你準備好了嗎？繼續往下看吧！
一、六個製作聯絡我們頁面的重點整理
1.聯絡表單
首先，你的聯絡我們頁面中需要的是一個聯絡表單，這個聯絡表單可以省去訪客需要打開自己的信箱才能寄信給你的麻煩，而且透過聯絡表單，你能透過設置一些簡單的問答區塊， 瞭解到非常多關於對方的資訊。
那麼該如何製作聯絡表單呢？我目前用的是外掛Contact form 7，這個外掛的使用方法並不難，如果你還不知道怎麼使用這個外掛，可以繼續往下看下方的使用教學。
2.你的電子郵件Email
在加入過聯絡表單後，你可能會覺得疑問，還需要把我的Email放到聯絡頁面中嗎？答案是YES!
試想如果今天你需要購買一個網站的產品或者服務，聯絡表單送出後，你只能一直癡癡地等待對方的回信，要是能夠多一個聯絡得到對方的方法，相對來說一定會覺得比較安心，況且若聯絡表單出錯了，那麼Email信箱將是對方能夠重新連絡上你的備用方法。
如果你能夠在多個平台提供你的聯絡方式，不僅僅是保持住跟客戶間的聯繫，還可以提升客戶對你的信任感，要是你還沒加上Email到聯絡頁面，等等不要忘記囉！
3.你的回覆時間
回覆的時間你可以依個人的狀況而調整，這段時間你比較忙碌，回覆訊息的速度將會變慢，那就將回覆時間拉長，讓客戶了解到一個時間長度，並不是無窮無盡的等待，若你的回覆時間超過標註的時長，對方還可以試著用別的方式來聯絡你。
4.訪客可能會有興趣的內容
你可以透過自己所能提供的服務來設計這個聯絡表單，以本站《不只是個設計師》為例，我們的網站主軸圍繞在以Wordpress設計的網站、主題、外掛、主機及網域，那麼聯絡表單就可以放入像是對方有興趣的主題、對方所經營的網站、對方從哪裡得知網站等等，一切都以你的網站主題來製作，蒐集這些主動客戶所帶給你的數據。
5.從哪裡得知本網站
今天要是你同時在Facebook、Instagram、社團、群組、粉絲頁等等宣傳你的網站，如果可以知道哪一個來源的流量最好，為你帶來最多的訪客，那麼未來你就可以致力在那個平台宣傳，所以我會在聯絡表單內在放入一個選項，題目可以是「從哪裡得知本站」或者「如何得知本站」等等。
6.社群平台連結
最後一項是社群平台的連結，如果你有多方經營除了網站以外的社群平台的話，聯絡我們的頁面宣傳我想也是很重要的一點。在聯絡我們頁面中，我認為最好的狀態是，你把所有可以聯繫到你的資訊全部整合在這個頁面中，既然讀者想要聯絡你，那他就可以在這個頁面中選擇他習慣而且常用的平台來跟你溝通。
以上提到的六個重點，你已經融會貫通，並且想好你的聯絡頁面要放入那些元素了嗎？接下來我要教你的是如何使用外掛Contact form 7來製作你的聯絡表單。
二、外掛Contact Form 7教學
1.安裝外掛Contact Form 7
首先，到網站控制台左側功能列表，點選外掛→安裝外掛，接著搜尋Contact Form 7，找到外掛後，點選立即安裝→啟用。
2.新增聯絡表單
安裝好外掛後，左側功能列會出現一個「聯絡表單」的選項，選擇「新增聯絡表單」
3.加入需要的內容
這裡開始會稍微複雜一點點，請跟著我的步驟來製作表單：
- 先將表單內容全部刪除
- 打上你想要列出的欄位名稱，例如：姓名
- 接著點選上方你想要使用的選項，在姓名下面我們要加入的是文字欄位，所以點選「文字」
- 這時你會到下面一張圖片的畫面
- 欄位名稱請填寫英文，例如：your-name
- 欄位類型可依個人需求勾選，例如：必填
- Contact form 7就會自動幫你插入郵件標籤的程式碼
- 在完成整個表單的內容後，記得加入「傳送按鈕」，就完成囉！
如果你非常喜歡新增表單後，系統提供給你的預設內容，你也可以直接跳到第六個步驟，來使用短代碼顯示你的聯絡表單。
4.設定寄給自己的通知信
接著我們到郵件欄位，這裡要設定的是訪客在填寫完表單後，系統將會自動寄給我們的信件。
上方郵件標籤中你會發現有些是粗體字，代表這些資訊還沒放到信件中，你可以在下方的郵件內文，複製貼上這些郵件標籤，之後信件內才會出現訪客所填寫對應的內容。
像以下這張圖，因為我一開始把原本預設的內容都刪掉，全部自己製作，所以內容部分幾乎仍是舊的郵件標籤，像是郵件內文中，要把上方的[message]複製貼上取代掉[your-message]，才會收到完整訪客的訊息唷。
5.設定寄給寄件人的通知信
滑到畫面下方，你會看到有個郵件(2)的選項，如果你希望訪客收到一封「確認信件」，那就把這個選項勾選起來，接著一樣照上一個步驟來編輯郵件內容，未來訪客傳送郵件給你後，對方會在信箱內收到這封郵件的確認信，可以用來告知他「系統已經將訊息寄出，我們會在2天內回覆訊息」等等。
6.使用短代碼置入聯絡表單
接著，儲存完畢後，請將上方聯絡表單標題下方的短代碼，直接複製貼上到你的聯絡我們頁面中，就大功告成啦。
7.測試聯絡表單
最後，記得別忘了到你的聯絡頁面測試一下剛剛製作的聯絡表單，是否有乖乖按照你的設定寄送郵件內容給你，如果有任何遺漏的內容，趕快再回設定內確認你是否都把郵件標籤貼上了。
三、客製化你的聯絡表單樣式
這一個步驟你可以依個人的喜好來加入控制樣式的CSS語法，這裡我提供幾個比較常用的語法，你可以參考著使用，藍色字是我的說明，並不影響表單的樣式，紅色字是你可以調整更改的部分。黑色字請你不要更動，如果不需要的部分就直接整行刪除。
/*Contact Form 7樣式設定*/
.wpcf7{
background-color: white; /*背景顏色*/
padding: 40px; /*外框距離*/
font-size: 20px; /*字體大小*/
color: red; /*字體顏色*/
}
/*回應訪客的留言*/
.wpcf7 .wpcf7-response-output{
font-style:normal; /*字體類型*/
border:2px solid red; /*外框顏色*/
}
/*傳送按鈕*/
.wpcf7-form-control.wpcf7-submit{
background-color: black; /*按鈕背景顏色*/
color: white; /*文字顏色*/
}
CSS語法去哪裡加
在左側功能列中，滑鼠滑到外觀→點選自訂，進入後會看到下方有個「附加的CSS」選項，請將CSS語法加在這裡，右側則點到你的聯絡頁面，就可以馬上看到語法加入後，表單所呈現出來的樣式。
【WordPress】免費外掛Stackable教學，製作專業的靜態首頁
你是不是也跟我一樣，使用Wordpress製作網站，從充實內容開始，一步步漸漸累積起網站的權重、排名、點閱率，但是當別人第一眼看到自己的網站，多數人卻只會說「喔！你寫個人部落格呀？」，明明你寫了好多專業的攻略文、知識分享文、比較文！別人卻只當作你在寫抒發心情的小品文？
這篇文章要教你如何一步步設計出網站的靜態首頁，即使你不是一個專業的網站程式設計師，不會寫任何專業程式語法，也可以透過外掛Stackable編輯出理想的網站首頁，讓訪客一進入網站，就可以馬上理解你所要表達的主題重點！
1.什麼是靜態首頁
一般的Wordpress網站首頁，預設設定會是你的「最新文章列表」，訪客可以一眼看到你的最新文章，但也許沒辦法馬上理解你的網站主題。而靜態首頁，讓你可以將網站的主題整齊地放在首頁，讓用戶馬上抓到你要表達的重點，以下以旅遊網站來作舉例：
| 最新文章列表 | 靜態首頁 | |
| 訪客接收 | 文章1.泰國CP值最高的住宿 文章2.泰國必玩景點報你知 文章3.泰國簽證怎麼辦理 | 泰國旅遊 區塊1.住宿 - 如何訂住宿、注意事項 區塊2.簽證 - 如何辦簽證、簽證費用 區塊3.機票 - 廉航機票購買教學 區塊4.景點 - 曼谷、清邁、清萊 |
| 訪客認知 | 去過泰國旅遊的人分享的文章 | 專門寫泰國旅遊的專業網站 |
2.累積潛在客戶
透過以上表格，我想你們應該可以知道靜態首頁的重要性，試著想像一下，當訪客某天被網站的其中一篇文章吸引而來，他看完了文章，想要知道更多內容，有很高的機率會先點到網站的首頁，去看看這個網站還有提供什麼資訊，如果該網站的首頁很完整，有許多訪客想要了解的內容，訪客的下一個動作可能會是「將網站加入我的最愛」。這個時候，你就成功累積了一位會回流的潛在客戶。
3.如何設計靜態首頁
3-1.製作靜態首頁的時間點
依照你的網站內容豐富度，如果今天你是一位剛開始寫部落格的新手部落客，我會建議你先繼續努力的產出文章，並且依照我後面兩個步驟的說明，先規劃你應該優先要寫哪一些文章？在有目標的持續寫作後，過一段時間你的文章數量越來越完整了，同時你會發現靜態首頁的要素漸漸都達到了，這時再來設計你的靜態首頁。
3-2.構想你的目標客戶
設計靜態首頁時，你必須先構想你的目標客戶形象，以剛才的泰國網站來舉例，你的目標客戶族群可能是「想要去泰國自助旅遊，但不知道該如何規劃的旅客」，現在，請你將自己代入這個角色中：
「今天，我要去泰國自助旅遊，我最想知道的資訊有…」
後面的…就是你要呈現在靜態首頁的內容，請你拿出紙筆，列出一張清單，接著我們進行下一個步驟。
3-3.靜態首頁的六大要素
知道靜態首頁內容要放什麼後，以下我替你整理出一個靜態首頁至少應該要擁有最基本的六大要素，分別是網站名稱、主視覺/Logo、網站副標題、網站內容分類、CTA按鈕、如何聯絡作者。
請將以上項目確認好要放置的內容後，再來製作你的靜態首頁，當然你也可以依網站的特性不同來作更改，例如電商網站可能就需要列出熱賣商品區塊、或者是財商網站可以列出你最愛用的券商教學文等等。
一、網站名稱
靜態首頁的最上方，請放置你的網站名稱，加深訪客對網站的印象，讓他們能夠在未來透過搜尋網站名稱，就馬上回想起，並且透過Google搜尋找到你的網站。
所以網站名稱盡量簡潔，或者是好記、好念、順口、有意義等，甚至有些人到後期不滿意自己剛開始為網站取的名稱，都有可能會再更改，但如果能越早確定下來，會對Google搜尋引擎更有幫助。
二、主視覺/Logo
如果你能夠製作一個讓人印象深刻的網站主視覺圖像或者Logo，在一進入網站時讀者就能獲得非常持久的記憶點，它可以是一張照片、一個意象，能夠配合網站的主題製作，我相信都能為你的網站訪客帶來很不錯的圖像記憶。
三、網站副標題
副標題應該要是一句話，簡單明瞭的說明你的網站主題，讓讀者很快速的知道這個網站的重點，其實，我認為以上三點最好在每個頁面都可以看到，不論讀者用的是手機還是電腦，都可以在文章內看到，效果會是最好的。
綜合以上三點，我以本站來作舉例，給大家作為參考，不一定要和我一樣，最重要的是找到個人特色，呈現出你跟別人不一樣的地方。
四、網站內容分類
這部分你要將你的文章內容作整理，有點類似分類的概念，把他們分成好幾個大方向，用簡單扼要的方式呈現出你想要分享的訊息，這裡我以我的另一個網站－紐西蘭的小事記錄來作舉例：
因為是紐西蘭旅行為主的網站，所以我設想讀者最想要知道的內容分成幾個大項目，簽證、上網通話、交通、活動、機票、住宿等，讓想要來旅行的旅客，可以馬上知道他們在事前準備需要做好哪些作業跟動作。
五、CTA按鈕
CTA按鈕（Call to Action），是你用來引導讀者應該作的下一步動作，內容一樣是越直接明瞭越好，像是「開始來規畫你的行程吧！」或者是「讓我告訴你如何賺錢」等等，寫下一個連你自己看了都會想要點下去的文字內容，吸引讀者踏上閱讀網站的旅程。
六、如何聯絡作者
你如果能在網站上放上一點個人的自我介紹，以及該如何聯絡到你的方式，例如聯絡表單、電子信箱等，可以在讀者心中建立起對你的好感與信任感，是與讀者之間情感連結的方式之一，當然這個方法也能運用在文章底端，製作方法可以參考下列文章。
Stackable
外掛介紹
經過以上的前置作業，我想你對於自己的靜態首頁要放置什麼內容已經有一定的概念與想像了，這時候要來付諸行動，製作你的靜態頁面囉！
製作靜態頁面的方法很多，外掛Stackable是我個人在經過許多外掛跟主題的嘗試後，非常喜歡的一款古騰堡（Gutenberg）區塊製作外掛，它提供多樣化的區塊版面讓你使用，且版面是接近前端編輯器，你可以在編輯的同時直接看見網站之後會顯示的樣貌。
Stackable有分為付費版跟免費版，它在每一種區塊都提供了可免費使用的樣式直接套用，非常佛心，如果付費的話可以有更多種類型的樣式作使用，這部分就由大家自行斟酌。
Stackable vs DIVI vs Elementor
我在另一篇文章曾介紹過DIVI編輯器，DIVI編輯器的彈性更大，屬於更全面型的編輯器，適合用來設計整個網站。而大家比較熟悉的Elementor，我自己覺得優點只有中文這一點而已，大多數的區塊都需要付費才能使用。
這裡我提供給你一個比較表格，這三個編輯器都各有他們的優缺點，現階段我最愛用的是DIVI跟Stackable，如果你試用了他們過後有任何心得，都歡迎分享給我知道。
| Stackable | DIVI | Elementor | |
| 適合網站 | 部落格、個人品牌設計 | 部落格、商業網站、個人品牌設計、電商網站、一頁式網站 | 部落格、商業網站、個人品牌設計、電商網站、一頁式網站 |
| 對象 | 部落客 | 部落客、網站設計師 | 部落客、網站設計師 |
| 設計頁面 | 適合設計單一頁面 | 適合設計整個網站 | 適合設計單一頁面 |
| 語言 | 英文 | 英文 | 中文、英文 |
| 預覽方式 | 僅電腦版 | 電腦版、平板版、手機版 | 電腦版、平板版、手機版 |
| 免費版 | 有 | 無 | 有 |
| 付費版 | 美金$35/年 | 美金$89/年 | 美金$49/年 |
如何安裝與使用
首先，到網站控制台後，選擇左側的外掛→安裝外掛，搜尋Stackable後，點擊右上角的立即安裝→啟用，安裝部分就完成了，接著看你要在文章內使用Stackable的區塊，或者是在頁面→新增頁面，開始製作你的靜態首頁。
點選文章或頁面編輯器的段落左側+號，就可以找到有個區域的標題是Stackable，在這裡你可以找到所有Stackable所提供的區塊。
區塊說明
Stackable提供的區塊並不複雜，如果不清楚它的意思，那就每一個都點開來試試看，你就會知道它的樣貌，以下我提供給你在製造區塊後，右手邊你會看到的功能列英文代表意義。
免費樣式
首先，你可以在右手邊Layout裡面找到Free免費選項，裡面會提供給你不用付費也可以使用的區塊樣式。
Style 樣式設定
在Style樣式中，你可以設定該區塊的內容，每個區塊這裡可以設定的東西都有點不太一樣，但大致上會有以下圖片這幾項，前面有藍色按鈕的項目，都是可以自由開啟或關閉的，一樣依照你個人喜好去嘗試著使用。
剛開始可能很陌生，但漸漸的你就會發現它們並不難也不複雜，使用起來很直覺。另外，要注意的是有些區塊的呈現並不適合在手機版上顯示，可以在此個別設定調整在手機上的顯示畫面。
Advanced 進階設定
在每一次確認網站時，最好要同時確認電腦版與手機版，以免讀者在使用手機閱讀時有障礙，或者有些不必要的內容，在這裡可以直接選擇不顯示於手機用戶。
製作網站範例
前面有提到過的紐西蘭的小事記錄，是我的另外一個網站，它的靜態首頁就是利用Stackable製作的，我自己個人目前很滿意它的效果，有一種紐西蘭的小事紀錄網站，終於完整的感覺。
結論
如果今天你想要一個不會太複雜的靜態首頁，需要跟訪客及使用者表達你的網站主題性，Stackable絕對是很棒的選擇之一，如果你要製作的是一整個網站的設計，那我會推薦你使用DIVI。
【WordPress】利用3種方法教你在文章中加入作者資訊
當讀者在閱讀文章，並且非常滿意該文章所帶來的效果與幫助時，如果能在文章末端看見作者簡單的自我介紹，將能大幅提升讀者對於作者的信任感。
你可能會覺得「我在側邊欄有放入我的個人資料呀」或者是「我有放一個聯絡頁面在menu上」，但，許多讀者可能在閱讀完文章後，就直接把頁面關閉，至少我是這樣子的，你呢？
所以本篇文章將教你如何在文章內加入作者資訊框，讓讀者能夠更快掌握到網站創作者的資訊，在這裡我們可以採取的方式有三種，如以下：
- 選擇有作者資訊欄的主題
- 使用外掛：Starbox: Authorbox For Humans、Simple Author Box
- 使用「管理可重複使用區塊」
1.選用有作者資訊欄的主題
直接選用包含作者資訊欄的Wordpress主題，我想是最簡單的方法之一，如果你夠幸運，可以找到並且選擇一個你喜歡的佈景主題，直接套用到你的Wordpress網站，主題就會幫你在文末自動加入作者的資訊內容，那麼這邊要先教你的是，如何編輯你的Wordpress作者資訊欄資料呢？
設定作者資訊欄內容
- 首先，前往Wordpress控制台左側功能列的使用者
- 在要調整的人名下方點選編輯
- 編輯自我介紹欄內的圖像及自傳資訊
個人資料圖片的部分需要到Gravatar創建一個新的會員帳號，在裡面上傳頭像照片，就會自動連結到你的Wordpress網站囉。
2.使用外掛
2-1.Starbox: Authorbox For Humans
Starbox主要是以你在使用者那裡設定的作者資訊為主，直接讀取你設定好的作者資訊並顯示在文章末端，提供多種顯示的介面選項，如果你的網站是由多人一同打造創作內容，Starbox還可以顯示該作者的Related Article其他文章，推薦給讀者繼續觀看，另外也能選擇要在哪裡顯示作者資訊框，例如頁面、文章末端、文章開頭等等。
2-2.Simple Author Box
而Simple Author Box則是可以直接在外掛中設定你的作者個人頭像、資訊，一樣也是提供多種樣式可以選擇，基本上Simple Author Box跟Starbox是大同小異，我個人覺得可以兩種都下載來試試看。
3.管理可重複使用區塊
第三種方法則是使用「管理可重複使用區塊」，這個方法跟前面幾種自動加入的方法不同，算是手動加入，必須在每一次撰寫文章時特別加入，好處是可以完全照你想要的樣式製作，而且內容不限於作者資訊欄，不論你要任何加入文字、圖片、內容都可以。製作的方法如下：
- 進入撰寫新文章的右上角三個點選單
- 點開後會出現一個名為「管理可重複使用區塊」的選項
- 選擇新增區塊
- 編輯你要的內容文字圖片等
- 點選發佈
- 回到撰寫文章頁面
- 在新的段落左側點選＋符號
- 滑到最下面就會有你剛才發布的重複使用區塊
- 點擊加入文章即完成！
【WordPress】發佈文章網站卻沒更新？使用Cloudways主機常見問題
經過上一次搬家到Cloudways主機後，這兩天在更新文章時，發現似乎網站不會即時更新，稍微跟Cloudways主機客服聯絡後，才知道應該是外取外掛的影響，解決之餘順便分享給一樣在Cloudways設置主機的大家，以及如果有使用快取外掛的話，將網站恢復即時更新的解決方法。
解決辦法
1.DNS尚未轉換完成
原因一，有可能是網站的DNS尚未完成指向，通常搬家時需要重新設定DNS的A紀錄，但A紀錄更新的速度不一定，快的話一小時之類就會更新完成，慢的話可能會需要48小時，也就是2天時間。
那如何查詢DNS的狀況呢？可以到DNS Checker輸入你的網址，看看IP是否都成功指向新的主機IP位置，如果發現還沒完成，也有可能是這個原因唷。
2.清除Varnish
如果IP指向都正確了，仍然有一樣問題的話，可以到Cloudways的後台設定清除快取，步驟如下：
- 開啟Cloudways Server伺服器
- 點左側Manage Services
- 接著按一下中下方Vanish旁的PURGE 清除快取
- 完成
3.外掛Breeze
如果前面兩個方法都沒有用，在你設置主機或者搬家到Cloudways的時候，通常會有外掛Breeze自動被安裝到你的Wordpress後台中，Breeze是一個Cloudways用來幫助你加快網站速度的外掛。請到Breeze設定中，點選主選單的Varnish內的清除選項，將快取清除。
通常做到這一步，你的網站應該已經被更新了，要是還沒有，我只能說是你跟Breeze的八字不合，狠下心把他停用刪除吧！
【WordPress】Public Post Preview 撰寫業配文必備，草稿公開預覽外掛
通常在開始使用部落格或個人網站經營自媒體的人，網站逐漸有一定成績後，與廣告商合作或者寫廣告文的機會相對也會增加，當合作邀稿談成後，多數廣告商會要求要先審稿，再將文章發佈，但要如何讓廣告商審稿呢？你用的文件檔案是Word？或者PDF？但是這兩個都不能完整呈現到時候文章出現在網站上的最後樣貌。
預覽的方法有兩種，如以下：
- 將對方設定為網站使用者之一
- 使用外掛 Public Post Preview
大多數人應該和我一樣，不會輕易將他人設定為後台的使用者，而這篇文章就是要教你如何使用Public Post Preview外掛，讓廣告商不必登入你的後台，也可以看到尚未發佈的草稿文章在未來發佈過後的樣貌，步驟非常簡單，不必學會任何語法操作，那麼我們就繼續往下看文章囉～
Public Post Preview
外掛介紹
如果你的部落格布置得非常美麗，我想Word或是PDF都不能呈現出最好的一面給廣告商核對，但只要你使用的是Wordpress建立網站，就可以使用Public Post Preview外掛，將尚未發佈的文章草稿以預覽的方式給廣告商確認內容，不僅省事，少一道中間剪下貼上的手續，相信廣告商也會非常滿意，感受到你身為部落客的專業。
安裝方式
首先，來到控制台畫面左側的功能列表，點擊外掛→安裝外掛，搜尋Public Post Preview，接著按安裝外掛→啟用，完成了！簡單又方便，完全不需要做任何設定。
使用教學
那麼要如何知道該篇草稿的預覽位置在哪裡呢？請進入編輯文章的畫面後，右邊設定區域的內容中，會多一個「啟用公開預覽」的選項，將此連結複製貼給需要要預覽的人即可，只要點擊這個網址，對方就能看到草稿文章，不必再使用Word或PDF囉！
這裡有一點要提醒你注意的是，Public Post Preview 外掛預設設定文章預覽天數為2天，不過通常廣告商需要確認稿件的時間會比2天還要更久，如果你有需要延長預覽時間，請繼續往下看下一段教學，告訴你如何更改外掛Public Post Preview的預覽天數。
更改預覽天數
點選左側的外觀→佈景主題編輯器，第一次進入佈景主題編輯器的人，Wordpress系統會跳出警告，按已瞭解後，會看見右側的佈景主題函式庫（Function.php），請將以下文字語法貼入中間編輯區的最下面，點選更新檔案即可。
我這邊替你準備的是將草稿預覽延長至7天的語法，看你需要公開幾天，就把紅色數字更改成你需要的天數再貼上，就完成囉。
/** 延長公開草稿時間7天 **/
add_filter( 'ppp_nonce_life', 'my_nonce_life' );
function my_nonce_life() {
return 60 * 60 * 24 * 7; // 7 days
}
【WordPress】WPtouch手機版免費佈景主題，提升手機用戶體驗
相信使用Wordpress建站後，大家一定都有過助提選來選去就是沒找到適合的時期，Wordpress 有許多免費佈景主題雖然樣式好看，但當你套用到網站後，用手機一看卻慘不忍睹，偏偏現在是個人人都使用手機上網查資料的時代，有在使用Google analytics分析網站後台數據的人，更是能深深體會到手機版面的重要性。以我過去架設網站的經驗來看，通常手機版用戶會佔訪客的60%，另外30%則是電腦版用戶，剩下10%則是平版用戶。
這篇文章要教你如何使用免費的手機版主題外掛 WPtouch，從安裝到樣式設定，WPtouch 不僅可以讓你另外設定你的網站手機版畫面，且不必被原先的主題影響，在我個人用網站實驗過後，確實能有一定程度地提升手機版畫面載入速度，如果你也有手機版界面的困擾，請繼續看下去。
手機版主題外掛 - WPtouch
1.WPtouch介紹
WPtouch 專門以製作Wordpress的手機版主題聞名，它在Wordpress外掛介面上下載次數已超過10,000次， WPtouch 會將你的網站資料轉換成適合用手機閱讀的狀態，這麼做的優點除了介面美觀以外，最重要的是能夠提升使用者的體驗，進而優化網站的SEO，我想這是大多數Wordpress建站者最重視的部分，即使你不會撰寫程式語言，也沒有預算雇用一個網站工程師，也可以替你的網站打造出一個很不錯的手機介面。
2.安裝教學
WPtouch的安裝如同其他外掛一樣，進入網站的控制台後，點選左邊的功能列，選擇外掛→安裝外掛，接著在右邊的搜尋框搜尋WPtouch。找到後點擊立即安裝→啟用，就可以進入下一步囉。
3.一般設定
完成外掛安裝後，你會看到左邊功能列表出現了WPtouch，點進去畫面會出現外掛的基本設定頁面，這邊使用預設的設定即可，確認一下網站的名稱是否正確，或者有需要更改，可以按右上角的Preview Theme預覽畫面，可以看到目前你的手機版網站畫面。
4.樣式設定
然後我們點開左邊功能列的外觀→自訂，進到網站的樣式設定區，左上角的按鈕「Switch to Desktop/Mobile Version」讓你自由切換當下要調整的是手機版介面，或者是電腦版介面。
這裡的設定不難，唯一困擾就是還沒有中文化，但大家不用害怕！每一個選項都點開來玩一玩就對了，在你調整的同時，右手邊預覽畫面會即時出現更改後的樣式，以及右上角還可以將手機預覽畫面轉成橫向。全部選項都確認過一遍後，記得點選左上角的藍色按鈕「發佈」，將你辛苦完成的手機版主題設定儲存，接著就可以拿出手機欣賞你美麗的成果啦～
5.載入速度比較
前面介紹時提到過Wptouch可以提升整個網站的載入速度以及SEO優化，我自己拿了我個人的網站來做測試，雖然整體評分些微下降，但是在研究資料段落中，可以發現大多數的秒數都有縮短，且預覽的手機畫面出現內容的速度也加快了。
雖然並沒有到百分百完美，但我想這樣的效果以一個免費的外掛來說，已經是相當不錯的成績，如果你的網站手機用戶占比例相當高，那麼可以嘗試看看WPtouch外掛。
以下提供你Google Page Speed Insights這個網路工具，不過我要事先提醒，這個網站的分析僅供參考，大家不必因為它顯示出很低的分數或者數字就覺得焦慮或驚慌，我用它測試過Apple.com，行動版分數也是只有49分，但Apple的網站訪客數絕對是數一數二的。
延伸連結：Google Page Speed Insights 測試你的網頁速度
6.付費版本
如果你對於WPtouch有興趣的話，不妨可以參考看看它提供的付費版本，主題價格大約落在美金$15-50上下，對於Wordpress網站的深度使用者來說，它能夠提供更多樣化的手機版樣式以外，還有更多不同的額外功能，以下列出付費版本的優點：
- AMP for WPtouch：額外WPtouch加速器
- Basic Ads：自訂手機版的Google Ads廣告
- Advanced Type：自行安裝要使用的字體
- jQuery Enhanced：讓jQuery運行更加順暢快速
- Make Child Theme：額外打造孩童使用介面
- Mobile Content：設定僅顯示於手機版用戶的內容
- Multi-Ads：將廣告內容測試並且強化
- Power Pack：透過網站緩存調整、圖片壓縮、以及CDN支援改善頁面速度
- Related Posts：在文章下方顯示相關文章列表
- Web-App Mode：可讓Android用戶及Iphone用戶將你的網站加入到手機主畫面
如果這篇文章有幫助到你，或者是你有任何相關問題，都歡迎你在下方的留言區告訴我，每一個留言都是我寫文章的動力來源，謝謝你的閱讀。：）
【WordPress】IG、FB嵌入WP外掛完整設定教學，讓使用者快速成為粉絲
目前這個社群媒體淹沒的時代，大多數人經營自媒體，同時也會使用IG Instagram或者FB Facebook與粉絲互動或者放更多分享，然而若你是在使用Wordpress架站的情況下，要如何將自己的IG或FB粉絲頁置入網站中呢？
這篇文章教你使用兩個免費的Wordpress外掛，將Instagram及Facebook嵌入網站中，或者是放入側邊欄，讓讀者能夠更快地看到你的粉絲頁或IG，並且點下追蹤按鈕，增加你的粉絲人數。
1.安裝外掛 Smash Balloon Social Photo Feed
首先，進入Wordpress的控制台後，點選左邊工具列的外掛→安裝外掛，並且搜尋Smash Balloon Social Photo Feed，點擊立即安裝，並在安裝完成後啟用此外掛。
2.連接Instagram帳號
接著，再到左側工具列，點擊Instagram feed，進入外掛的設定區。
一進入設定區就會看見外掛請你連接Instagram帳號，看你的Instagram帳號是屬於Personal（個人帳號）還是Business（商業帳號）直接選擇後，系統會導向至Instagram的登入畫面，輸入帳號密碼，就會成功連接你的IG帳號。
3.顯示樣式調整
要調整之後的顯示方式，請點選上方的2.自訂資訊提供，上圖是我個人的建議設定，之後Instagram就會呈現出九宮格，像平常瀏覽的樣式（如下圖）。不過你也可以依照個人的需求喜好作調整跟嘗試，不一定要像我的設定一樣。
「停用行動版版面配置」如果沒有勾選的話，讀者在使用手機瀏覽網站時，就會看到照片呈現直排，而不是九宮格狀態，會造成瀏覽網站的困難。
4.展示短代碼
最後到「3.展示資訊提供」就會看到外掛提供給你的短代碼 [instagram-feed] ，將這個代碼複製貼到側邊欄、底邊欄或者是文章、頁面中，之後該區域就會顯示出你的Instagram。
補充說明
這裡的短代碼可以依照你個人需求不同而修改，例如你希望顯示貼文數量有20篇，那麼短代碼後方就加上num=10，變成[instagram-feed num=10]，希望在貼文中間間隔加大，那麼就使用imagepadding=10（數字即寬度，可自行調整），變成[instagram-feed imagepadding=10]。
其他相關設定都可以參考下方表格，幫你的短代碼作些微調整，而表格白色底的是免費版即可使用，如果想要使用紅色底的顯示內容（例如顯示貼文、按讚數、留言等），就需要加價購買進階版。
往下看如何顯示於網站側邊欄示範
5.影片教學
如果對於操作過程有疑惑，也可以觀看Smash Balloon Social Photo Feed官方提供的操作教學影片，缺點是目前只有提供英文的版本。
1.安裝外掛 Smash Balloon Social Post Feed
接著來到「Smash Balloon Social Post Feed」，則是專門用來嵌入Facebook的外掛，這個外掛不僅可以顯示Facebook的粉絲專頁，如果你需要置入的是Facebook的社團也沒問題。
那麼安裝過程就跟剛才的Instagram外掛Smash Balloon Social Photo Feed差不多，一樣到左側功能列→外掛→安裝外掛，搜尋Smash Balloon Social Post Feed，點擊安裝外掛→啟用即可。
2.連接Facebook帳號
接著左側功能列會顯示Facebook Feed，點擊進入設定頁面後，第一件事情也是先連結你的Facebook帳號，過程按照畫面提示照做即可，不難但它不像Instagram一樣有中文版本。
如果你要連結的是Facebook粉絲專頁，就在中間選單選擇Facebook Page，如果你要連結的是Facebook社團，那就選擇Facebook Group，然後點選Continue繼續下一步。
接著系統會像你確認是否使用這個Facebook的帳號登入，確認的話就點擊藍色按鈕「Continue as (你的帳號名稱)」，如果要使用其他帳戶來設置的話，就點選Log in to another account使用其他帳號。
找到你要連結的Facebook粉絲專頁或群組，在右側的欄位勾選即可，連結可以一次連結多個，但是網站上能夠顯示的只有一個，所以這邊點擊一個就好囉。
這一步問你是否同意使用Smash Balloon外掛管理你的粉絲專頁，選擇Done完成即可。
這裡會顯示出你有連結的粉絲專頁，點選你要顯示的專頁（底色變成淡綠色），再按Connect this page，終於完成Facebook的連結囉。
記得完成後再按一次Save Settings儲存設定，以確認剛剛做完的步驟都確實有存在Wordpress網站系統中。
3.顯示樣式調整
在上方的功能選單，選擇「自訂」後，就可以看到很多顯示的設定，我建議可以先看看預設的樣子你喜不喜歡，不喜歡的話再去嘗試做調整。而預設的樣貌則會顯示如下圖。
4.展示短代碼
這個外掛一樣是使用短代碼來呈現，把 [custom-facebook-feed]，複製貼到你要顯示的地方（可以是頁面、文章、側邊欄、底邊欄），回到網站點選鍵盤F5重新整理，就會看到你的Facebook外掛囉。
Facebook Feed的部分一樣有分免費版跟付費版，有需要再加購就可以囉。
往下看如何顯示於網站側邊欄示範
5.教學影片
雖然官方也有提供Smash Balloon Social Post Feed的教學操作影片，但是只有比較舊的版本，沒有最新版本的影片，大家還是可以參考著觀看。
短代碼使用示範-展示於側邊欄
如果你不了解如何使用短代碼，這邊以側邊欄作為示範。
- 點開左側功能列的外觀→小工具，你會看到最右側有Sidebar側邊欄、Footer底邊欄（依每個人選擇的佈景主題而有所些微不同）
- 將「可用的小工具」下方的「自訂HTML」滑鼠按著拖拉至側邊欄。
- 接著在內容貼上剛才提到的短代碼。
- 點擊儲存。
- 回到網站頁面按鍵盤的F5重新整理確認樣式。
- 完成外掛嵌入。
如果你對於此篇教學有任何疑問，歡迎在底下留言發問問題喔！
