WordPress 完整教學

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站

你想要自己架設一個網站,但卻不知道如何開始嗎?想透過經營部落格和個人網站賺錢,卻發現架設費用高得嚇死人嗎?你完全不會程式語言,但是老闆叫你幫公司架設一個網站嗎?

如果你是我上面提到的那幾種人,那你知道你可以用 WordPress 去架設嗎?

你好,我是 Brian,目前是一名 WordPress 的網站工程師與接案工作者,這篇文章,我將會完整介紹 WordPress 這個專門設計給程式新手的網站架設軟體,並且手把手地帶你架出你人生中的第一個網站。

除此之外,我還會不藏私地告訴你,我平常幫客戶架設一個 WordPress 網站的完整流程。

因此,這篇文章主要是幫助完全不懂程式碼的網路新手,透過使用 WordPress 這款免費的架設網站軟體,並在一天之內,打造出一個市價 5 萬元以上的專業網站,如果你有興趣的話,那就讓我們一起看下去吧!

1. WordPress 是什麼?

WordPress Logo

WordPress 是一個專屬設計給不會寫程式的人,也能輕鬆架設網站的一款免費的開源內容管理系統 ( CMS ),它可以讓你透過視覺化地拖曳區塊的編輯方式,讓你在完全不懂程式碼的情況下,也能建立出令人驚豔的網站。

而所謂的內容管理系統 ( CMS ),就是一個讓一個不懂程式語言的人,能在不用接觸程式碼的情況下,自由更新網站的內容的系統。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 3

截至目前,全世界約有 37% 的網站是透過 WordPress 所建立,換句話說,這可是代表全球有將近 1/3 的網站是由 WordPress 所架設的,因此,說 WordPress 是全世界最受歡迎的網站架設方式也不為過!

而根據知名 Buildwith 網站統計,WordPress 還是現今最多人用的 CMS,有高達 52% 的 CMS 網站是由 WordPress 建構的,可以說 WordPress 壟斷了全球網站市場。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 4

除此之外,你可以看到從 2011 年以來,WordPress 完成是呈現一個爆炸性成長,並且完全沒有要停下來的趨勢,所以,如果你還不知道什麼是 WordPress 的話,那就真的太落伍了!

至於為什麼 WordPress 會這麼受歡迎呢?原因我們留到下面繼續討論。

1.1 WordPress 起源

說到 WordPress 的起源,我們要先來簡述一下 WordPress 與 WordPress.com 的差別。

如果你曾經有在 Google 搜尋過 WordPress,你可能會在搜尋 WordPress 時,發現怎麼會有兩個 WordPress?分別是 WordPress.com 與 WordPress.org

先講結論,一般而言,大家在稱呼 WordPress 時都是指 WordPress.org。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 5

WordPress.org 是 WordPress 最初的型態,因為 WordPress 一開始是由一群世界各地的工程師志工組成的,然後推出一款叫 WordPress 的開源內容管理系統,這時候 WordPress 主要只是被用來寫部落格。

而這也是為什麼 WordPress.org 後面有 .org 的原因,代表它是非營利組織。

既然 WordPress 是一款開源軟體系統,代表它的程式碼都是公開的,同時也是完全免費的,任何人都有權利拿來做商業用途,也因此,開始越來越多人使用 WordPress,並且將 WordPress 從原本的部落格軟體,升級成可以製作各式各樣網站的架站軟體

但是因為要維持 WordPress 的更新與開發,導致 WordPress 官方人力吃緊,所以 WordPress.org 這個組織另外成立了公司 Automatic,也就是你現在看到的 WordPress.com。

而透過母公司 Automatic 的整合與收入,WordPress 的發展逐漸更加為人所知,直到目前,WordPress 已經囊括了全球 37% 的網站市佔率。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 3

所以 WordPress.com 你可以理解為 WordPress 官方發行的收費版本 WordPress,收費的部分主要在於,官方一條龍式的包辦了主機與網域和網站維護的部分,目的是為了再降低使用 WordPress 上面的技術門檻,讓更多人來使用 WordPress。

WordPress.com 扮演的角色比較貼近 Medium, 痞客邦, Wix 等架站平台,不過仍保留著開源程式碼的特性 ( 可以自由搬家、修改 )。

總結來說,WordPress.org 跟 WordPress.com 本質上是一樣的,即使你現在是用 WordPress.com 架設網站,也很輕易的可以轉成 WordPress.com,你只要把 WordPress.com 想成是 WordPress.org 的簡易版就好了。

為方便討論,本文所提到的 WordPress 一詞均指 WordPress.org 的免費版本,而不是 WordPress.com 的付費版本,不要搞混了唷。

延伸閱讀:WordPress 跟 WordPress.com 的差異

1.2 完全不懂程式碼可以架設 WordPress 嗎?

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 7

答案是可以的,這世界上許多透過經營 WordPress 網站好幾年的人,本身都是一點程式碼都不懂的,但他們依舊可以利用 WordPress 網站為自己賺錢或是提升銷售業績。

原因就如同我前面所講的,WordPress 的開發者當初就是將 WordPress 設計成讓完全不懂程式碼的人,也能輕易上手的網站架設框架。

但是,如果你有一些架設網站的程式基礎的話( HTML, CSS, JavaScript, PHP ),對於你在架設 WordPress 上面還是相當加分的!此外,你也能透過修改簡單的 HTML, CSS,就輕鬆達成許多讓網站外觀更好看的效果。

