本篇經原文作者: TransBiz 跨境電子商務智庫  同意授權轉載 ,引用:文章來源

想要架設一個自己的網站嗎?Wordpress因為平台的易用性和很多可擴充的Plugins功能,是很多商家和網站主架設網站的首選(當然也有很多知名的平台像是Shopify、91App、Shopline、meepShop可以架設電商網站)。根據調查資料顯示,全世界有25%以上的網站都是使用Wordpress架站,包含紐約時報TechCrunchMercedes-Benz等知名網站也都是使用Wordpress平台架網站。這篇文章就要教你如何快速從無到有架設好自己的Wordpress網站。

而在開始之前,你需要思考以下幾件事:

  • 網站名稱、網址、虛擬主機
  • 網站內容
  • 網站結構與設計
  • 品牌風格

挑選網址

一般來說品牌或是公司都會有英文名稱,為了讓消費者能夠直接透過品牌名稱在搜尋引擎上搜索,基本上都會將其英文放在網址中,並在頭尾分別加上www和.com,再依照若有地域性的話,加上不同國家的縮寫,例如.tw、.us、.hk、.jp(不過現在有比較多的網站已經不再使用www作為前綴,像是transbiz的網站就是transbiz.com.tw)。

比較熱門的字詞若被使用了之後,你可能就會需要在網域的名稱加上不同的詞彙,依據品牌調性與風格區隔。以部落格的網域命名來說,要不就是想一個讓人很好記得的新名稱,要不就是加上姓氏,或是最簡單的方法就是加上生日日期或是數字,有點像是申請帳號但跟別人重複的時候,網站會自動建議你在後面加上數字是類似的道理。

不過若作為一個公司或是品牌,你可能加上的字可能就是跟商品有關,或像是「my」這類型比較具有品牌調性風格的文字。

這個網頁會根據你的網站性質不同給予不同網域名稱的建議,比方說在Startup的網域名稱建議,會在品牌名稱加上get、try、use、hey等字;商務發展上的建議則是加上後綴的studio、agency、company、center等;另外還有有趣的網域名稱、科技類、教育類等等的字詞參考,當然,你會希望網址越簡單、越容易讓人記得越好!

有鑒於現在非常多網域申請都和虛擬主機綁在一起,因此當你買了網址之後,就不必再煩惱主機的問題,只需要在購買時,考慮需要的功能即可。以下方的GoDaddy為例,根據網站數量和儲存空間的不同,每個月有不同的資費方案。

其他常見的虛擬主機公司,則是以虛擬主機購買贈送免費自訂網域Domain,和WordPress有合作的公司如BluehostHostGator,以下是Bluehost和HostGator的收費方式參考:

Bluehost

HostGator

購買虛擬主機,綁定WordPress

以在HostGator購買虛擬主機為例,當你買好了虛擬主機之後,就會進入到這個頁面,你可以一鍵安裝WordPress

 

當你按下了一鍵安裝之後,它會自動幫你把虛擬主機跟WordPress串接起來。安裝好後,你會看到上方的Banner出現「Installation Complete」,接著要注意下方它會給你一個新的密碼(要存起來)。

 

點選View My Installs你可以看到下面這個畫面,確認HostGator和WordPress綁定成功,然後到Admin Login輸入上面提供的帳號跟密碼開始進入你的WordPress後台。

或者你直接點選Login畫面也能直接看到下面這個頁面,輸入帳號密碼進去WordPress的後台。

在你輸入前面設定的帳號以及網站生成給你的密碼之後,就可以進入到WorPress的後台頁面了!

因為一般初始設定是在英文,所以如果你想要使用中文介面的話,可以到「Setting」裡面的Site Language將語言設定轉換成繁體中文。

再來就可以到外觀(Appearance)設定你的佈景主題了。滑鼠移動到想要的佈景主題,下方就會出現「安裝」字樣,即可選擇安裝。

或是可以點選「上傳佈景主題」,使用你已經找好的佈景主題。

