Visual Portfolio, Posts & Image Gallery for WordPress

FACEBOOK分享連結縮圖失敗?教你如何使用分享偵錯工具

當你寫完一篇新的文章,迫不急待要分享到Facebook上,跟有相同喜好與興趣的人們一起共享你的作品時,卻發現分享的連結無法顯示出你設定好的精選圖片,或者是文字內容跟你所想像的並不一樣時,該怎麼辦呢?這篇文章要教你如何使用Facebook的偵錯工具,以及控制台中的社交網路設定來調整你所要分享的內容,讓文章在Facebook分享成功,可以快速地抓到受眾的注意。


步驟一、確認文章內容設定

首先,請你先到該篇文章的編輯器中,確認你的精選圖片以及文章下方的SEO設定,是否都已經設定完成,將有需要更改及調整的地方,請先處理完後,再進行第二步驟。

如果你找不到可以設定社交網路內容的區塊,請去你安裝SEO外掛的地方,將社交網路的相關設定功能都開啟,像我使用的是All in One SEO,在控制台中,你會看到左側功能列All in One SEO內有個功能管理頁面,點進去後,將社交網路中繼資料點擊Activate,重新回到文章編輯器中,就會看到社交網路設定欄囉。


步驟二、FACEBOOK分享偵錯工具

將文章設定更新完成後,開啟Facebook分享連結偵錯工具,請照著以下步驟處理:

  1. 將你的文章連結貼到上方的連結列
  2. 按右邊的藍色偵錯按紐,下方會出現該頁面目前在Facebook上的分享狀態
  3. 點擊「再次抓取」,Facebook系統會重新讀取該網址的設定內容
  4. 如果沒有成功抓取,請重複步驟一,並點選再次抓取直到內容正確

有時候偵錯工具可能會一直抓取失敗,可以過段時間再重新進行這兩個步驟,通常可以解決大多數的Facebook分享問題。


【WordPress】6個重點整理,用Contact Form 7製作完美的聯絡我們頁面

一個好的聯絡我們頁面,可以吸引到許多潛在的客戶,它可以是除了網站以外,第二個影響讀者觀感的重要頁面之一,極有可能透過它來為你的網站帶來額外的商機,我知道這些道理不用我多說,你一定都懂,然而,你已經設計好一個完美的聯絡我們頁面了嗎?

如果你能夠透過精心設計的聯絡我們頁面,來獲取客戶的資訊,與潛在客戶進行連結與簡單的對話,將會省去你跟客戶之間許多用來溝通的時間,而且製作聯絡頁面的時間,甚至可以花得比一般頁面設計都還要來得更簡單快速!

以下文章將向你介紹五個製作聯絡我們頁面的重點,以及如何使用外掛Contact Form 7的設置教學,你準備好了嗎?繼續往下看吧!


一、六個製作聯絡我們頁面的重點整理

contact us page

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,找到外掛後,點選立即安裝→啟用。

install contact form 7

2.新增聯絡表單

安裝好外掛後,左側功能列會出現一個「聯絡表單」的選項,選擇「新增聯絡表單

add new contact form

3.加入需要的內容

這裡開始會稍微複雜一點點,請跟著我的步驟來製作表單:

  1. 先將表單內容全部刪除
  2. 打上你想要列出的欄位名稱,例如:姓名
  3. 接著點選上方你想要使用的選項,在姓名下面我們要加入的是文字欄位,所以點選「文字」
  4. 這時你會到下面一張圖片的畫面
  5. 欄位名稱請填寫英文,例如:your-name
  6. 欄位類型可依個人需求勾選,例如:必填
  7. Contact form 7就會自動幫你插入郵件標籤的程式碼
  8. 在完成整個表單的內容後,記得加入「傳送按鈕」,就完成囉!

如果你非常喜歡新增表單後,系統提供給你的預設內容,你也可以直接跳到第六個步驟,來使用短代碼顯示你的聯絡表單。

edit contact form 7
add item

4.設定寄給自己的通知信

接著我們到郵件欄位,這裡要設定的是訪客在填寫完表單後,系統將會自動寄給我們的信件

上方郵件標籤中你會發現有些是粗體字,代表這些資訊還沒放到信件中,你可以在下方的郵件內文,複製貼上這些郵件標籤,之後信件內才會出現訪客所填寫對應的內容

像以下這張圖,因為我一開始把原本預設的內容都刪掉,全部自己製作,所以內容部分幾乎仍是舊的郵件標籤,像是郵件內文中,要把上方的[message]複製貼上取代掉[your-message],才會收到完整訪客的訊息唷。

message from clients

5.設定寄給寄件人的通知信

滑到畫面下方,你會看到有個郵件(2)的選項,如果你希望訪客收到一封「確認信件」,那就把這個選項勾選起來,接著一樣照上一個步驟來編輯郵件內容,未來訪客傳送郵件給你後,對方會在信箱內收到這封郵件的確認信,可以用來告知他「系統已經將訊息寄出,我們會在2天內回覆訊息」等等。

confirm message

6.使用短代碼置入聯絡表單

接著,儲存完畢後,請將上方聯絡表單標題下方的短代碼,直接複製貼上到你的聯絡我們頁面中,就大功告成啦。

short-code

7.測試聯絡表單

最後,記得別忘了到你的聯絡頁面測試一下剛剛製作的聯絡表單,是否有乖乖按照你的設定寄送郵件內容給你,如果有任何遺漏的內容,趕快再回設定內確認你是否都把郵件標籤貼上了。

contact form

三、客製化你的聯絡表單樣式

這一個步驟你可以依個人的喜好來加入控制樣式的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語法加在這裡,右側則點到你的聯絡頁面,就可以馬上看到語法加入後,表單所呈現出來的樣式。

CSS

【WordPress】免費外掛Stackable教學,製作專業的靜態首頁

你是不是也跟我一樣,使用Wordpress製作網站,從充實內容開始,一步步漸漸累積起網站的權重、排名、點閱率,但是當別人第一眼看到自己的網站,多數人卻只會說「喔!你寫個人部落格呀?」,明明你寫了好多專業的攻略文、知識分享文、比較文!別人卻只當作你在寫抒發心情的小品文?

這篇文章要教你如何一步步設計出網站的靜態首頁,即使你不是一個專業的網站程式設計師,不會寫任何專業程式語法,也可以透過外掛Stackable編輯出理想的網站首頁,讓訪客一進入網站,就可以馬上理解你所要表達的主題重點


1.什麼是靜態首頁

一般的Wordpress網站首頁,預設設定會是你的「最新文章列表」,訪客可以一眼看到你的最新文章,但也許沒辦法馬上理解你的網站主題。而靜態首頁,讓你可以將網站的主題整齊地放在首頁,讓用戶馬上抓到你要表達的重點,以下以旅遊網站來作舉例:

最新文章列表靜態首頁
訪客接收文章1.泰國CP值最高的住宿
文章2.泰國必玩景點報你知
文章3.泰國簽證怎麼辦理
泰國旅遊
區塊1.住宿 - 如何訂住宿、注意事項
區塊2.簽證 - 如何辦簽證、簽證費用
區塊3.機票 - 廉航機票購買教學
區塊4.景點 - 曼谷、清邁、清萊
訪客認知去過泰國旅遊的人分享的文章專門寫泰國旅遊的專業網站

2.累積潛在客戶

discussing

透過以上表格,我想你們應該可以知道靜態首頁的重要性,試著想像一下,當訪客某天被網站的其中一篇文章吸引而來,他看完了文章,想要知道更多內容,有很高的機率會先點到網站的首頁,去看看這個網站還有提供什麼資訊,如果該網站的首頁很完整,有許多訪客想要了解的內容,訪客的下一個動作可能會是「將網站加入我的最愛」。這個時候,你就成功累積了一位會回流的潛在客戶。


