Wordpress網頁設計教學:便宜實用的Wordpress網站架設+Blog推薦 | EasyWebsite 台灣 : RWD Website Development 介紹

WordPress網頁設計教學: 2021年初學者必備的網站架設知識與網站推薦: RWD Website Development

你是不是正在思索如何為自己開始架設一個網站

嘿大家好,我是網站哥,今天我要來與你分享如何為自己帶來額外的收入並開始愛上自己在做的事情!我透過撰寫網站部落格在家工作已有數年的經驗,而經營網站和部落格讓我在家中就能輕鬆賺錢!不過,我也必須坦承,架站這件事其實也不如你想得如此簡單! 

在無邊無際的網路資訊中學習如何架設一個網站和網頁設計根本有如大海撈針,蒐集和消化資料花了我超多時間。我認真地做了很多架站功課……無論是在不同的網頁設計教學網站看影片還是閱讀文字內容……但說真的,萬事起頭難。由於我知道架站起頭時的懊惱,我覺得我的實戰歷練值得與大家分享,這些秘訣可以讓對於架設網站和部落格有興趣的人省下不少的時間和挫折感。因此我製作了一個免費的步驟式網頁設計教學來幫助新的部落客釐清任何疑難雜症,然後能夠利用所學快速地製作網站。更棒的是,這個設計教學完全免費,而且一點也沒有你想得那麼困難!


⚠️ 注意 ⚠️

這篇文章讀完大多花你半小時的時間(7899個字),不過內容扎實,每一個步驟都是新的網主必知的網站架設的祕訣!

以下是網頁設計和架設的基礎指南。你將會使用信譽良好的虛擬主機服務商——Bluehost,透過它,你就能一鍵安裝WordPress網站。

跳至「步驟4:在WordPress開始架設網站」段落

另外, 如果你對這篇設計教學文章有問題,或是架站的過程中碰上難題,我都能協助你!請透過這個網頁與我聯繫。


7步驟簡單RWD架設網站

步驟1:找到你的網站最適合的利基點

首先,要創立一個成功的個人網站,在網頁設計上最重要的就是主題設定。你對哪方面的主題有興趣?像我自己熱愛園藝,同樣也對食物和財務管理相當有熱忱!要記得,你必須先識別你網站的利基點,唯有如此你也才能識別目標讀者群。深入了解目標讀者群可助你透過網站賺錢。一個會賺錢的網站主要是靠著聯盟行銷的連結與廣告獲得收入。

製作網頁時,記得要找到利基點

像我之前提到的,架站前你必須找出自己內心最熱愛什麼主題?也許你會想「這也太簡單了吧!根本想都不用想」,但要成為一個成功的網主或部落客,你一定得在字裡行間傳遞你的熱忱。選擇你非常熱愛的興趣作為主題,以此讓自己再進一步成為一位專家,如此也可持續燃燒這個熱忱。你的頁面內容應該針對該主題所搜尋到的結果並加上自己的觀點和感受。你所撰寫的個人網站內容會幫助你從人海中脫穎而出!

步驟 2:選擇一個網頁製作平台 (WordPress 部落格 CMS)

好,你已經選好了利基點!然後呢?接下來是一個技術性的關鍵決定——市面上哪些才是易於管理最棒的網頁設計和製作平台?這是我自己花最多時間研究架站資訊,並在初期跌跌撞撞的階段,但現在你不需要走我走過的路,因為我將與你分享重點,幫助你省下苦惱的時間!我推薦你透過虛擬主機服務商的設定為自己架設網站。根據我自己的研究和經驗,我絕對可以清楚地回答你「如何開始架設網站?」這個問題。我將從網頁製作平台最重要的兩個選擇開始——免費還是虛擬主機。虛擬主機是我推薦的選擇。

一窺免費平台 (bootstrap)

我知道對於新的網主來說,「免費」這兩個字吸引力很大!市面上有多數個成立已久的免費網站架設平台,包括我相信你一定聽過的WordPress、Blogger和Tumblr。但是,基於幾個原因,它們其實並不是最好的選擇。以下分析免費架站平台的劣勢:

A) 每個平台各自的規定導致你無法輕鬆在網站上賺錢。

當你透過免費的平台建置網站,該平台擁有你網站的所有權,而且你也必須遵守架站平台的所有規定與限制。例如,當你試著學習如何透過網站賺取收入,你使用的平台可能會限制不讓廣告刊登於網站。實際上,你會在自己的網頁上看到該平台的廣告,但這並不是任何一位認真經營部落格的使用者希望看到的樣子!因此我建議你盡量避免使用免費的平台網站。

      B)  你並不是網域的擁有者