總之,有程式碼基礎會讓你在架設 WordPress 網站上跑得比較快一點,但是真正決定 WordPress 成敗的關鍵,還是在於你願不願意花時間與心力下去經營你的網站。

1.3 WordPress 網站實際案例?

那麼在這佔了全球 1/3 數量的網站中,有哪些有名的網站是用 WordPress 做的呢?

接下來,我將列舉出 4 種不同類型的 WordPress 網站,分別是形象網站政府網站媒體網站電商網站,當然 WordPress 能做的網站不僅於此,不過以上應該是最常見的 4 種網站類型了。

如果你想知道哪些網站是用 WordPress 架設的,你可以透過這個 Chrome 插件與 WHAT WORDPRESS THEME IS THAT 這個網站查詢,或是參考下方的 WordPress 官方收錄的知名網站名單。

延伸閱讀:更多世界上知名的 WordPress 網站實際案例

形象網站:Mercedes Benz

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 8

首先是世界上最頂級的汽車品牌之一的賓士,它們的官方網站也是用 WordPress 下去製作的,這是一個很典型的 WordPress 企業形象網站案例,其實從外觀上,你已經完全分辨不出來它是不是 WordPress 所製作的,非常的專業以及充滿設計感。

政府網站:The White House

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 9

還有世界上最高權力機構的美國白宮,它們的網站也是使用 WordPress 建置的,所以你可以思考一下,連白宮這種掌握全世界最高機密的機構,都採用了 WordPress,這也代表了 WordPress 的安全性是非常好、無庸置疑的。

媒體網站:Vogue

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 10

WordPress 網站也可以很有設計感!一起來看看知名的時尚雜誌 Vogue 的官方網站,她們的官網也是由 WordPress 所架設的,是一個結合 WordPress 方便的文章撰寫功能、與前衛設計感的媒體網站。

電商網站:Tramper

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 11

最後放上一個自己的作品,這是我與朋友合夥的公司的線上購物網站 Tramper,基本上是我一個人用 WordPress 就全部做出來了,而裡面的金流、物流、聯盟行銷、電子報等電商重要的串接系統,都是我在完全沒有改寫任何程式碼的情況下,就完成串接了,並且可以正常購買與運作。

所以,如果你是對於架設購物網站有興趣的人,那麼使用 WordPress,將可以幫你省下大筆請工程師的費用。

簡單來說,WordPress 就是一個架設網站用的軟體,你可以用它來免費架設網站。

綜合以上,你一定相當好奇,至於為什麼大家都選擇使用 WordPress 來架設網站呢?

關於這個問題,接下來,我會透過一個簡單的例子解釋給你聽。

2. 為什麼要使用 WordPress 架網站?

在解釋大家為什麼都要使用 WordPress 來架網站之前,首先,我們要先來了解,通常在一間公司裡面,製作一個公司官網的流程是怎樣進行的?

通常在製作網頁的流程中,會先由公司管理階層與行銷人員進行討論,規劃出網站的架構以及內容;接著再將交付給設計師,由設計師開始針對網站外觀進行 UX/UI 的規劃,打造出符合使用者體驗的網站草圖。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 12

最後,才會由工程師開始依照設計師的草圖一步一步地用程式語言 ( HTML, CSS, JavaScript ) 將網站「刻」出來,變成我們可以透過瀏覽器瀏覽的網站。

你可以發現,從上面短短的過程中,就過了三次手,從行銷人員到設計師再到工程師,這三者角色專業領域不同、因此關注的重點也不同:

  • 行銷人員關注在怎樣可以銷售最大化
  • 設計師關注在網站視覺流暢又好看
  • 工程師關注在精簡的程式碼與不出 bug

所以,你可以想見,基本上最後成本出來時,一定跟原本的所預想的相差很多;除此之外,也有可能在製作的過程中發現了許多原本沒想到的問題,因而要進行許多修改。

而通常其中一者角色有東西要修改,便會牽動到其它兩者,這也往往導致了網站上線的日期總是遙遙無期。

因此,內部人員溝通問題,往往是在製作網站的過程中最令人頭痛的部分。

而 WordPress 的出現,則完美地解決了上面的問題。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 13

透過 WordPress,工程師只需要把事先開發好的網站內容,串連上 WordPress,接著,就可以讓不懂程式語言的行銷人員、設計師,在沒有工程師的協助之下,透過 WordPress 對網站的內容進行更新,如此一來,便可以大大降低溝通成本並提升效率!

如此一來,就不需要一直溝通來溝通去,大家可以更加專注做自己負責的部分,讓公司整體運作變得更有效率了。

所以你可以從這個小例子中發現,透過 WordPress 架設網站,我們可以大幅地降低公司內部職員的溝通成本,並且提升網頁製作效率

2.1 使用 WordPress 架網站的好處?

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 14

用 WordPress 架網站的最大好處就是,它能讓一個不懂程式碼的人也能架出專業網站,其中主要的原因主要有幾點:

  • 架設容易 – 用 WordPress 架網站非常簡單,現在各大主機商都有推出所謂的一鍵架設 WordPress 的服務,基本上只要照著系統的指示走,大約只要花 15 分鐘你就可以把網站架出來了。
  • 費用便宜 – 跟請一個工程師動輒好幾十萬的薪水來看,你只需要每年花個 $ 4000 NTD 租借主機與網域,就能持續地擁有並經營一個 WordPress 網站,並讓它為你每年帶來更多的收益。
  • 內建擴充功能 – 當你今天想要為你的網站添增新的功能,WordPress 還有一個叫做「外掛」的擴充功能,它可以讓你直接免費安裝別人寫好的程式碼到你的網站中,為你的網站添增任何你想要的功能,例如預約訂位、購物車、線上課程等。