3.如何設計靜態首頁

3-1.製作靜態首頁的時間點

calendar

依照你的網站內容豐富度,如果今天你是一位剛開始寫部落格的新手部落客,我會建議你先繼續努力的產出文章,並且依照我後面兩個步驟的說明,先規劃你應該優先要寫哪一些文章?在有目標的持續寫作後,過一段時間你的文章數量越來越完整了,同時你會發現靜態首頁的要素漸漸都達到了,這時再來設計你的靜態首頁。


3-2.構想你的目標客戶

target clients

設計靜態首頁時,你必須先構想你的目標客戶形象,以剛才的泰國網站來舉例,你的目標客戶族群可能是「想要去泰國自助旅遊,但不知道該如何規劃的旅客」,現在,請你將自己代入這個角色中:

「今天,我要去泰國自助旅遊,我最想知道的資訊有…」

後面的…就是你要呈現在靜態首頁的內容,請你拿出紙筆,列出一張清單,接著我們進行下一個步驟。


3-3.靜態首頁的六大要素

browse website

知道靜態首頁內容要放什麼後,以下我替你整理出一個靜態首頁至少應該要擁有最基本的六大要素,分別是網站名稱、主視覺/Logo、網站副標題、網站內容分類、CTA按鈕、如何聯絡作者

請將以上項目確認好要放置的內容後,再來製作你的靜態首頁,當然你也可以依網站的特性不同來作更改,例如電商網站可能就需要列出熱賣商品區塊、或者是財商網站可以列出你最愛用的券商教學文等等。


一、網站名稱

靜態首頁的最上方,請放置你的網站名稱,加深訪客對網站的印象,讓他們能夠在未來透過搜尋網站名稱,就馬上回想起,並且透過Google搜尋找到你的網站。

所以網站名稱盡量簡潔,或者是好記、好念、順口、有意義等,甚至有些人到後期不滿意自己剛開始為網站取的名稱,都有可能會再更改,但如果能越早確定下來,會對Google搜尋引擎更有幫助。


二、主視覺/Logo

如果你能夠製作一個讓人印象深刻的網站主視覺圖像或者Logo,在一進入網站時讀者就能獲得非常持久的記憶點,它可以是一張照片、一個意象,能夠配合網站的主題製作,我相信都能為你的網站訪客帶來很不錯的圖像記憶。


三、網站副標題

副標題應該要是一句話,簡單明瞭的說明你的網站主題,讓讀者很快速的知道這個網站的重點,其實,我認為以上三點最好在每個頁面都可以看到,不論讀者用的是手機還是電腦,都可以在文章內看到,效果會是最好的。

綜合以上三點,我以本站來作舉例,給大家作為參考,不一定要和我一樣,最重要的是找到個人特色,呈現出你跟別人不一樣的地方


四、網站內容分類

這部分你要將你的文章內容作整理,有點類似分類的概念,把他們分成好幾個大方向,用簡單扼要的方式呈現出你想要分享的訊息,這裡我以我的另一個網站-紐西蘭的小事記錄來作舉例:

happenedinnz.com

因為是紐西蘭旅行為主的網站,所以我設想讀者最想要知道的內容分成幾個大項目,簽證、上網通話、交通、活動、機票、住宿等,讓想要來旅行的旅客,可以馬上知道他們在事前準備需要做好哪些作業跟動作。


五、CTA按鈕

CTA按鈕(Call to Action),是你用來引導讀者應該作的下一步動作,內容一樣是越直接明瞭越好,像是「開始來規畫你的行程吧!」或者是「讓我告訴你如何賺錢」等等,寫下一個連你自己看了都會想要點下去的文字內容,吸引讀者踏上閱讀網站的旅程。


六、如何聯絡作者

你如果能在網站上放上一點個人的自我介紹,以及該如何聯絡到你的方式,例如聯絡表單、電子信箱等,可以在讀者心中建立起對你的好感與信任感,是與讀者之間情感連結的方式之一,當然這個方法也能運用在文章底端,製作方法可以參考下列文章。

延伸閱讀:【WordPress】3種方法教你在文末加入作者資訊


Stackable

外掛介紹

Stackable

經過以上的前置作業,我想你對於自己的靜態首頁要放置什麼內容已經有一定的概念與想像了,這時候要來付諸行動,製作你的靜態頁面囉!

製作靜態頁面的方法很多,外掛Stackable是我個人在經過許多外掛跟主題的嘗試後,非常喜歡的一款古騰堡(Gutenberg)區塊製作外掛,它提供多樣化的區塊版面讓你使用,且版面是接近前端編輯器,你可以在編輯的同時直接看見網站之後會顯示的樣貌。

Stackable有分為付費版跟免費版,它在每一種區塊都提供了可免費使用的樣式直接套用,非常佛心,如果付費的話可以有更多種類型的樣式作使用,這部分就由大家自行斟酌。


Stackable vs DIVI vs Elementor

我在另一篇文章曾介紹過DIVI編輯器,DIVI編輯器的彈性更大,屬於更全面型的編輯器,適合用來設計整個網站。而大家比較熟悉的Elementor,我自己覺得優點只有中文這一點而已,大多數的區塊都需要付費才能使用。

延伸閱讀:【WordPress】人人都可以是網站設計師,DIVI最強大的頁面編輯器

這裡我提供給你一個比較表格,這三個編輯器都各有他們的優缺點,現階段我最愛用的是DIVI跟Stackable,如果你試用了他們過後有任何心得,都歡迎分享給我知道。

StackableDIVIElementor
適合網站部落格、個人品牌設計部落格、商業網站、個人品牌設計、電商網站、一頁式網站部落格、商業網站、個人品牌設計、電商網站、一頁式網站
對象部落客部落客、網站設計師部落客、網站設計師
設計頁面適合設計單一頁面適合設計整個網站適合設計單一頁面
語言英文英文中文、英文
預覽方式僅電腦版電腦版、平板版、手機版電腦版、平板版、手機版
免費版
付費版美金$35/年美金$89/年美金$49/年

如何安裝與使用

Stackable

首先,到網站控制台後,選擇左側的外掛→安裝外掛,搜尋Stackable後,點擊右上角的立即安裝→啟用,安裝部分就完成了,接著看你要在文章內使用Stackable的區塊,或者是在頁面→新增頁面,開始製作你的靜態首頁。

點選文章或頁面編輯器的段落左側+號,就可以找到有個區域的標題是Stackable,在這裡你可以找到所有Stackable所提供的區塊。

Block

區塊說明

Blocks

Stackable提供的區塊並不複雜,如果不清楚它的意思,那就每一個都點開來試試看,你就會知道它的樣貌,以下我提供給你在製造區塊後,右手邊你會看到的功能列英文代表意義。


免費樣式

首先,你可以在右手邊Layout裡面找到Free免費選項,裡面會提供給你不用付費也可以使用的區塊樣式。

Free Layout

Style 樣式設定

在Style樣式中,你可以設定該區塊的內容,每個區塊這裡可以設定的東西都有點不太一樣,但大致上會有以下圖片這幾項,前面有藍色按鈕的項目,都是可以自由開啟或關閉的,一樣依照你個人喜好去嘗試著使用。

剛開始可能很陌生,但漸漸的你就會發現它們並不難也不複雜,使用起來很直覺。另外,要注意的是有些區塊的呈現並不適合在手機版上顯示,可以在此個別設定調整在手機上的顯示畫面

Style setting

Advanced 進階設定

在每一次確認網站時,最好要同時確認電腦版與手機版,以免讀者在使用手機閱讀時有障礙,或者有些不必要的內容,在這裡可以直接選擇不顯示於手機用戶。