沒錯。在免費的網站平台上建置網站,你將不會獲得專屬於你的網域名稱!你想想看,你的URL(也就是網站網址),會加上平台的名稱,並不是完全依照自己所選!這…是不是令人大所失望!透過免費的平台為自己打造一個免費網站,你的網址會看起來如下所示:

  • Yourdomain.wordpress.com
  • Yourdomain.tumbler.com
  • Yourdomain.blogger.com

並不如自己所想,對吧?這個URL隱藏了你的內容特性——對於一位認真的網主來說真的不是一個好的選擇!

    C) 你並非真正擁有這個網站

我知道我一直稱這個為「你的網站」,但實話實說,如果這個網站是在這些免費架站平台上發布,你所有網頁的頁面與內容都屬於該平台。平台有權控制甚至可以刪除你的任何網頁或Blog。這個情況在以前曾發生過,未來也會持續發生。想想看你所花在撰寫網站文章的時間和心血,結果別人一按網站內容就全消失。我真的不希望你經歷這種悲劇!

好,那我們來看看其他的架站選擇!如果你選擇使用網站虛擬主機服務商,你將擁網域名稱,同時也是自己網站的擁有者!你的網頁設計任你隨意發揮、你的名稱任你所取!很多人使用個人或公司名稱,或甚至乾脆選一個很酷又好記的描述。比方說是charlotte.com.tw或proofreaders.com甚至可以是MyBestBlog.com。域名後綴可以選擇.com、.co.uk、.net、 .org等做為結尾。另一個更優秀的特點是:你的頻寬不受限!再也不需要擔心上傳影片和照片的加載速度。而且,你將獲得免費主題模版的權限!說實話,這是不是聽起來更棒、更有點「官網」的感覺呢?

更多關於自架網站使用虛擬主機的基礎知識

正如之前所述,使用虛擬主機平台架站的好處就是你真正擁有自己網域名稱和網站。你可能仍需要遵循網域註冊的規定,但除此之外,你能夠掌控自己的網頁內容。

市面上有幾個虛擬主機服務商的選擇,這些也稱之為「內容管理系統」(Content Management System or CMS)。

讓我們一起來看看WordPress (CMS)

WordPress.org 是最為人所知的虛擬主機架站平台。透過WordPress,你可以使用屬於自己的網站空間和名稱。這也是為什麼叫做「虛擬主機」,因為它就像你的另一台主機一樣。你將會需要選定一個服務商——而我推薦的服務商每個月月費根本不到一頓餐費。有了網站架設的虛擬主機帳號,你將會獲得網站空間和一年免費的網域名稱。網站管理系統是開源且是免費的。

現在,如果你仍在顧慮需要每個月額外支付幾塊錢購買架站主機空間,我想提醒你一點:選擇使用免費主機的網站主無法全權擁有自己的網站。每個月額外支付一點小錢(基本上月費只是一杯星巴克的錢)將會令你成為自己網站內容圖文、照片等版權的主人。換個角度想,這是一筆能夠為你建立資產的好投資!

你的服務商可以幫助你維繫電子商城計畫。電子商城網站是指買賣服務或商品等的網頁平台。如果你預計在網站上販賣東西,這種類型的網站就會歸類於電子商城,而虛擬主機絕對是電子商城網站最佳選擇。

WordPress 應該是你虛擬主機服務商的首選,因為它真的是大家最推崇的架站服務商!在我研究網站架設專家的過程中,99%的人表明WordPress是最棒的自架網站虛擬主機和內容管理系統。更驚人的數字是,目前全球有25.4%的網站或Blog使用WordPress,也就是說當今全世界有7,650萬個網站是透過WordPress來架設!用 WordPress 架站的主機選擇可以參考這篇文章

準備好建置你的WordPress網站了嗎? 首先,找到你最喜歡的虛擬主機服務商。我希望截至目前為止的所有資訊都對你相當有幫助。我建議初學架設網站者先嘗試Bluehost。這是一個全球200萬個網站都在使用的虛擬主機服務商。下一個重要的步驟:選擇你的網域名稱。以下是幫助你想出一個好網域名稱的幾個小秘訣:

作為我的網站訪客,你可獲得以下這些優惠:

  • 免費的網域名稱
  • 30天內保證全額退費
  • 優惠月費只要$2.75元

→ 點選此連結來取得Bluehost獨家優惠價格 ←

公開聲明: 此網站深受讀者們支持。當你透過網站連結購買,我們將獲得一部分的佣金。我們只推薦你我們真正試用過和測試過的產品。