2.2 用 Wix 也能輕鬆架網站,為什麼還要用 WordPress?

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 15

有些人可能會有疑問:「我用 Wix 也能很快地把網站做出來,為什麼還要用 WordPress 呢?」

這是因為,用 WordPress 所架出的網站,你擁有 100% 的程式源碼掌控權。

它並不是像你用 Wix Weebly 等架站平台製作出來的網站,雖然這兩者都聲稱是設計給不懂程式碼的人,並讓它們能夠輕鬆架站的工具。

但差別在於,Wix 等架站平台,是由架站平台自己的母公司保存這些程式碼,並且不公開,因此當你在架站平台上架網站時,其實你算是在購買它們的「網站服務」,而不是真正的持有一個網站。

而 WordPress 則是免費且開放給所有人使用的,它是一段被打包好、並且公開在網路上的網站程式碼,任何人只要有能力,都有權使用它、並且運用它來架設自己的網站。

所以,當如果有一天 Wix 像無名小站一般倒閉了,你的網站也就一起消失了,因此,使用架站平台架網站,你是有著網站隨時有可能不見的風險的。( 除非到時候 Wix 願意協助你重建你的網站,但這不太可能。 )

2.3 WordPress 厲害在哪裡?跟一般網站有什麼不同?

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 16

WordPress 最厲害的地方在於,它將近代網站工程中的核心概念「CRUD」發揮到淋漓盡致。

所謂的「CRUD」指的是:

  • Create ( 新增 ) – 使用者可以自行新增文章、頁面。
  • Read ( 讀取 ) – 使用者可以讀取所建立的文章、頁面。
  • Update ( 更新 ) – 使用者可以自行更新文章、頁面。
  • Delete ( 刪除 ) – 使用者可以自行刪除文章、頁面。

其實 CRUD 說白了,就是讓使用者可以自行新增、修改網頁,而不僅僅只是閱讀這個網頁內容而已,而這點,應該也是大家普遍想要有一個網站的最大原因。

即使到今天,一般在網站中要做到 CRUD 的事情,都需要透過工程師以撰寫程式碼的方式進行修改。

以一般公司網站來說,通常要改一些網頁中文字、排版、圖片等等的部分,幾乎都是行銷方面的需求,原本只是行銷部門的事情,但現在卻必須動用到 IT 部門,這點是很沒效率的一件事情。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 17

假設我要新增一篇文章在網站上,我可以透過 WordPress 撰寫後,就直接顯示在網頁上,不需要再另外透過工程師協助發送。

因此,如果你的網站是透過 WordPress 架設的,即使你不懂任何程式碼,你依然可以透過 WordPress 本身自帶的後台,去對網站進行新增、修改,在某種程度上取代了工程師的角色,而這就是為什麼 WordPress 如此受歡迎的原因了。

除此之外,WordPress 還有一個超強大的功能:外掛,外掛其實就是插件,當你覺得你的網站缺什麼功能,你只要去下載別人寫好的外掛就可以輕鬆搞定,把原本需要花好幾萬外包請工程師寫的部分全部省下來。

舉例來說,今天你的 WordPress 網站想要可以收錢賣東西,那就安裝一個電子商務外掛;今天你想要你的網站可以變成論壇讓大家參與討論,那就去安裝一個論壇外掛;總之,你想要什麼功能,幾乎都有人把外掛做出來了,你只要去下載就好了。

2.4 WordPress 的缺點是什麼?

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 18

講了這麼多 WordPress 的好,也簡單來說一下 WordPress 的缺點,也以免讓你覺得 WordPress 好像是無所不能的,WordPress 主要的缺點只有一個,那就是:

WordPress 不擅長處理過於複雜的網站架構。

舉例來說,今天你想用 WordPress 做一個像 Facebook 或 Netflix 一樣的網站,那很抱歉,WordPress 是沒有辦法做到的。

因為 WordPress 當初被設計出來,主要的目的要做為部落格以及形象網站,所以它對於撰寫文章的方面比較擅長,而當你的目的是超脫出它原本的框架時,這時候就不建議你使用 WordPress 了。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 19

現在你們比較常見的大型網站,例如 Facebook, Netflix, Twitter, Youtube…等,這種都是由幾千個年薪500萬+的工程師在維護的,絕對不是區區一個 WordPress 能夠相提並論的。

總之,WordPress 最擅長處理的範圍還是在部落格與形象網站,電商網站勉強可以,但並不是最佳選擇;但如果你只是想要架設一個推廣業務用的形象網站,那麼 WordPress 絕對是你的首選。

3. 如何使用 WordPress 架網站?

聽我說完了這麼多用 WordPress 架站的好,我想你應該也迫不及待地想用 WordPress 架一個網站出來看看了吧?

所以接下來,我將會手把手帶你完整走一次整個 WordPress 網站的架設流程,只要跟著文章做,即使你是完全不懂程式碼的網路新手,你也能架出一個完全屬於自己的專業 WordPress 網站。