Advanced Setting

製作網站範例

前面有提到過的紐西蘭的小事記錄,是我的另外一個網站,它的靜態首頁就是利用Stackable製作的,我自己個人目前很滿意它的效果,有一種紐西蘭的小事紀錄網站,終於完整的感覺。


結論

如果今天你想要一個不會太複雜的靜態首頁,需要跟訪客及使用者表達你的網站主題性,Stackable絕對是很棒的選擇之一,如果你要製作的是一整個網站的設計,那我會推薦你使用DIVI

想透過聯盟行銷賺錢,5個必備得力助手

隨著網路資訊化的發展,人們漸漸對實體的商店依賴性大幅降低,而從中崛起的行業之一,正是聯盟行銷Affiliate Marketing。而聯盟行銷Affiliate Marketing的好處有什麼呢?

  • 初期投資金額少
  • 不必承擔店面、貨物成本
  • 不一定要擁有一個團隊
  • 可以創造被動收入
  • 市場全球化,不受地點影響
  • 可自由安排工作時間
  • 可以推廣任何產品

一個成功的聯盟行銷創作者,通常能夠不受任何時間及地點的拘束,擁有充分的選擇權來決定自己的生活方式,因為他們的收入不必他們現身說法,也可以24小時不間斷地獲得傭金報酬,正在看這篇文章的你,想必也是渴望能成為聯盟行銷創作者的一員。

然而,投入聯盟行銷創作的團隊與公司日益增多,聯盟行銷創作者如何在這些專業人士當中脫穎而出?這篇文章我將介紹你「創作聯盟行銷必備的5個工具」,讓你有效地推廣聯盟行銷,請讓我們繼續往下看。


1.搜尋關鍵字

聯盟行銷的範圍無遠弗屆,作為一個聯盟行銷創作者,在初期可以利用一些關鍵字搜尋的線上工具來確認自己要推廣的主題搜尋量,以及多數對手的行銷策略,而這寫關鍵字搜尋工具則透過大數據的方式建立出他們自有的一套系統,提供使用者參考依據。

在選擇文章的主題關鍵字時,有以下幾點觀念要告訴你,遵循這兩個概念去挑選文章的關鍵字,可以讓你省去較多撰寫沒必要的內容文章時間:

  • 搜尋量 - 高:代表搜尋這個關鍵字的數量非常多,可以列入你寫文章的主題關鍵字
  • SEO難度 - 低:代表競爭者的數量較少,可以挑戰寫文章。

那麼這裡有兩個關鍵字系統的工具要介紹給你,免費跟付費版本都有,可以依個人剛開始初期的資金來斟酌使用:

免費工具 - Ubersuggest

ubersuggest

ubersuggest可以說是非常佛心的系統,不必付費就可以看到一些不錯的關鍵字分析內容,例如搜尋量、SEO難度、常見相關關鍵字、排名前面的幾個競爭對手網站等等,在創作聯盟行銷的初期可以成為你不錯的得力助手,而且免費這一點讓人用起來無壓力。缺點是系統較不穩,經常需要重新整理或者等待一段時間後,才能正常使用。


付費工具 - Ahrefs

Ahrefs

而Ahrefs則是全球知名的關鍵字分析系統網站,有七天的免費試用期,裡面的資料相當強大,除了可以了解關鍵字的基本搜尋狀態以外,以下這幾點是我個人覺得最厲害的:

  • 連結報告:追蹤你的連結狀況以及對手所使用的的連結狀況
  • 關鍵字研究報告:幫助你找到在Google中理想的關鍵字
  • Google精選摘錄:了解你跟你的競爭對手在Google中的功能狀態

2.聯盟計畫網站

找到你的網站可運用的聯盟計畫網站,會是初期重要的功課之一,剛開始可以透過這些聯盟行銷聯盟網站的佣金連結賺取收入,後期若你的網站流量成功建立起來,還能嘗試直接跟廣告商交涉,拿到更好的聯盟獎金分潤。以下介紹你幾個中英文的聯盟網站:

  • Cj Affiliate
  • ShareASale
  • 聯盟網
  • 通路王

3.數據分析

無論你的利基市場設置於哪一個方向,每個網站都應該要利用受眾分析工具來了解網站有多少流量,並且分析訪客在網站上所作的行為,理解你的顧客群對於什麼樣的內容更有興趣。

Google Analytics

Google Analytics

要分析網站的流量信息,可以透過Google Analytics的串聯,蒐集各種使用者的行為動作,使用者停留時間、離開率、點擊率等等,以此評估你在SEO上所下的努力是否有達到預期目標,或者也有可能需要調整網站的整個營運方向。


MonsterInsights

MonsterInsights

MonsterInsights則屬於更進階版的Google Analytics,尤其是如果你的網站屬於電子商務型的網站、或者有在營運廣告,MonsterInsights不僅可以追蹤你的營運績效,與電子商務平台相容,同時還能協助你優化網站的SEO及聯盟行銷


4.SEO搜尋引擎優化

SEO搜尋引擎優化除了你需要下足功夫在內容行銷外,一個能夠協助你處理優化SEO的外掛也非常重要,它們會將你的網站地圖式地呈現給搜尋引擎,讓使用者更容易在Google上找到你的網站資料。這類型比較著名的外掛有以下,可以依個人偏好來選擇使用:

  • Yaost
  • All in one SEO

5.聯盟連結外掛

pretty links

即便你初期選擇以一個較為簡單的部落格為出發點,我相信時間累積久了,你所使用的聯盟行銷連結絕對會多到讓你想哭,光靠腦子無法完全記住所有的連結來源,又或者是未來你有機會獲得更好的佣金來源,卻要把文章一個個打開來確認連結內容,如果你有使用聯盟連結外掛的習慣,未來的你絕對會感謝現在勤勞地使用聯盟連結外掛的自己。

什麼是聯盟連結外掛呢?這類型的外掛可以協助你將繁複的聯盟行銷連結縮短為專屬於你個人網站的短網址,範例如下:

透過連結外掛我可以自行設定我要顯示出來的網址內容,才不會讓讀者覺得好像要點進一個奇怪的網址,提高網站的信任度。


以上就是我個人推薦你,要作聯盟行銷必備的五大工具,每一個你都擁有了嗎?

【WordPress】利用3種方法教你在文章中加入作者資訊

當讀者在閱讀文章,並且非常滿意該文章所帶來的效果與幫助時,如果能在文章末端看見作者簡單的自我介紹,將能大幅提升讀者對於作者的信任感

你可能會覺得「我在側邊欄有放入我的個人資料呀」或者是「我有放一個聯絡頁面在menu上」,但,許多讀者可能在閱讀完文章後,就直接把頁面關閉,至少我是這樣子的,你呢?

所以本篇文章將教你如何在文章內加入作者資訊框,讓讀者能夠更快掌握到網站創作者的資訊,在這裡我們可以採取的方式有三種,如以下:

  1. 選擇有作者資訊欄的主題
  2. 使用外掛:Starbox: Authorbox For Humans、Simple Author Box
  3. 使用「管理可重複使用區塊」

1.選用有作者資訊欄的主題

直接選用包含作者資訊欄的Wordpress主題,我想是最簡單的方法之一,如果你夠幸運,可以找到並且選擇一個你喜歡的佈景主題,直接套用到你的Wordpress網站,主題就會幫你在文末自動加入作者的資訊內容,那麼這邊要先教你的是,如何編輯你的Wordpress作者資訊欄資料呢?

設定作者資訊欄內容

  1. 首先,前往Wordpress控制台左側功能列的使用者
  2. 在要調整的人名下方點選編輯
  3. 編輯自我介紹欄內的圖像及自傳資訊