步驟 3:選擇你的網域名稱 (website 官方網站)

你的網域名稱就是網路上的網址,所以無論你的目標族群是誰,這就是你在網路上被「看見」的模樣。這個網址是你的獨特網域/URL(中文原名譯為統一資源定位器)。使用者可以透過輸入URL到瀏覽器或透過Bing/Google搜尋引擎連到你的網頁頁面。因此你的網域名稱是一個極為重要的關鍵點:你希望它獨特又容易被搜尋到。使用者要透過支付年費保有網域名稱就。例如,以.com為結尾的網域名稱大概每年年費$10-$15元。

使用者也可以在架站的過程中選擇其他的網域名稱選項。當然,.com是全球最受歡迎的後綴,但你也可以用所處國家的後綴或是目標讀者群所在地的後綴。其他像是.net或.me也可行,但通常使用這還是會以.com為優先選擇。

若你還沒有想好網域名稱,Bluehost容許你晚一點再選擇免費網域。這是一個自架網站很關鍵的選擇,花點時間好好研究並思考一下。

推薦重點:

一個傑出的網域名稱要好記,所以如果希望使用國家或其他的後綴,就用吧!好好發揮其功能!

步驟4:開始註冊虛擬主機帳號和使用WordPress

在這個段落裡我將指引你深入學習架站所需的技術細節!我們將談及如何註冊虛擬主機帳號以及如何設定WordPress網站。我的指南將呈現如何使用Bluehost建置網站作為範例。我希望以下的這些截圖能夠幫助你順利架站。

步驟4: 開始在WordPress製作網站

1. 進入Bluehost網站 (部落格 web app)

使用這個連結進入Bluehost網站。進到網站頁面後,點選「Get Started」。

bluehost中文

2. 選擇一個適合你網站的虛擬主機方案

首先選擇一個方案。如果你只是剛開始架站,我建議你選擇最基本的方案即可,之後有需要都可以再升級。當網站開始有流量後,我認為「PLUS」方案絕對能符合你屆時的所有需求。然後假使你的頁面人氣暴漲,你可以再升級為「Pro」方案。

3. 輸入你所選擇的網站網域名稱 (部落格)

就像我前面所講,網域名稱基本上可以算是任何網站成功與否的決勝點,所以千萬別急著亂取名。想一個獨一無二又好記得名稱可以讓目標族群更容易搜尋到你辛苦建置的網站。想好之後,輸入至「新網域名稱」區塊。接著,Bluehost會告訴你這個名稱是否可用。如果不行也別擔心,Bluehost會自動產出幾個類似的名稱選項。你可選擇其一或乾脆自己再想一個名稱。

4. 註冊 Bluehost

在你設定完網域名稱後,該是時候到Bluehost的註冊頁面為自己註冊一個帳號。在此頁面上,你只需要花個幾分鐘填寫個人和帳單資訊。請看以下的截圖。

5. 選擇你的虛擬主機方案  (虛擬主機)

在選擇方案時有幾個重點需要考量。每個方案中包含不同的功能或你願意承諾的時間長短。也許12個月最低價的方案最適合你,也許作為長期投資,其他的架站附加功能也值得考慮。

你也可以取消選取其他的方塊,之後你的頁面內容有改變或成長改變心意再加上需要的即可。

6. 用你全新的Bluehost帳號發布 WordPress 網站

太棒了!當你的網域名稱和虛擬主機設定完成後,你就準備好可以進到Wordpress了。

從Bluehost cPanel帳號開始。你可以在「我的網站」中點選「安裝WordPress」不難吧?這也就是為什麼Bluehost以輕鬆建立網站出名的原因!

我總覺得接下來這個架站部分很有趣;進到你所設定的URL,然後看到大大的「Coming Soon」橫幅出現在你眼前。沒錯,再過不久你的寶貝網站就會公開發布了!真正發佈前你需要先到WordPress做些簡單的設定和頁面設計。我待會會講解這部份自製網站有趣的細節,但先提醒你,屆時網站完成後,你將需要回到cPanel點擊「發佈」。

步驟 5:選擇一個適合你網站風格的主題模版 (不用 css programming)

網頁設計和格式基本上就是你所希望呈現的面貌,也稱為網站或網頁前端。製作網頁細節是個令人興奮的步驟,因為在這個網站中,你的訪客可以輕鬆了解你以及你所提供的服務。你想要一個既具有吸引力又具有直觀功能的主題模版。若是你的頁面內容粗糙,而且資訊不易搜尋,訪客很容易就離開。請記住,一位訪客對你網站信不信任與接收度高低,都是取決於網站前端。