3.1 這篇教學的最終成品

我知道現代人都很忙,而這篇教學很長,你不一定有耐心看完,所以在開始之前,我想先給你看看透過接下來的教學,你最後可以完成的個人網站成品。

下圖這個網站,會是今天這篇教學的最終作品,它是一個我很喜歡的簡潔 WordPress 佈景主題模版 Soledad,可以做出幾乎可以應用在所有行業、領域的個人網站。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 20

你可能會好奇,用這個模版實際做出來的中文網站,會是長怎樣呢?

下圖是我之前使用這個網站模版,幫我客戶做出來的作品:

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 21

你可以看到,這是一個很精美的部落格個人網站,不會像痞客邦一樣有討人厭的蓋版廣告,閱讀起來非常舒服。

但是相信你也看得出來,我其實就只是把上面的文字跟圖片替換掉,所以透過這樣,就可以輕鬆做出一個兼具視覺、與專業感的個人網站了。

架好之後,你可以用它來寫部落格、提供專業技能與服務、推廣聯盟行銷開始賺錢等,你有權透過網站做到你想做的任何事情,並且可以 100% 牢牢地將網站完全掌握在自己手上,不會平白無故因為哪家公司倒閉而消失。

而一般來說,這樣一個簡單的套版網站,大概會是台幣 5 萬元起跳的架設費用。

但接下來,我將會不藏私地把這個方法免費教給你,所以希望你能夠好好把握這個機會學習囉。

好了,看完了前面的範例作品,如果你也想獲得這樣一個漂亮的個人網站,那麼接下來就請你一步一步跟著以下的教學做吧!

WordPress 安裝的部分,主要可以分為 4 個步驟:

  1. 購買網域
  2. 購買主機
  3. 安裝 WordPress 在主機上
  4. 將網域串連至主機

3.2 購買主機 ( Hosting )

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 22
主機就是長這樣,在世界上的某個角落

所謂的網站,其實是架在遠端一台 24 小時運行的電腦上面的,而這台電腦,就是主機。

  • 而一個網站,一定要有一個主機讓你去把網站放在上面,這就是為什麼我們需要主機。

因為你不可能架在自己的電腦上,因為只要你不小心把電腦關機了,你網站也就被關掉了,這樣效率與安全性都不太好。

因此,市面上有許多提供租借主機的主機服務商,讓你可以用大約一年 $ 3000 台幣的價格租借他們的主機,並將網站架在上面。

由於一個 WordPress 網站只會用到一台主機,所以我們只要找一家主機商租借就可以了!在這邊我推薦 Cloudways,詳細的原因跟說明可以參考這篇文章:

延伸閱讀:毫無疑問新手最佳 WordPress 主機 – Cloudways 教學

總結一下,我推薦 Cloudways 的主要原因有:

  • 免費 SSL 憑證:在網址前面有 https 與鎖頭,能夠保護你的網站安全,並提升 Google SEO 排名。
  • 免費搬家:提供免費 WordPress 搬家工具,讓你一鍵將網站搬過來。
  • 客服支援:24/7 全年無休的即時線上客服支援 ( 英文 ),有問題可以馬上線上解決。
  • 自動備份:自動備份最近 14 天網站內容,並且可以一鍵還原,不用擔心網站出事救不回來。
  • 免費試用:Cloudways 提供不綁卡 3 天免費試用,試用過不滿意的話再換家也不遲,不會浪費到你任何一毛錢。
  • 價格便宜:基本方案價格約為 $ 10 USD/月,相當於台幣 $ 300/月,即使是學生也都負擔得起。
  • 收費彈性:方案相當彈性,而且收費是以小時來做計算的,不用怕被綁死一年長約,用多少收多少,不會發生買了之後不去用所產生的浪費問題。
  • 主機規格透明:是 VPS 主機,主機規格看得見摸得著,不會像共享主機一樣有超賣主機的問題。
  • 符合所有流量大小:不管你的流量大或小,都可以隨時依自己的需求更改方案;例如可以升級處理突然暴增的流量,而不用因為網站的成長而被迫搬家。

基於以上種種原因,我選擇了 Cloudways 作為我目前的主機,不過每家主機有每家主機的特點,我這邊也只是做一個推薦給你而已。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 23

不過由於 WebLai 我是 Cloudways 的老客戶了,因此官方有提供優惠給我的讀者:使用我專屬的折扣碼:WebLai30註冊,可以獲得購買主機前兩個月 7 折的優惠。

註冊 Cloudways
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 24

來到 Cloudways 官網,點選中間的 Start A Free Trial

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 25

接下來就照實填寫你的資料,會是你以後登入的帳號,請謹慎填寫,這邊可以輸入我的折扣碼 Weblai30,可以享有前兩個月 7 折的優惠,填好了就按下按鈕繼續。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 26

成功了話,就去你剛剛填寫的信箱收信,並進行驗證。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 27

接著會跳轉到電話驗證的頁面,填寫你的手機號碼進行驗證。

建立主機
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 28