個人資料圖片的部分需要到Gravatar創建一個新的會員帳號,在裡面上傳頭像照片,就會自動連結到你的Wordpress網站囉。


2.使用外掛

2-1.Starbox: Authorbox For Humans

Starbox主要是以你在使用者那裡設定的作者資訊為主,直接讀取你設定好的作者資訊並顯示在文章末端,提供多種顯示的介面選項,如果你的網站是由多人一同打造創作內容,Starbox還可以顯示該作者的Related Article其他文章,推薦給讀者繼續觀看,另外也能選擇要在哪裡顯示作者資訊框,例如頁面、文章末端、文章開頭等等。

Starbox

2-2.Simple Author Box

而Simple Author Box則是可以直接在外掛中設定你的作者個人頭像、資訊,一樣也是提供多種樣式可以選擇,基本上Simple Author Box跟Starbox是大同小異,我個人覺得可以兩種都下載來試試看。

Simple Author Box

3.管理可重複使用區塊

第三種方法則是使用「管理可重複使用區塊」,這個方法跟前面幾種自動加入的方法不同,算是手動加入,必須在每一次撰寫文章時特別加入,好處是可以完全照你想要的樣式製作,而且內容不限於作者資訊欄,不論你要任何加入文字、圖片、內容都可以。製作的方法如下:

  1. 進入撰寫新文章的右上角三個點選單
  2. 點開後會出現一個名為「管理可重複使用區塊」的選項
  3. 選擇新增區塊
  4. 編輯你要的內容文字圖片等
  5. 點選發佈
  6. 回到撰寫文章頁面
  7. 在新的段落左側點選+符號
  8. 滑到最下面就會有你剛才發布的重複使用區塊
  9. 點擊加入文章即完成!

【WordPress】發佈文章網站卻沒更新?使用Cloudways主機常見問題

經過上一次搬家到Cloudways主機後,這兩天在更新文章時,發現似乎網站不會即時更新,稍微跟Cloudways主機客服聯絡後,才知道應該是外取外掛的影響,解決之餘順便分享給一樣在Cloudways設置主機的大家,以及如果有使用快取外掛的話,將網站恢復即時更新的解決方法。

延伸閱讀:【主機】載入速度快10倍!從Godaddy搬家至Cloudways完整教學


解決辦法

1.DNS尚未轉換完成

原因一,有可能是網站的DNS尚未完成指向,通常搬家時需要重新設定DNS的A紀錄,但A紀錄更新的速度不一定,快的話一小時之類就會更新完成,慢的話可能會需要48小時,也就是2天時間。

那如何查詢DNS的狀況呢?可以到DNS Checker輸入你的網址,看看IP是否都成功指向新的主機IP位置,如果發現還沒完成,也有可能是這個原因唷。


2.清除Varnish

如果IP指向都正確了,仍然有一樣問題的話,可以到Cloudways的後台設定清除快取,步驟如下:

  1. 開啟Cloudways Server伺服器
  2. 點左側Manage Services
  3. 接著按一下中下方Vanish旁的PURGE 清除快取
  4. 完成
Purge Varnish

3.外掛Breeze

如果前面兩個方法都沒有用,在你設置主機或者搬家到Cloudways的時候,通常會有外掛Breeze自動被安裝到你的Wordpress後台中,Breeze是一個Cloudways用來幫助你加快網站速度的外掛。請到Breeze設定中,點選主選單的Varnish內的清除選項,將快取清除。

通常做到這一步,你的網站應該已經被更新了,要是還沒有,我只能說是你跟Breeze的八字不合,狠下心把他停用刪除吧!

Breeze

【主機】載入速度快10倍!從Godaddy搬家至Cloudways完整教學

這篇文章將告訴你Cloudways這個主機平台的詳細資料,分析其主機優缺點、價格、如何從Godaddy搬家至Cloudways的各個步驟教學、搬家前後網站評分差異以及我個人架設網站的過程心得分享。


1.搬家原因

首先,我剛開始架設網站就是使用Godaddy,同時間購買了主機跟網域一起使用,在8個半月左右的時間後,從Godaddy搬家到Cloudways,會採取這項措施,最大的原因是主機不穩

Godaddy的主機過於不穩,經常有無法登入網站的狀況,網址點開出現問題永遠都是因為主機端,雖然通常多按個幾次重新整理後,網站就又可以登入了,每一次才剛詢問客服,隔沒10秒網站又可以打開了,長期累積下來的不滿逐漸增加,直到最近一個月,網站的狀況非常差,連朋友都來問我說為什麼我的網站打不開?

最後我選擇直接放棄最後4個月的Godaddy主機使用期限,投奔Cloudwayss的懷抱中,而網域部分則先留在Godaddy。

優惠活動:Cloudways主機前三個月打九折

使用折扣碼NJD4U註冊Cloudways會員,主機前三個月可享九折優惠價!

2.為什麼選擇Cloudways

Cloudways一直以來是在主機界中是名聲響亮的VPS主機商,一般狀況中,我們通常選用的都是共享型的主機,因為便宜,然而共享型主機最大的缺點是容易不穩定,或者是被其他共享主機的網站影響等等。VPS主機通常沒有共享型主機的不穩定困擾,但缺點就是對於程式語法不擅長的人來說,前期要設定的部分繁瑣又困難。

Cloudways主機卻同時擁有便宜、設定簡單、VPS主機三大項優點,於是我毫不猶豫地選擇投奔Cloudways。而且Cloudways還附贈了SSL,省去一筆小開銷。

主機VPS獨立主機
(例:Cloudways)
共享型主機
(例:Godaddy)
設定簡單簡單
穩定性超穩定較不穩
前期價格普通非常便宜

2.從Godaddy搬至Cloudways前後比較

我特別在搬家前使用GTmetrixPingdom來測試自己網站的速度與評分,詳情如下圖。

GTmetrix的測試結果很明顯的完整載入時間大大縮短了6秒多,整體網站評分居然也從77飆至91,而Pingdom的載入速度則是快了10倍以上,我想這個結果無庸置疑的可以判定我搬家的選擇是對的,錢也花得很值得XD,尤其是在經歷好一段時間網站不穩定狀態,導致整體流量、訪客人數都下滑,我認真建議大家,當你的網站有一定規模,或者是認真想架設好網站的人可以考慮使用Cloudways的主機。

GT metrix測速結果:

GT metrix 測速結果

Pingdom測速結果:

Pingdom測速結果

3.價格差異

這裡我提供的比較為幾家比較知名的主機網域商,分別為Cloudways、Godaddy、Siteground、Bluehost,我個人建議可以初期時主機選擇分享型主機Hostgator、Siteground或Bluehost,到網站成長茁壯後,主機可以再搬家至VPS主機Cloudways

方案優惠 初期價格續約價格
CloudwaysDigitalOcean免費SSL美金$10/月美金$10/月
Godaddy基礎版送一組網域美金$7.34/月美金$10.49/月
HostgatorStarter送一組網域
免費SSL
美金$5.95/月 美金$9.95/月
SitegroundStartUp免費SSL美金$3.95/月美金$11.95/月
BluehostBasic送一組網域
免費SSL
美金$2.95/月美金$7.99/月

4.Cloudways優缺點

優點

  • 每月付款,不必綁年
  • CPU無限制
  • 全年24小時客服
  • VPS主機
  • 代管服務
  • 一鍵搬家
  • 提供許多額外加購服務

缺點

  • 沒有低於美金$10/月的方案
  • 介面英文

5.搬家步驟教學

5-1.Cloudways註冊及選擇Server

首先,先前往Cloudways註冊會員帳號,Cloudways不會要求你一開始就馬上付款,有三天充足的時間讓你先完成主機設定或搬家的作業,