有很多專門做Wordpress佈景主題的網站,可以讓大家下載更多元的佈景主題,不同性質的網站可以採用不同的模板,通常都是要付費的,但是好處是可以直接使用他們訂製模板打包內建的功能:

要創建「關於我們」、「聯絡我們」、「產品介紹」等上排的在頁面中新增頁面。

然後到「外觀」的「選單」裡面設定。

要指定某個頁面為首頁,可以在「設定」->「首頁顯示」裡面找到

若要設定主要頁面的呈現方式,則可以到「外觀」->「小工具」,包括內容的安排、頁尾的設置,都可以用拖曳的方法自訂內容,而一般比較常被使用的是「文字」。

至於要怎麼快速建好網頁,可以運用Wordpress強大的外掛,把後台可以直接拖曳排版的「Page Builder by SiteOrigin」以及網頁主要的Slider「Responsive WordPress Slider – Soliloquy Lite」先裝好。

可以先到「外掛」->「安裝外掛」,在搜尋Bar上找到和安裝這兩個外掛工具(記得點選「啟用」)。

安裝好之後,進入到頁面畫面就會看到這兩個外掛工具了!

你可以到「外掛」->「已安裝外掛」檢查你的外掛程式之「啟用」和「停用」狀態。

在頁面編輯時,點選「Page Builder」之後你會看到如下的頁面。

先設定一個Row之後就可以開始你的網頁設計。

如需要其他的輔助小工具可以到「Add Widget」

Soliloquy則必須在側欄找到它,做好基礎設定之後才可以在頁面中插入內容。

WordPress Plugin 推薦!21個架網站你不能錯過的實用外掛這篇文章裡,還有許多推薦的小工具能幫助你在SEO、內容生產或是CTA上事半功倍。

把上述的動作完成之後,基本上你的網站就完成了…只是還沒有內容。一般來說,網站會有的資訊不外乎:關於我們、我們的商品/服務、常見疑問、聯絡方式。但你的網站結構要如何安排,網站的配色、品牌的名稱、風格⋯⋯等,這些都會是在建立網站的時候需要考量的,不然你申請好了網址但是網站內容一片空白…

幾個比較知名的網站使用WordPress建站,可以作為參考:

或者最簡單的方式,就是參考你的競爭對手,看看它的網站素材有哪些、如何配置與安排,你就可以針對他們的網站內容,想一想自己的網站要怎麼設計,它們的網站有哪些需要優化的地方,而你自己的網站要如何設計。

網站內容設計:

想一下你打造這個網站主要目的是什麼?希望人們購買你的產品?填寫聯絡表單?留下email訂閱你的部落格文章?打電話詢問你相關的服務內容?

1. SEO

在想好了網站的主要目的之後,會建議你使用Google關鍵字規劃工具,針對你的潛在消費者在找資料時會使用什麼樣的關鍵字來規劃你的網站內容。

透過關鍵字規劃師,你可以找到哪些關鍵字的搜尋量比較大,就可以避免你在內容設計上使用到冷僻的字眼。記得在使用關鍵字規劃工具時,要篩選你所在的國家、區域或是位置,因為在不同國家的人,使用的搜尋習慣也不一樣。而在使用Google關鍵字規劃工具前,你必須先申辦Google AdWords的帳戶跟資料,然後記得手動關閉廣告功能,始可開始使用這個工具。

一般來說,關鍵字詞的搜尋量越大,你被消費者看見的機會也越大,不過相對來說競爭難度也高。比方說你販售的產品品類是化妝品,但化妝品可能有口紅、睫毛膏、眼影等,消費者在查找資料的時候可能會輸入產品類別加上「推薦」,亦或是「好用推薦」,那麼你可能就需要搶下相關的「長尾關鍵字」,而不是最主要的關鍵字。

在這個階段,你可以透過關鍵字規劃工具來幫助你完成以下3件事:

  • 所有和你提供的服務或商品相關的關鍵字,以及其搜尋量
  • 將這些關鍵字有邏輯的分組,來設置你的網頁內容
  • 儲存你所調查的資料,以便未來做查看和比較