接下來,主要有四個部分要填寫,依序進行:

  1. 在 WordPress 的部分選擇 WordPress 5.3 版,其它的部分是你的應用程式名稱、伺服器名稱、專案名稱,這邊可以隨意取名,因為之後想改隨時可以改。
  2. 這邊是 Cloudways 提供的主機商,推薦你使用 Linode 這家主機商。
  3. 這邊是主機的 RAM 大小,RAM 越大越貴,這邊你可以先選最低的 1G RAM就好,以後想升級隨時可以升級。
  4. 這邊是主機位置,Linode 的話有東京 ( Tokyo )可以選,離台灣比較近,這也是為什麼我們剛剛選 Linode。

方案方面,我是推薦 Linode 的 1G 方案,價格大約是落在 $ 12 USD/月,如果不夠用的話再升級就好,都選好了就按繼續。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 29

接著要等大約 7 分鐘,Cloudways 正在設定你的網站,這段時間可以參考官方在下面提供的搬家教學,如果你已經有 WordPress 網站的話,可以直接將網站搬過來 Cloudways 上面,非常方便。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 30

完成之後左邊會顯示是綠燈的狀態,接著點擊一下中間的圖示。

設定主機
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 31

接下來這邊就是你主機最重要的三項數據,分別是:

  1. IP – 你主機的 IP,有點類似你主機的身分證號碼
  2. SSH 帳號 – 使用你主機的管理員帳號
  3. SSH 密碼 – 使用你主機的管理員密碼

SSH 帳密預設系統會給你一組隨機的號碼,你可以修改成自己習慣的樣子,但是切記不要外流,非常重要。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 32

來到左邊的 Setting & Packages,先點選 Basic,這邊可以參考我的配置,詳細設定我就暫時先不說明,當然使用預設也是可以,只是預設的數值太小之後可能會遇到一些問題。

這次選擇右邊的 Advanced 並且往下滑,一樣可以參考我的配置,把時區跟語言改成符合台灣使用者習慣的樣式,都完成之後一樣按下儲存按鈕。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 33
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 34

最後再選擇右邊的 Packages,一樣可以參考我的配置,把主機環境設定調成最新的版本,這樣出問題的機會也會比較少。

建議 PHP 版本至少要改成 7.3 以上,現在越來越多外掛不支援 7.1 了。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 35
建立 WordPress
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 36

這樣 Server 端都差不多設定完了,接著點最上面的 Application,再點擊 WordPress 的圖示。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 37

這裡是你的 WordPress 的控制面版,主要分為兩個比較重要的區塊:

  1. Application URL – 你的 WordPress 臨時網址
  2. Admin Panel – 你的 WordPress 登入後台網址、管理者帳密
  3. MySQL Access – 你的 WordPress 資料庫名稱與使用者帳密

資料庫我們暫時不會用到,所以我們先點擊區塊 2 中的那個 URL

登入 WordPress
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 38

接下來就會進入到 WordPress 後台,這邊回到剛剛上面那邊,複製 WordPress 管理者帳密並進行登入。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 39

看到這個畫面,就代表你成功進來你的 WordPress 後台了!但目前你看到的網址很長一串很醜,因為這是 Cloudways 給你的臨時網址。

接下來的部分,我會再教你如何購買自己想要的網域,並將其取代。

設定 WordPress
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 40

由於現在一片英文有點難懂,所以你先來後台這邊把語言跟時區調成台灣 ( UTC+8 ),設定完之後按儲存。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 41

最後你就會看到你的 WordPress 後台變成中文了,這樣之後也會比較好進行管理。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 42

回到前台,你就可以看到你的網站已經正式運作了,恭喜你,你已經成功的安裝好 WordPress 了!

3.3 購買網域 ( Domain )

現在你網站的網址,是一串很長很醜的網址,因為這是 Cloudways 給你的臨時網址,所以接下來你必須把它換掉,不然沒有人記得住你的網址是多少,因此,你需要去購買你的專屬網域。

網域其實就是公司主網址,如 google.com、facebook.com 等,算是代表你的網站的指標之一,而世界上每個網域都是獨一無二的,意思是如果你要的網域被別人先取走了,那你就只能換一個了,一種先搶先贏的概念。

跟主機一樣,市面上一樣有很多網域商在賣網域,在這邊我推薦你使用 Godaddy 這家網域商。

我推薦 Godaddy 的理由如下:

  • 可以購買 .tw 結尾的頂級網域,代表你的網站屬於台灣。
  • 24/7 全年無休的即時中文客服支援。
  • 全中文介面,新手好操作與上手
  • 最多人使用,出問題的機率低。
購買網域
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 43

來到 Godaddy 首頁,先點選右上角的「登入」,然後點選「建立我的帳戶」,進行註冊帳號。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 44

建立完帳號之後,找到首頁上方的搜尋欄,並輸入你網站想要的網域名稱 ( ex.example.com ),並進行搜尋。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 45

搜尋結果會告訴你,你想要的網域有沒有人用過了,如果可以用的話,它會上面告訴你,選好之後點選加入購物車。

由於網域是採取先搶先贏的登記制度,因此如果你想要的網域被別人先取走了,那麼你就只能換一個了。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 46

這時候可以在右邊確認到你購買的網域與價格,依照你的網域名稱價格會有所不同,基本上價格大概落在 $ 600 ~ $ 1000 之間,並點選「前往購物車」

網域價格並不會影響網站的表現,建議採取一個簡短、好記的網域名稱就可以了。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 47

接著 Godaddy 會開始推銷一些它們自家的產品,這邊記得全部都改成「不了,謝謝」,並點選前往購物車。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 48