完成註冊後,記得到你的註冊信箱收取確認信,並點擊Activate Account啟用你的帳戶。

Activate Account

回到Cloudways,這裡讓你選擇你要使用的方案,我個人建議使用老牌子Linode,Server Size從最少量的1GB開始,Location則看你網站主要想以哪個地區為主,我的網站是中文的,那就選擇Tokyo或者Singapore

  1. 選Linode
  2. Server Size選1GB
  3. Location選Tokyo
  4. 點擊右下角Launch Now
主機選擇

5-2.Upgrade my account

完成5-1步驟後,你會看到Cloudways正在架設你的主機,並告訴你大約還有多久時間。這時候你可以先點擊上方的Upgrade my account設定你的付費方式,以免三天後Server就自動被Cloudways關閉了。

Upgrade my account

5-3.基本設定

等待Server架設完成後,我們開始來調整一些資料上的設定,如以下步驟:

Basic設定

  1. 左側Setting & Packages→PHP Timezone→選擇你的所在時區GMT+8 Taipei
  2. HP Timezone→選擇你的所在時區GMT+8 Taipei
  3. Save Changes
Basic設定

Advanced設定

  1. 上方Advanced→My SQL→y SQL→設定時區Timezone及Encoding為UTF-8 Unicode
  2. Save Changes
Advanced設定
Advanced設定-2

Packages設定

  1. 上方Packages→PHP→PHP7.3
  2. Save Changes
Packages設定

5-4.安裝搬家外掛

接著,我們開啟我們網站的Wordpress控制台,到外掛→安裝外掛→搜尋Cloudways wordpress migrator外掛,安裝後點選啟用。

Cloudways wordpress migrator外掛

外掛安裝完成後你會看到下圖右邊的畫面,有幾個Cloudways後台的資料需要填上,個別是:

Cloudways Application

  1. Application Url→Destination Site URL
  2. DB Name→Database Name

Cloudways Server

  1. Public IP→Server Public IP Address
  2. Username→SFTP Username
  3. Password→SFTP Password
填寫外掛資料

開始轉移網站資料

當你看到Wordpress出現這個畫面時,代表系統已經開始幫你自動轉移網站的資料,不要把畫面關掉,電腦請暫時停在這裡,通常搬家速度看你的網站大小而定。

開始轉移網站

完成搬家

出現這個畫面時,代表外掛已經幫你完成搬家,可以點選綠色按鈕Visit Migrated Site查看網站是不是跟你原本的狀態一模模一樣樣。

完成

5-5.設定SSL憑證

Domain Management 網域設定

現在我們回到Cloudway後台,進入我們搬家好的Wordpress Application,點選左側的Domain Management,在Primary Domain的地方填寫你的網域,按Save Changes確認。

Domain Management 網域設定

SSL Management SSL憑證設定

照下圖再次填寫電子信箱及網域,並點擊Install Certificate開始安裝。

SSL Management SSL憑證設定

Enable HTTPS Redirection 啟用HTTSP導向

當Cloudways出現下圖後,代表SSL已經完成安裝,點選Enable HTTPS即可,完成SSL設定。

啟用HTTSP導向

5-6.設定DNS A紀錄指向

再來開啟你購買網域的地方,以下我用Godaddy、Google Domains、Namecheap示範給你看,請直接查看你的網域註冊商那一段即可:

Godaddy

將剛才5-4的Cloudways Server裡面的 Public IP 複製起來,到Godaddy Domain管理員,點選你要使用的網址→DNS,就會看到下圖設定區,將左側紅框的IP都改為你從Cloudways複製過來的IP,並且右邊的TTL改成600,就完成囉。

  1. Value都改成Cloudways的IP
  2. TTL改成600
Godaddy DNS

Google Domains

如果你是用Google Domains購買的網域,一樣到網域管理的地方,點選左側DNS,將以下設定都一個個新增上去即可。

Google Domains DNS

NameCheap

如果你的網域商是Namecheap,請依照以下方法設定DNS A紀錄:

  1. 到Namecheap後台,點選要設定的網域右側Manage管理
  2. 選擇Advanced DNS
  3. 按Add New Record
  4. 如下圖,Type選A Record,Host填www,Value填剛剛複製的IP,TTL設定Automatic自動
  5. 點擊右側勾勾完成設定
NameCheap DNS

5-7.檢查DNS Checker

檢查剛才做的DNS A紀錄是否成功設定,可以在設定後的24-48小時,到DNS Checker查看hecker查看,輸入你的網址查詢,只要IP都變成Cloudways提供給你的IP就OK囉。

前往DNS Checker

通常Godaddy的指向設定速度蠻快的,大約幾十分鐘就完成了,而Google Domains則是比較久一點,花了一天時間仍然還有少數還沒指向完成,供大家參考。


5-8.完成搬家

最後,進入我們的網站Wordpress後台,看到外掛Breeze出現,就代表搬家終於完成啦~(灑花),辛苦你了!做得非常好!

完成搬家

延伸閱讀:WordPress發佈文章網站卻沒更新?解決Cloudways主機常見問題

延伸閱讀:WordPress發佈文章網站卻沒更新?解決Cloudways主機常見問題

【WordPress】人人都可以是網站設計師,DIVI最強大的頁面編輯器

不要懷疑!DIVI編輯器就是個即便你是一位一點程式語法也不懂的門外漢,都可以透過Wordpress.org與DIVI主題編輯器,建造出完全不輸給專業人士,非常有質感的商業網站、個人作品集、甚至是電商平台。

這篇文章將向你介紹我個人最愛用,同時也是我目前工作天天需要接觸的Wordpress頁面編輯器 - DIVI,任何人都可以使用DIVI製作充滿特色的網站,成為網頁設計師。


1.DIVI

DIVI介紹

DIVI主題編輯器是一個視覺化的編輯器,也就是說,你在編輯器上操作任何動作,畫面上所顯示的,就是網站完成後的樣貌,操作方式直覺且簡單,要使用什麼元素就加什麼元素上去,想更改照片就直接點開設定修改,再也沒有像一般主題的問題,需要一個個套用,才能確定你的網站究竟適不適合該主題。

DIVI Elegant

免費模板

如果你是一個使用DIVI的新手,使用一年期限的會員方案就可以從官方提供的模版來製作網站,目前總共有154個模板組合,共計1140個頁面,數量一直都在更新,不需要再額外付費,這些全都是DIVI提供給你作使用的,每一個主題都有各自不同的風格,只要選擇你喜歡的模板,將圖片、文字套用你要架設的網站內容,我當初第一次使用DIVI架設網站時,只花了大約4-6小時,就可以將一個網站架設完成。

Elegant layouts

24小時客服

另外,DIVI提供全年無休的24小時客服,幫你解決各種疑惑,如果在網站架設上有任何問題,除了客服以外,他們每隔幾天就會更新不同的Wordpress教學文,或者是教學影片,是一個非常用心的主題商,我使用DIVI將近一年了,DIVI一直都在進化,可以說是網站的每個角落都可以讓你隨心所欲的編輯。

customer services

2.介面介紹

網站設計

1.頁面

當你要設計網站時,只要點選左上角的設定圖示,或者是點選每個區塊中間下方的加號,就能找到你想要更改的內容,像下圖,就是你要更換圖片時的做法,點開要編輯的設定區塊,然後選擇你要放上去的圖片,就完成了!

design panel

2.選單、頁尾

2019年DIVI的大更新,當你想要調整頁首(目錄)或者頁尾(底邊欄),你想要放什麼、寬度、類型全都隨你決定。而且還可以將每個頁面的內容都個別設定,當你需要某個頁面沒有目錄,或者不需要頁尾,那使用DIVI就可以馬上滿足你這個願望。

theme builder
theme builder-2