瞭解更多Google 關鍵字:

2. 網站素材

在關鍵字規劃師的協助之下,你大概對於主要目標客群在找相對應的資料時會使用的關鍵字有了基本的了解,那麼就可以針對這些關鍵字來設計網站的內容。試著使用足夠的關鍵字在你的首頁內容和Meta描述中,讓這些關鍵字與你的品牌或服務有所連結。若有太多組關鍵字,那麼則可以分批來進行關鍵字的優化與排名。

當然,你的網站不會只有一堆字而已。你還必須要有圖片、影片、使用者見證等內容來為你的網站背書。

3. 網站結構與設計

如果考慮到網站的結構,你會希望網站最重要的頁面權重比重較高。舉例來說,說你是一個電子商務的網站,但是其中某一個熱銷的產品是你的網站流量的主要來源,可是它在網站的結構底下是主頁>分類>子分類>主打商品,在這樣的情況下你可能需要重新調整網頁的結構,讓潛在消費者可以一進入你的網站就知道最重要的訊息是什麼。

TransBiz來說,我們將「合作諮詢」作為最重要的項目,因此用不同的顏色在上方的分類欄中,希望使用者可以更注意到它可能會比較需要注意的內容。

販售飾品和配件的Vacanza則是將產品分類放在網站的最上方。你可以看到最左邊的是「到貨新品」,最右邊的則是「特價」,中間還有Vacanza精選(Collection)、925純銀、男飾等,或許他們希望使用者可以關注在最新的商品以及Vacanza為他們的精選商品,而稍微淡化「特價」的商品。

因爲人們的閱讀順序是由左到右、上到下,分別呈現Z型和F型,因此在最右側的分類可能相較之下就沒有在左側的分類來得醒目。

 

另外再看到Bonny & Read另一間販售飾品的電商網站,它的分類看起來應該是使用比較熱門的商品在上方排列,最右側的則是近期舉辦的活動(和勵馨基金會有合作),這樣也可以讓潛在消費者在一進到網站的時候看出來目前熱門搜尋的商品,最上面的Banner則是提醒消費者現在全館的運費半價優惠。

 

網站設計參考

你可以在UXPin這個權威性的網站找到許多跟使用者介面設計相關的文章做網站設計的參考,而在12 Timeless UI Patterns Analyzed這篇文章裡,你將可以看到幾種常見的網站設計,它們的優劣表現以及可改進的方式。

ui-patterns.com,是一個線上資料庫,介紹特定的網頁設計元素和內容。網站本身可以分為兩大區塊,一個是用戶介面設計(User Interface Design),一個是設計模式(Design pattern),你可以根據介面設計的方式去找到你所使用的設計該如何運用,像是別人都怎麼樣做,在什麼樣的情況下使用該設計是比較好的方式。而設計模式則是偏向在設計網站的時候希望運用使用者的什麼狀態達到什麼樣子的效果,同樣給予實例參考和成效。

以下方的Carousel設計來說,有41%(270使用者)指出他們喜歡這樣的設計。在網頁中,它會指出這個設計會廣泛被運用在哪裡,使用方式的展現,以及優化的方式。

小編喜歡的WordPress外掛工具包括:Yoast SEO(搜尋引擎優化)、Google Analytics Dashboard for WordPress(流量、點擊資料統計與分析)、W3 total Cache(優化網站速度) 、OnePress Image Elevator(截圖直接複製貼上)、Akismet(管理留言)、Visual Composer(輕鬆拖拉排版設計網頁),供大家參考。

若你的網站需要簡易的電商功能,則可以安裝 WooCommerce外掛工具。

最後,在發布你的網站之後,記得做好資料備份,以及定期的資料備份!

要擁有一個網站就是這麼簡單!重要的是你的網站要有哪些內容來餵養你的潛在消費者,快著手去設計你的網站內容跟頁面架構吧! (欲了解TransBiz的服務請點此連結

對WordPress架站有興趣嗎? 不要錯過這門線上課程喔:

用 WordPress 打造你想要的網路世界