左邊的帳單跟付款方式就照實填寫一下,右邊這邊可以把網域方案改成「1 年」,完成之後按下完成購買。

啟用網域
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 49

接下來會跳轉到這個畫面,點選左上角的「網域」,再點選「所有網域」。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 50

找到你剛剛購買的網域,並點選「驗證聯絡人資訊」。

來到你註冊 Godaddy 的信箱收信,並點選「立即驗證電子郵件」,驗證完畢之後點選「檢視我的網域」。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 51
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 52
管理 DNS
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 53

接著會跳回剛剛的畫面,這時候點選中間的 3 個點點的圖示,再點選「管理 DNS」。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 54

最後如果跳到這個畫面就大功告成了,雖然上面有很多你看不懂的東西,不過別擔心,我們之後會再來這邊進行設定。

3.4 將網域串連至主機 ( DNS )

網域跟主機都備妥了,但是你現在輸入 http://你剛剛購買的網域,你會發現應該是沒有東西的,這是因為,你還有一個很重要的步驟要做:將網域跟主機串連起來。

在串接主機與網域的過程中,你會接觸到一個叫做 DNS ( Domain Name Server ) 的概念,不過在這邊我不會去細講它,你只要知道它的功能是串接主機與網域就可以了。

而要進行 DNS 設定這件事情,你會需要用到一個叫做 Cloudflare 的 DNS 託管服務,什麼是 DNS 託管呢?簡單來說就是把你從網域商購買的網域託管給 Cloudflare 進行管理,如此一來便可以免費使用 Cloudflare 強大的功能:SSL、快取、清除 DNS 快取…等等。

Cloudflare 一個帳號有一個網域的免費額度,所以基本上個人使用的話是綽綽有餘的,不過 Cloudflare 的進階使用有點複雜,基本上連 WebLai 我現在都沒完全摸熟,因此如果你是新手的話,建議先使用 Cloudflare 託管 DNS 就好了。

如果你的網站訪客在台灣居多的話,使用 Cloudflare 可以讓你網站的訪客透過它們在台北的資料中心,以一種叫 CDN 的方式讓網站的載入速度更快速!

啟用 Cloudflare
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 55

來到 Cloudflare 首頁,一樣先申請註冊。

如果你的語言是英文的話,右上角可以切換成繁體中文,閱讀起來比較方便。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 56
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 57

照實填寫你要申請使用的 Cloudlfare 帳號。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 58

這邊就輸入你剛剛購買的網域。

輸入完之後,Cloudflare 應該會寄一封信到你那邊,所以記得到信箱去收信,進行驗證,完成之後就點選回到主選單。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 59
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 60
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 61

因為 Cloudflare 一個帳號有一個網域的免費額度,所以在這邊選擇免費方案。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 62

接著 Cloudflare 會把你所有的 DNS 紀錄搜尋出來,基本上不會有什麼問題,然後就點選下方的 Continue

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 63

接著 Cloudflare 會給你兩個 Nameserver,分別是:

  1. Nameserver 1
  2. Nameserver 2

這是等等設定要用到的東西,先放著不要關掉頁面。

設定網域名稱伺服器 ( Nameserver )
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 64

回到剛剛購買完網域的頁面,拉到下面找到「網域名稱伺服器」,並點選「變更」。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 65
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 66

接著點選「輸入我自己的名稱伺服器」,接著將剛剛給你的 Nameserver 1 與 Nameserver 2 依序複製貼上,再按下儲存。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 67

接著會跳轉回剛剛的畫面,如果這時候畫面顯示「您的名稱伺服器不是由我們託管,我們無法顯示您的 DNS 資料。」,就代表你正確設定了。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 68

這時候回到 Cloudflare,按下確認按鈕。

設定 SSL
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 69

接下來會跳轉到這個畫面,這是一些 Cloudflare 免費提供你的服務,不過我們先不用設定,拉到最下面直接按確認按鈕就好了。

檢查 DNS 是否設定完成
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 70

點擊左上的 LOGO 回到首頁,你會看見你的網域 DNS 正在更新中,由於 DNS 更新是需要一段時間的,有時可能會需要到 24 小時才會完成。

所以建議你可以先去做點別的事情,好了之後 Cloudflare 會發 Email 通知你。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 71

剛剛實測的結果,我這邊大概是花了 15 分鐘的時間,成功的話會在你的網域旁邊顯示綠色勾勾,接著點選按鈕。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 72

進來之後點選上方的 DNS,這時候你的我們已經成功將 DNS 從 Godaddy 轉移到 Cloudflare 上了,大功告成。

於是,我們就可以進行最後一個步驟:「串接 DNS」,完成之後你就可以透過你剛剛購買的網域,在網路上搜尋到你的網站了。

串接 DNS
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 31

接下來回到 Cloudways 中,找到它給你的主機 IP,並將其複製。

回到 Cloudflare 中,按下畫面中 Add record 按鈕並填入:

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 74
  • Type – A
  • Name – @
  • IPv4 address – 複製貼上你的IP
  • TTL – 不用動
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 75

接著,在下面 DNS 的地方就會寫入你剛剛填寫的 A record 了,如果有出現就代表正確設定了。

由於每一家的網域商作法不同,這邊有一個需要注意的地方是,最終你的 DNS A record 應該是要只有 1 個 A record,並且是指向你的主機 IP 的那個,多餘的要進行刪除,否則的話會出現錯誤。