3.搜尋結果、404錯誤畫面

DIVI的頁面編輯器,還可以設計讀者使用搜尋工具後看到的搜尋結果畫面以及錯誤畫面,雖然錯誤畫面是希望都不要用到,但總是會有碰到意外的時候(?),如果作為一個網站設計師,網站的每一個角落都很重要。

design search result & 404 pages

4.外觀自訂介面

customize

DIVI同時也提供了在外觀自訂區域的編輯區,主要用來設定網站的大方向,從整個介面到顏色、文字大小、連結等等,都能在自訂區塊作調整。


5.快速移動區塊

DIVI編輯器的眾多用法之一,你如果想要更改每個區塊的位置,可以使用滑鼠按著拖拉,就能快速地調整每個區塊的順序。

move section

6.分區編輯區塊

如果有使用過Elementor的話,應該對這個部分不陌生,以圖片作示範,可以將網頁切成好幾塊區域,並且一列列加入。

row section

7.網站元件

以下列出的是目前DIVI提供的網頁設計元件,你可以隨時自由加入到網站中,如果你會一點點程式語法CSS等,每個元件都可以獨立設定它要跟隨的語法。

insert module

電商網站 Woocommerce

如果你想用DIVI來建立電商網站,販賣你的商品,DIVI有專門為網路購物專門外掛woocommerce打造專屬的元件跟頁面,商品的呈現頁面可以利用DIVI提供的woo Description、woo images、woo price等等,設計出獨一無二的販賣頁面。

woocommerce

3.試用編輯器

live demo

前面講了這麼多,如果你有興趣的話,馬上來試用DIVI的線上編輯器吧!不需要註冊會員、不需要輸入Email給DIVI,整個頁面可以使用的元素,你都可以線上隨便試用,適合想下手又害擔心受傷害的新朋友們。

try divi

4.會員資格

費用

通常DIVI的主題價格,一年是$89美金,需要每年續訂才能繼續享有Divi更新,而無限期永久會員的話是$249美金,買一次就不必再更新。透過下方連結,可以用10%OFF的優惠價購買Divi主題。


30天全額退費

DIVI提供30天的無條件反悔退費,如果你購買了DIVI的會員,試用過後覺得不喜歡、不適合,都可以直接到網站的會員後台選擇退費。

延伸閱讀:【Divi新手必看】網站設計完整步驟教學,看這篇就夠!

【WordPress】Public Post Preview 撰寫業配文必備,草稿公開預覽外掛

通常在開始使用部落格或個人網站經營自媒體的人,網站逐漸有一定成績後,與廣告商合作或者寫廣告文的機會相對也會增加,當合作邀稿談成後,多數廣告商會要求要先審稿,再將文章發佈,但要如何讓廣告商審稿呢?你用的文件檔案是Word?或者PDF?但是這兩個不能完整呈現到時候文章出現在網站上的最後樣貌

預覽的方法有兩種,如以下:

  1. 將對方設定為網站使用者之一
  2. 使用外掛 Public Post Preview

大多數人應該和我一樣,不會輕易將他人設定為後台的使用者,而這篇文章就是要教你如何使用Public Post Preview外掛,讓廣告商不必登入你的後台,也可以看到尚未發佈的草稿文章在未來發佈過後的樣貌,步驟非常簡單,不必學會任何語法操作,那麼我們就繼續往下看文章囉~


Public Post Preview

外掛介紹

Public Post Preview

如果你的部落格布置得非常美麗,我想Word或是PDF都不能呈現出最好的一面給廣告商核對,但只要你使用的是Wordpress建立網站,就可以使用Public Post Preview外掛,將尚未發佈的文章草稿以預覽的方式給廣告商確認內容,不僅省事,少一道中間剪下貼上的手續,相信廣告商也會非常滿意,感受到你身為部落客的專業。


安裝方式

install

首先,來到控制台畫面左側的功能列表,點擊外掛→安裝外掛,搜尋Public Post Preview,接著按安裝外掛→啟用,完成了!簡單又方便,完全不需要做任何設定。


使用教學

preview setting

那麼要如何知道該篇草稿的預覽位置在哪裡呢?請進入編輯文章的畫面後,右邊設定區域的內容中,會多一個「啟用公開預覽」的選項,將此連結複製貼給需要要預覽的人即可,只要點擊這個網址,對方就能看到草稿文章,不必再使用Word或PDF囉!

這裡有一點要提醒你注意的是,Public Post Preview 外掛預設設定文章預覽天數為2天,不過通常廣告商需要確認稿件的時間會比2天還要更久,如果你有需要延長預覽時間,請繼續往下看下一段教學,告訴你如何更改外掛Public Post Preview的預覽天數。


更改預覽天數

preview for how many days

點選左側的外觀→佈景主題編輯器,第一次進入佈景主題編輯器的人,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 themes

WPtouch 專門以製作Wordpress的手機版主題聞名,它在Wordpress外掛介面上下載次數已超過10,000次, WPtouch 會將你的網站資料轉換成適合用手機閱讀的狀態,這麼做的優點除了介面美觀以外,最重要的是能夠提升使用者的體驗,進而優化網站的SEO,我想這是大多數Wordpress建站者最重視的部分,即使你不會撰寫程式語言,也沒有預算雇用一個網站工程師,也可以替你的網站打造出一個很不錯的手機介面。


2.安裝教學

install plugin

WPtouch的安裝如同其他外掛一樣,進入網站的控制台後,點選左邊的功能列,選擇外掛→安裝外掛,接著在右邊的搜尋框搜尋WPtouch。找到後點擊立即安裝→啟用,就可以進入下一步囉。

WPtouch

3.一般設定

settings

完成外掛安裝後,你會看到左邊功能列表出現了WPtouch,點進去畫面會出現外掛的基本設定頁面,這邊使用預設的設定即可,確認一下網站的名稱是否正確,或者有需要更改,可以按右上角的Preview Theme預覽畫面,可以看到目前你的手機版網站畫面。


4.樣式設定

customize

然後我們點開左邊功能列的外觀→自訂,進到網站的樣式設定區,左上角的按鈕「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用戶將你的網站加入到手機主畫面
WPtouch Pro

如果這篇文章有幫助到你,或者是你有任何相關問題,都歡迎你在下方的留言區告訴我,每一個留言都是我寫文章的動力來源,謝謝你的閱讀。:)

【WordPress】IG、FB嵌入WP外掛完整設定教學,讓使用者快速成為粉絲

目前這個社群媒體淹沒的時代,大多數人經營自媒體,同時也會使用IG Instagram或者FB Facebook與粉絲互動或者放更多分享,然而若你是在使用Wordpress架站的情況下,要如何將自己的IG或FB粉絲頁置入網站中呢?

這篇文章教你使用兩個免費的Wordpress外掛將Instagram及Facebook嵌入網站中,或者是放入側邊欄,讓讀者能夠更快地看到你的粉絲頁或IG,並且點下追蹤按鈕,增加你的粉絲人數。


Instagram

1.安裝外掛 Smash Balloon Social Photo Feed

Smash Balloon Social Photo Feed

首先,進入Wordpress的控制台後,點選左邊工具列的外掛安裝外掛,並且搜尋Smash Balloon Social Photo Feed,點擊立即安裝,並在安裝完成後啟用此外掛。


2.連接Instagram帳號

Connect to Instagram

接著,再到左側工具列,點擊Instagram feed,進入外掛的設定區。

一進入設定區就會看見外掛請你連接Instagram帳號,看你的Instagram帳號是屬於Personal(個人帳號)還是Business(商業帳號)直接選擇後,系統會導向至Instagram的登入畫面,輸入帳號密碼,就會成功連接你的IG帳號。


3.顯示樣式調整