一旦你的WordPress平台安裝完成後,你便可以開始瀏覽能夠讓你的頁面呈現專業又美觀的主題模版。這個網頁前端或網頁設計主題是訪客對你的頁面的第一印象,其他的文字敘述才是第二步。選擇一個能夠表達你的風格和易於傳遞訊息給目標族群的主題,當然也要同時確保功能符合所有訪客的需求。WordPress網站有一個預設的主題模版名為Twenty Nineteen。拿這個預設主題模版和其他WordPress.org三千多個的主題模版做比較。如此多的選擇中,你一定可以選擇一個既實用又可以完美呈現你的網頁設計的主題模版。

現在來分享一下選擇主題模板時的秘訣!當你在網站儀表版中搜尋時,可以利用下方的清單來作為評估標準:

  • 敘述:每個主題模版的文字描述值得一讀。它的敘述內容會提供該主題的特色功能。看看它是否符合你的需求。
  • 響應式:架站時,Google建議選擇一種響應式主題模版,這種網頁設計模式使你的頁面無論在桌面瀏覽器或行動裝置上均能完美呈現。
  • 評分:請留意在預覽中和主題詳細訊息下方可見的星級評分。其他網站作者已經嘗試過該主題模版並留下評分。好好善用他們的經驗!
  • 預覽:此功能讓你嘗試套用主題,以便對其外觀和格式有更深入的體驗與認識。花點時間探索該模版,看看哪些功能是可客製並可滿足你的需求。

注意:當你安裝主題模版後,你的網頁也許看起來仍不如預覽中看到的美觀。先別太驚訝!你剛剛安裝的只是一個骨架,接下來你要去加上個人風格,讓它成為專屬於你的個性化網站!你可以邊架站邊撰寫內文邊設計視覺效果,包含文字、照片甚至影片,增添頁面豐富度!

該套用一個免費、升值或客製化的主題模版?

老實說,我在架站過程中,一直在尋找可使用的網頁設計主題但仍未找到百分百最理想的一個模版。對於網站主,特別是初學者來說,這並不是不尋常。因此如果你仍不滿意現有的免費主題模板,而且願意付費的話,我將與你分享其他的模版庫。先讓我介紹一下兩個選項:升值版和客製版。請注意,費用的範圍會從便宜到相當昂貴。

如果你選擇一個升值的主題模版,你也許需要付$30到$500。升值的主題模版可能來自一位開發者或一個專門展示模版的網站。如果你口袋有點錢,去到這些網站逛逛也值得!

在費用與聲量上再進階一點的是客製化的網頁主題,依特色功能而定,價格通常落在$500到$2000之間。這些主題模版可能是由獨立開發者、自由業者或一間設計公司所創造。作為編碼專業人士和網頁設計師,他們可以幫忙修改現有主題以滿足你的需求,也可以為你設計一個個全新的網頁主題。雖然這是一個聽起來很棒的選項,但請記住成本;對於網站新手來說,客製化可能不是一個最合理的選擇,但先參考也無妨!

客製你喜歡的網站設計主題 

好,現在所有的網站架設流程應該都持續順利進行中!當你開始使用WordPress作為網站管理系統進行客製化時,你就可以知道自己是不是做了個好的主題選擇。你在儀表板中,可以控制所有稱為「網站後端」的功能,包括主題模版的實際安裝。

只要登入到你的帳戶,然後選擇Bluehost所提供的預設WordPress主題之一。請記住,你之後還是可以使用WordPress.org存儲庫選擇其他主題。

選擇好主題模版之後,登入你的WordPress儀表板。

在WordPress儀表板上,你首先將會看到一個巨大的「歡迎」字樣。下一步系統將會問你要選擇自行操作還是使用Bluehost所提供的幫助來指導你設定所選的網站類型。

Bluehost按鈕位於頁面的左上角,頁面中也有各種設計工具幫助你開始客製化網站。點擊「發佈」按鈕後,只需幾分鐘即可讓網站向大眾公開!

在「發佈」之後,首先要填寫最重要的欄位:標題和描述。這些訊息會立即向傳送給你網站的訪客,讓他們知道你的網頁頁面甚至整個網站中有什麼好料。

太棒了!你已經知道如何架設網站了!有了準備就緒的新網站,接下來就該認真學習如何撰寫網站文章。

我們來談談客製化你的新網站。你該針對目標讀者群做點內容規劃,好好在字裡行間發揮你的風格特性,吸引讀者目光,在網站在茫茫大海中脫穎而出!