而上圖中有 2 個 A record 是因為我當初在寫教學截圖的時候,並沒有先除掉多餘的 A record,因此在這邊特別註記。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 76

最後回到 Cloudways,來到你網站的 Domain Management 中,在 Primary Domain 的欄位中輸入你的網域,並按下儲存。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 77

點選左邊欄位的 SSL Certificate,填寫你的 Email 信箱以及網域,按下 Install Certificate 的按鈕。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 78

會再跳出一個視窗問你要不要將 http:// 開頭的網址都換成 https:// 開頭,點選確認按鈕。

前往 WordPress
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 79

最後回到你 WordPress 網站的 Access Details,你會發現你的前台與後台的網址都變了,最後我們點擊 Application URL 的網址測試看看。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 80

查看瀏覽器上方,現在已經是用新網址的狀態,並且也有鎖頭,代表你的 https:// 也有成功啟用了!

升級 Cloudways 帳號
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 81

最後記得你的 Cloudways 主機試用期只有 3 天,記得要在期限到期之前綁定信用卡,以免主機遭到關閉唷!

3.5 設定 WordPress

接著在瀏覽器中輸入你剛剛購買的網域,例如我的是 https://timidwinnie.co,你應該會看到你的網站目前長這樣:

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 82

這是 WordPress 內建的基本外觀,很陽春而且不好看,所以接下來,我們要進到 WordPress 網站的後台,並將它修改成我承諾給你的網站外觀。

如果你還有印象,其實我們剛剛曾經在建立主機時進去過一次 WordPress 的後台,那時候有簡單地把 WordPress 的後台介面改成中文。

總之那邊就是 WordPress 的後台,我們要對網站修改任何東西都要去那邊,相當重要,請牢記。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 83

進入 WordPress 後台的方式很簡單,只要在瀏覽器上方輸入 https://你的網域/wp-admin 即可以進入,例如我的是 https://timidwinnie.com/wp-admin

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 84

接下來就會進入到 WordPress 後台登入畫面,帳號密碼請回到剛剛上面的地方,在 Cloudways 主機中,複製管理者帳密並貼上進行登入。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 85
帳號密碼在 ( 3 ) 的地方

如果你忘記在哪取得 WordPress 後台登入網址與帳號、密碼的話,從 Cloudways 主機中的 Application -> Access Details -> Admin Panel 中可以找到。

如果你不需要輸入帳號密碼,就可以直接進來的話,代表你剛剛沒有把視窗關掉或是登出,就照常使用就好,不用擔心。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 86

進來之後,點選左邊工具列中的「設定」-> 「永久連結」,並選取「文章名稱」的選項,完成之後就按下「儲存設定」。

這點是為了讓你網站的網址變得漂亮且乾淨,這樣對於在 Google 上的搜尋排名會比較好。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 87

接著,來到上方的「控制台」 -> 「更新」 -> 並點選「立即更新」,將 WordPress 更新成目前最新版本。

基本上它叫你更新的東西就更新一下,主要是防護一些網路上的自動化惡意程式的攻擊。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 88

到目前為止,你網站的前台應該是長這樣,這代表你已經架設好一個全新的 WordPress 網站了。

3.6 選擇佈景主題

到這邊,總算是前置作業都設定好了,不過我們還剩下最後一件事情:啟用佈景主題

因為剛安裝好的 WordPress 是使用官方預設的佈景主題,功能非常少,非常陽春,比較適合拿來作為個人部落格寫寫日記,並不太像是一個網站,因此,我們需要自行將換成符合我們需求的佈景主題。

首先,我要在這邊先簡單提一下 WordPress 後台最重要的兩個功能:

  1. 佈景主題
  2. 外掛

如果把 WordPress 比作一台電腦的話 ,佈景主題就像是電腦的主機殼、CPU、顯示卡,是不可或缺的;而外掛就像是外接藍芽接受器、耳機、喇叭等,它讓使用者依照自己的需求,去自由地選購、組裝自己所想要的功能,進而成為一台符合自身使用習慣的電腦。

佈景主題是決定你 WordPress 網站功能、以及所有外觀的部分,一個 WordPress 網站可以沒有任何外掛也正常運作,但是卻不可以沒有佈景主題。

但其實說白了,佈景主題就是 WordPress 的衣服,所以我們現在就是要去幫 WordPress 買一件好看的衣服,讓它變成你喜歡的樣子。

不過不同類型的佈景主題,擅長著不同類型的網站,基本上可以依照它們被設計出來的目的,將它們劃分成以下 3 種類型:

  1. 製作部落格網站
  2. 製作形象網站
  3. 製作電商網站

製作部落格網站

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 89

如果你的需求是製作一個可以在上面寫文章,並且透過撰寫業配文、經營聯盟行銷來獲利的網站類型,那麼你在選擇佈景主題的時候,你就應該要去選擇那些標榜可以做為媒體、部落格類型網站的佈景主題。

因為這些主題就是被設計出來做為部落格網站的,所以它們通常會包含相關文章、閱讀更多、無限滾軸、訂閱電子報等與讀者相關的功能,因此,可以幫助你網站上的讀者獲得更舒服的閱讀體驗。

延伸閱讀:如何透過經營部落格賺錢?寫文章其實比你想像中更好賺!

製作形象網站

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 90