adjust style
Follow Butoon

要調整之後的顯示方式,請點選上方的2.自訂資訊提供,上圖是我個人的建議設定,之後Instagram就會呈現出九宮格,像平常瀏覽的樣式(如下圖)。不過你也可以依照個人的需求喜好作調整跟嘗試,不一定要像我的設定一樣。

Finished

停用行動版版面配置」如果沒有勾選的話,讀者在使用手機瀏覽網站時,就會看到照片呈現直排,而不是九宮格狀態,會造成瀏覽網站的困難。


4.展示短代碼

shortcode

最後到「3.展示資訊提供」就會看到外掛提供給你的短代碼 [instagram-feed] ,將這個代碼複製貼到側邊欄、底邊欄或者是文章、頁面中,之後該區域就會顯示出你的Instagram。

補充說明

這裡的短代碼可以依照你個人需求不同而修改,例如你希望顯示貼文數量有20篇,那麼短代碼後方就加上num=10,變成[instagram-feed num=10],希望在貼文中間間隔加大,那麼就使用imagepadding=10(數字即寬度,可自行調整),變成[instagram-feed imagepadding=10]。

其他相關設定都可以參考下方表格,幫你的短代碼作些微調整,而表格白色底的是免費版即可使用,如果想要使用紅色底的顯示內容(例如顯示貼文、按讚數、留言等),就需要加價購買進階版。

往下看如何顯示於網站側邊欄示範


5.影片教學

如果對於操作過程有疑惑,也可以觀看Smash Balloon Social Photo Feed官方提供的操作教學影片,缺點是目前只有提供英文的版本。


Facebook

1.安裝外掛 Smash Balloon Social Post Feed

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帳號

Connect to Facebook

接著左側功能列會顯示Facebook Feed,點擊進入設定頁面後,第一件事情也是先連結你的Facebook帳號,過程按照畫面提示照做即可,不難但它不像Instagram一樣有中文版本。


choose page or group

如果你要連結的是Facebook粉絲專頁,就在中間選單選擇Facebook Page,如果你要連結的是Facebook社團,那就選擇Facebook Group,然後點選Continue繼續下一步。


log in account

接著系統會像你確認是否使用這個Facebook的帳號登入,確認的話就點擊藍色按鈕「Continue as (你的帳號名稱)」,如果要使用其他帳戶來設置的話,就點選Log in to another account使用其他帳號。


choose page or group

找到你要連結的Facebook粉絲專頁或群組,在右側的欄位勾選即可,連結可以一次連結多個,但是網站上能夠顯示的只有一個,所以這邊點擊一個就好囉。


allow smash balloon manage page

這一步問你是否同意使用Smash Balloon外掛管理你的粉絲專頁,選擇Done完成即可。


check page again

這裡會顯示出你有連結的粉絲專頁,點選你要顯示的專頁(底色變成淡綠色),再按Connect this page,終於完成Facebook的連結囉。


save settings

記得完成後再按一次Save Settings儲存設定,以確認剛剛做完的步驟都確實有存在Wordpress網站系統中。


3.顯示樣式調整

stylize

在上方的功能選單,選擇「自訂」後,就可以看到很多顯示的設定,我建議可以先看看預設的樣子你喜不喜歡,不喜歡的話再去嘗試做調整。而預設的樣貌則會顯示如下圖。

finished

4.展示短代碼

shortcode

這個外掛一樣是使用短代碼來呈現,把 [custom-facebook-feed],複製貼到你要顯示的地方(可以是頁面、文章、側邊欄、底邊欄),回到網站點選鍵盤F5重新整理,就會看到你的Facebook外掛囉。

Facebook Feed的部分一樣有分免費版跟付費版,有需要再加購就可以囉。

往下看如何顯示於網站側邊欄示範


5.教學影片

雖然官方也有提供Smash Balloon Social Post Feed的教學操作影片,但是只有比較舊的版本,沒有最新版本的影片,大家還是可以參考著觀看。


sidebar

如果你不了解如何使用短代碼,這邊以側邊欄作為示範。

  1. 點開左側功能列的外觀→小工具,你會看到最右側有Sidebar側邊欄、Footer底邊欄(依每個人選擇的佈景主題而有所些微不同)
  2. 將「可用的小工具」下方的「自訂HTML」滑鼠按著拖拉至側邊欄。
  3. 接著在內容貼上剛才提到的短代碼。
  4. 點擊儲存。
  5. 回到網站頁面按鍵盤的F5重新整理確認樣式。
  6. 完成外掛嵌入。

如果你對於此篇教學有任何疑問,歡迎在底下留言發問問題喔!

【WordPress】新手架站步驟流程設定總整理

我相信有我相信有很多人跟我一樣,想要架設出一個自己的網站,自己的部落格,或者是自己的個人品牌,但卻不知道到底該如何下手,在網路上找了好多的教學,可是怎麼架出來的網站都和自己所想像的都不一樣,以上都是過去的我曾經歷過的過程。

在這篇文章中,我將教你如何架出一個真正完整的Wordpress系統網站,並且告訴你我所做的每一個步驟的用意為何,從零到一的完整過程,只要照著本篇文章設定好你的Wordpress網站,就能夠擁有一個專屬於你的個人部落格,後續都可以再依照每個人各自的不同需求,來打造出作品集個人品牌甚至是網路電商


1.購買網域及設定

Plan

網域商選擇

網域也就是每個網站的網址,市面上有各式各樣的網域商,不論你選擇哪一家網域商購買都可以,基本上我們需要考慮的是:

  • 價格
  • 附加優惠
  • 公司規模

公司規模的部分盡量不要選擇年資短的小眾公司,以免未來發生意外導致公司倒閉時,你的網域就會岌岌可危。而價格部分,大多數的網域商都會以第一年的優惠價來吸引你加入,但往往從第二年開始價格就會特別貴,如果有心想長期經營你的網站,可以將第一年及第二年的價格一同做比較,就能清楚了解未來的預估花費。

如果你已經購買好網域,在網域到期時想轉換網域商的話也可以,只是也許會需要承受網域可能會成為幾天的網路孤兒,這段期間有一定的機率無法進入網站。所以說能在一開始就選好自己喜歡的網域商,是最好的狀況了。

常見的網域商價格列表

以.com為例
(美金)
成立年份第一年第二年後免費贈送
Godaddy19974.9917.99
Namecheap20008.6812.98隱私保護
Dream Host19967.997.99隱私保護
Google Domains19981212隱私保護
1&11988115隱私保護

隱私保護Whois

隱私保護可以看個人決定是否要購買,如果沒有購買的話,那麼你的註冊資料則有可能會比較輕易地在網路上被查詢到,我自己是建議購買


SSL憑證

你有沒有過曾經登入某個網站,而它的網址前面顯示「不安全」?SSL憑證就是要將你的不安全網址轉換為安全網址,有多作這一步的話,各大搜尋引擎(例如Google)會比較容易信任你的網站,且比較不會被電腦本身瀏覽器的防毒工具禁止使用者觀看網站。

不過SSL憑證的費用不算貴但也不便宜,像是Godaddy提供的SSL憑證,一年就要花上將近2000元台幣,這對新手來說無疑是一個成本上的壓力。

在這邊我要跟你推薦Cloudflare,它們目前提供免費的SSL憑證服務,不論你是在哪一家購買的網域,都可以讓Cloudflare託管,幫助你將網址轉換為安全性的網址,至於設定方法只要照著以下的教學就可以囉!

通常設定完Cloudflare後,會需要一點時間讓他處理程序(我個人嘗試後,有網站一小時後就完工的,也有網站是到隔天才完成),但如果你的網站已經有一些內容在上面,那麼就要靠安裝外掛來處理,詳細教學請跳到下方4-6.SSL Insecure Content Fixer