步驟 6: 撰寫內文與宣傳網站 (架設網站)

給自己來個掌聲鼓勵!如果你到目前為止已經套用了前面所述的各個步驟,那麼你現在應該已經擁有一個網域名稱、一些網頁和一個主題模版。你已經建立了一個接下來只需要內容的框架!而內容是一切的重點!好,那究竟內容是什麼?這就是你在網站上傳遞給讀者的內容;它必須有相關聯性、有吸引力,並同時也要實用。網站內容是你與世界分享的亮點。當你寫網站文章時,你應該分享有價值、有共鳴的內容,如此才能讓讀者一次又一次地在你辛苦建立的網站中學習和與你互動。

好,其實在思考撰寫新網站文章的時候有幾個「最佳範例」可以遵循。不過要記得的是,讀者並不會因為你的努力就前來造訪!透過學習這些範例,加入自己的圖文影音,你將能吸引更多讀者花時間在你的頁面。

很現實的事實是,無論你花多少的時間和金錢,如果沒有好的Blog內容,你也不會有訪客。道理就是這麼簡單!沒錯,你的網頁設計很重要;沒錯,你的架構很重要;但真正吸引人潮造訪頁面的是令人驚艷的內容。

內文應該要…

  • 與特定讀者交談。你並不是為了整個世界而寫作,你是為了一群有特定興趣和需求的人寫作。了解你的讀者,帶給他們一些有價值的內容,帶給他們一些重要的資訊。也許我應該將這一段落標記為「內容必須是……」,因為現實就是,你撰寫的內容必須為特定受眾提供價值。你的文字是為了他們而寫,而不是為你自己而寫。
  • 提供內容精美且易於瀏覽的頁面。好的內容卻寫在設計草率的頁面上並不會為網站創造成功。不要忽略網頁設計的重要性,別隨便使用低質感的圖片和元素。文字和設計是並肩同行吸引你的讀者群的關鍵。
  • 稱你的讀者為訪客,而不是買家。當然,你架設網站背後可能有商業目的,但是只將重點放在出售商品上反而會使你的讀者望而卻步。盡量避免使用大型彈跳式廣告或橫幅。先用能夠勾起他們興趣的相關內容吸引他們的目光。你的重點應該放在提供讀者需要的幫助。如此一來,你才能與讀者建立長期的良好互動關係。

對於新網站主來說,一想到要創造Blog內容似乎有點喘不過氣;但其實你可以用各種不同的方式將訊息傳遞給讀者。我要說的建議是,內容的傳遞方式並不如真正的內容重要。將重心放在傳遞樸實又優質的內容,讓你的讀者有興趣閱讀。

架設網站 常見問題

完全不懂程式、網頁編碼,如何將圖文內容變成一個個網頁?

上面提到利用WordPress建立網頁,其實完全不牽涉任何編碼知識,什麼html、css、javascript通通不用懂。WordPress的介面是一個很直觀、簡單的網頁編輯器,透過拖曳不同的內容與功能模塊建立你的頁面,基本上與在任何文字編輯器上寫文章分別不大。

在網頁設計方面,完全不懂繪圖跟設計怎麼辦?

作為最受歡迎網頁架設平台的WordPress當然可以解決你的煩惱。如前所述,你只需選好一個喜歡的設計主題,根據你所希望呈現的外觀把模塊拖曳到編輯器頁面的正確位置,一個設計感十足的網頁便自動成形。當然,你也可以僱用專業的設計公司為你代勞所有的網頁設計,好處是較為省事,成品也可包含更多必須具備編碼和網頁設計知識才寫得出來的功能。但作為新手網主,設計公司的收費可能是一大筆很大的前期投資,如果預算不是特別寬裕,自己動手還是能省下不少。畢竟內容才是吸引人流的最主要因素。

我們有試過Bluehost以外其他虛擬主機服務商嗎?

有,我們評論過HostGator、GoDaddy、Siteground,最後認為Bluehost的方案最超值。

網域是什麼?

網域也稱之為URL,白話來說就是你的網站「地址」。大家透過在瀏覽器中搜輸入你的網址(比方說www.abc.com.tw)連到你的網頁。

虛擬主機是什麼?

虛擬主機又可以稱為網站空間、網站託管,真正的用途就像是你的第二台電腦一樣。將網站儲存於虛擬主機上的最大幾個優勢是 1. 價格便宜空間又大 2. 有專業人士幫你維護 3. 操作管理簡單好上手。

你們有評論其他的平台嗎?

當然囉!