如果你的需求是為公司架設起一個對外的形象官網,並提供公司的服務以及業務、客服等聯絡方式,那麼你在選擇佈景主題的時候,你就應該要去選擇與你的產業相關、並且適合製作形象網站的版型。

舉例來說,你是一家餐廳的老闆,那麼你可能會需要在網站上加裝訂位系統的功能,這時候你就該去尋找那些佈景主題的版型有支援訂位的功能,如此一來,你就不需要另外再花錢請人幫你製作新的功能了,可以省下大筆的開發費用。

延伸閱讀:WordPress 主題推薦 – Astra 完整介紹與教學,1 款適合所有人的佈景主題

製作電商網站

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 91

如果你的需求是要架設一個可以上架商品進行販售的品牌購物網站,由於這類型的主題大多數是由歐美廠商開發,所以你在選擇佈景主題的時候,就要先去思考是否能夠換成中文介面、以及符不符合台灣人的使用習慣?否則做出來太像國外網站,這樣可能會影響到消費者的購物流程,並在無形中讓你喪失了訂單。

而基本上在台灣做電商,你會用到 FB 登入、金物流的串接、加購商品、組合商品等功能,因此在尋找電商網站主題的時候,就要一併將這些功能考慮進去,而不能僅僅是看外表順眼就選擇這個主題。

除此之外,因為現在大約有 80% 以上的消費者會透過手機進行購買,因此也要多注意主題在手機介面是否能夠操作順暢。

我自己本人的電商網站作品 Tramper,是用 WoodMart 這款佈景主題製作的。

要去哪裡購買佈景主題?

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 92

一般來說,購買佈景主題有 3 個管道,分別是 WordPress 後台Themeforest獨立開發商

  1. WordPress 後台:你可以在 WordPress 後台的「外觀」 -> 「佈景主題」 -> 「安裝佈景主題」中,而這邊安裝的佈景主題都是有經過 WordPress 官方認證的,所以是非常安全的,並且全部都是免費的,但由於是免費的,因此在功能上也會比較陽春,多半需要另外付費升級成為 Pro 版。
  2. Themeforest:前往 Themeforest 這個網站,這裡的主題價格大多落在 $ 59 USD,雖然便宜到因為沒有 WordPress 官方掛保證,所以並不是那麼穩定與安全,因此建議挑選比較多人討論與使用、並且評價良好的主題。
  3. 獨立開發商:直接向獨立販售的 WordPress 主題開發商購買,例如 StudioPressBrainStormForce 等,這類型的主題通常都比較貴,但品質也會比較好,不過一樣建議你挑選網路上比較多人討論與使用、並且評價良好的主題開發商。

如果你是 WordPress 新手,建議你在挑選主題的時候,一定要選很多人使用的主題,因為這樣在日後遇到問題的時候,才可以比較容易地在網路上找到別人的解決方法,不至於主題突然出現 Bug,而你卻找不到人幫忙解決。

3.7 範例:部落格網站實際操作

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 93

而本篇教學為了滿足大部分人的需求,所以我們選擇使用 Soledad 這個佈景主題來製作部落格網站,也是在文章最前面讓你看到的成品。

Soledad 是一款非常適合製作媒體、部落格網站的佈景主題,我個人認為它非常的好看、以及好上手,並且在設計上也相當符合台灣人的使用習慣,因此是我認為相當適合新手的一個佈景主題。

除此之外,Soledad 是在前面介紹的第 2 種佈景主題購買方式 – Themeforest 購買的,價格是 $ 60 美金一個網站,大約台幣 $ 1800,但是可以終身授權使用,因此算是相當的划算。

不過 Themeforest 購買的佈景主題有一點複雜,如果你是第一次架站的 WordPress 新手可能會不知道怎麼安裝,因此接下來,就請你跟著我的步驟一步步地完成吧!

購買 Soledad
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 94

來到 Soledad 的購買頁面後,點選「Buy Now」進行購買。

Soledad 不定期會推出優惠,像我現在就遇上了 66 折優惠,因此降價成 $ 39 美金,遇到這個機會千萬不能放過。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 95

接下來就照實填寫註冊帳號,並完成購買,這邊就不多做說明。

安裝 Soledad
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 96

購買完成後,點選上方的帳號欄位,並選擇「Downloads」。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 97

找到 Soledad 的部分,點選「Download」 -> 選取「All files & documentation」的選項。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 98

接著應該會自動下載一個 .zip 的壓縮檔到你的電腦中,解壓縮之後,可以留下 soledad.zip 跟 soledad-child.zip 就好,其它不會用到。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 99

回到 WordPress 中,依序點選「外觀」 -> 「佈景主題」 -> 「安裝佈景主題」。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 100

接著再點選「上傳佈景主題」,並先將剛剛留下的 soledad.zip 拖曳至畫框之中,並點選「立即安裝」。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 101

上傳完 soledad.zip 之後,點選「返回 ( 佈景主題 )」,並重複一樣的動作上傳 soledad-child.zip

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 102

不過這次上傳完 soledad-child.zip,改成點選「啟用」,如此一來,我們便成功地啟用了 Soledad 這個佈景主題了。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 103

3.8 一鍵匯入網站 Demo

做到這邊,你可以另外開啟一個視窗,並到網站前台去檢查一下是否正確啟用。

要怎麼到網站前台呢?就是在瀏覽器中輸入 https://你的網域,這時,你應該會發現你的網站改頭換面了!