我個人的選擇

目前我個人有兩個網站,一個使用Godaddy,它的最大優勢是有提供中文客服,且用戶數量非常多,所以如果需要作各種後台的變動,大多數問題都可以在網路上找到分享教學。

另外,雖然有很多人推薦Namecheap,但當我正打算建立第二個網站,在研究網域商時,曾經有看過位於英國的部落客分享,他有過好幾次無法登入Namecheap的經驗,因為他的IP不在美國,基於這個理由,我的第二個網站使用了Google domains的服務,供大家參考。


blog

2.購買主機並安裝Wordpress.org

主機商的選擇,我想大多數人都會建議你直接找同一家一起買一買主機跟網域,當然這絕對是最簡單好上手的作法,但我想也有多數人是不小心先買好了網域,然後再發現網域商居然沒有提供主機的服務,或者是比較不擅長英文介面等等。

新手選擇 - Godaddy

如果你是全新新手,而且偏好中文介面,我建議你使用Godaddy,同時購買網域及主機,全中文介面加上中文客服,讓你不再害怕接觸Wordpress。但Godaddy的缺點是主機較不穩定,我自己碰過好幾次網站無法進入的狀況,雖然通常都是幾分鐘後就會恢復,只是有點惱人。

要是你不排斥使用英文介面,我會推薦你使用Siteground,Siteground


老手選擇 - Cloudways

如果你是正打算更換主機商,或者是網站已經有一定規模,想要更加升級使用者體驗的人,我建議你使用Cloudways,這間主機品質好,價錢也不貴,提供24小時客服。購買及架設的教學如下:


我個人的選擇

其實我就是那個從新手進入老手的人XD,原先一開始用的是Godaddy,到後來網站漸漸承受不住讀者們的愛戴(感謝大家!!),開始有了上述所說的網站主機斷線問題,所以即將搬家到Cloudways,提供大家更好的閱讀品質,還請諸位繼續多多支持。


3.Wordpress設定

回到正題,你以為照著上面兩個教學文及影片,就可以得到一個超美麗的網站了嗎?現實總是殘酷的,安裝好Wordpress後,還有一些設定及外掛需要調整,請跟著以下教學,讓我帶你慢慢進入Wordpress建立部落格的世界中。


請在你的網址後加入/wp-admin,輸入帳號密碼登入後,才會看見接下來的控制台區域唷。

一般設定

首先,安裝完Wordpress後,需要先進入設定一般 討論,將以下我用紅色線條框選起來的部份都填寫並確認全都已勾選,這些在未來都可以依照你個人網站的定位走向改變,或者是流量增加,再來做更動調整。

setting

討論設定

setting2

4.安裝外掛

接著我們進入到外掛安裝的步驟,以下介紹的八個外掛,是我認為建構部落格或網站剛入門時可以先無腦安裝的外掛 ,有了他們你能夠更快速地接近你想達成的目標及理想中的網站,老話一句,未來你要再做調整或更換都沒問題。

在左手邊的功能列表,點選外掛,選擇「安裝外掛」,並在右上角搜尋框輸入下面這些外掛的名稱,點擊安裝外掛,再點擊啟用即可。

plugin

4-1.All In One SEO Pack

All In One SEO Pack

第一個外掛是All In One SEO Pack,他會幫忙你做好網站的基本搜尋引擎優化(就是告訴Google你的網站有好多好多資料~快來讓用戶搜尋到我~來看看我的網站~),你只需要安裝好後,將一樣將圖片中標示出來的部分都填寫完成、勾選,基本就完成囉!

SEO setting
SEO setting 2
SEO setting 3

4-2.Contact Form 7

Contact Form 7

接著是Contact Form 7,他是一個超級簡單幫你生成聯絡表單的外掛,完成安裝後到左手邊工具列選擇聯絡表單→新增聯絡表單,內容不必調整,只要輸入標題(不會顯示,單純取個名字),接著在聯絡表單列表,會出現「短代碼」,把這個短代碼貼到網站中任何一個地方,(例如文章或頁面編輯器中)就會顯示出像下方這樣的聯絡表單提供給用戶和你聯繫。

[contact-form-7 id="344" title="聯絡Li-Ling"]

4-3.Easy Table of Contents

Easy Table of Contents

Easy Table of Contents會幫你把文章的標題1、2、3、4、5整理成一個目錄,並放在文章內部,讓讀者可以很快地看到他想要找的資料標題在哪裡。

在寫文章時,滑到最下面將「插入內容目錄」以及你「想列成目錄的標題們」都打勾,預覽文章就可以看到目錄已經生成囉。


4-4.Limit Login Attempts Reloaded

Limit Login Attempts Reloaded

Limit Login Attempts Reloaded則可以幫你保護你的網站,若有人試圖入侵後台,超過一定次數之後,網站就會暫時停止讓人登入後台,若碰到駭客攻擊的話,多少能夠起一點效果。


4-5.Revision Control

Revision Control

Revision Control負責控制網站中的文章暫存數量,以免未來網站規模越大,這些沒有用處的暫存卻暫用了太多流量或者使用空間。


4-6.SSL Insecure Content Fixer

SSL Insecure Content Fixer

如果你在設定好SSL憑證後,網址最前面仍然顯示不安全,那麼就需要安裝這個外掛SSL Insecure Content Fixer,來協助你將網站的內容一律都改成安全。

設定方式則是到左邊工具列→設定→SSL Insecure Content,從第二個勾選圓圈Simple開始試,看你點選到哪一個,網站會變成安全網站,那就Ok囉,未來都不必再更動這個外掛。


4-7.TinyMCE Advanced

TinyMCE Advanced

TinyMCE Advanced會將你的文章編輯器變得更加靈活,例如特定文字增加背景顏色、刪除線等等,運用適當的話,讀者在閱讀文章時會覺得很舒適,更願意繼續看下去。


4-8.UpdraftPlus - Backup/Restore

UpdraftPlus - Backup/Restore

最後一個外掛是UpdraftPlus,這個外掛可以讓你完整備份整個網站,最重要的一點是,它是全自動的外掛,也就是說你可以設定固定周期讓它自動備份網站,以免你太忙忘記備份網站,如果碰到主機的意外事件,就可能會失去很多辛苦設定好及寫好的文章。


Google Analytics

5.串連Google Analytics

Google Analytics ID

架設好網站後,你一定會想知道網站的流量、讀者在網站內做了哪些的動作,每天瀏覽量多少等等,這時要麻煩你進入Google Analytics,按照Google的指示,輸入網站的網址,接著Google會給你一串Analytics ID,這時請你回到All in one SEO,到剛剛操作過的一般設定,找到上圖這個區塊,將 Analytics ID完整複製貼上,接下來就可以看到Google Analytics的後台囉。


6.串連Google Search Console

只要你先設定好上一段的Google Analytics,那麼Google Search Console就不必特別設定,貼上網址後,Google Search Console就會自動串聯完成!


7.撰寫文章

以上設定及外掛都安裝好後,請你先嘗試使用左邊功能列表的文章→新增文章,嘗試寫一篇文章,並使用各個標題、段落等區塊,就可以先看見你目前網站的樣貌。


8.選擇佈景主題

至於為什麼把外觀→佈景主題放在最後面呢?因為你先有文章後,才會知道你更換主題後,網站到底會長什麼樣子,選好了主題,記得到外觀→自訂,嘗試看看各種設定,直到找到你最喜歡的主題


以上就是我整個設定Wordpress的總流程,希望有幫助到想嘗試架設Wordpress站的人,剛開始學習時會覺得很陌生,到底這個是什麼鬼,有這些想法都是很正常的,慢慢摸索,總會有上手的一天,加油!