WordPress Blog 教學|如何用 WordPress 架設部落格/個人網站 (2024)

如何用WordPress架設部落格(Blog)、個人網站的封面

你想知道如何用WordPress架設網誌、食記、旅遊部落格 (Blog) 嗎?這篇筆記會用淺顯易懂的方式跟你分享如何用最簡單、最低的成本的方法,快速架設出一個出色的個人網站/部落格。

我會不藏私地免費把如何架設部落格的方法鋪成階梯,你只要跟著6大步驟操作,就可以省很多時間,少走很多我以前走過的冤枉路,在架站的路上贏過90%以上的新手。

你的WordPress部落格/個人網站將會擁有

🎁 部落格功能
🎁 客製化版型
🎁 自訂個人域名
🎁 自訂個人Logo
🎁 SSL安全憑證
🎁 響應式網頁設計
🎁 搜尋引擎優化
🎁 訂閱電子報功能
🎁 表單功能
🎁 防止駭客功能
🎁 Google Search Console
🎁 Google Analytics

適用部落格類型

以下是常見的部落格類型,如果你還不確定想做哪類型的部落格的話,可以參考看看。

👍 食記
👍 網誌
👍 食譜
👍 旅遊部落格
👍 生活部落格
👍 美妝部落格
👍 留學部落格
👍 遊戲部落格
👍 育兒部落格
👍 書評部落格
👍 影評部落格
👍 政治部落格
👍 宗教部落格
👍 新住民部落格
👍 心情筆記部落格
👍 健身運動部落格
👍 知識分享部落格
👍 工作紀錄部落格
👍 投資理財部落格
👍 語言學習部落格


影片|如何架設部落格 / 個人網站

如果你喜歡用影片的形式來學習的話,可以參考我 YouTube 頻道裡的影片。

喜歡以圖文的形式來學習的話,請往下看下去吧 (圖文的方便快速瀏覽,也比較詳細一些)。

免費WordPress線上教學課程 👍|用Bluehost主機自架高CP值的WordPress部落格/個人網站

👉 系列教學 YouTube 播放清單


以前我還不會架設網站的時候就很希望有一個中文教學是我能無腦一步一步照著按就好了,現在我會架設網站了,我就來做這麼一個可以簡單地照著按、按、按就可以架好個人部落格網站的教學 🐾

或許有些人會把這樣的教學拿去賣錢,不過我以前也受到網路上很多人的幫忙才學會架網站的,所以我想把製作個人部落格的方法免費跟你分享

如果你想支持我的話,歡迎透過這個網站提供的連結購買需要的工具,這樣我就能夠獲得一些收入。有些工具有諾特斯觀眾的專屬優惠折扣,希望能幫你省一些架設網站的成本。

小默契
# 代表架設網站的「大步驟」。
🚩 代表每個步驟細分的「小行動」。
💡 代表你需要了解的「小知識」。

用WordPress架設部落格(Blog)

一開始我會先跟你分享,用WordPress架設部落格(Blog) /個人網站前需要知道的事情。

如果你想直接開始架設Blog可以點擊下方按鈕。

架設部落格 (Blog) /個人網站有什麼好處?

《你要如何衡量你的人生?》這本書的作者說過:「我們把自己的時間、精力和才華投入在什麼地方,我們的人生就會呈現相同的樣貌。」而我覺得架設自己的部落格 (Blog) 是一個值得我們投入自己的時間、精力和才華的地方。

架設自己的Blog的好處

  • 學會架設網站這個新技能。
  • 可以自己設計屬於自己的Blog版型。
  • 可以用文字、圖片抒發心情、記錄生活。
  • 可以透過Blog賺取被動收入與主動收入。
  • 可以把自己的Blog發展成網路事業。
  • 可以透過Blog跟自己有相同興趣的人有所連結。
架設部落格(Blog)個人網站的好處
架設部落格 (Blog) 個人網站的好處

⭐ 更多免費筆記
如何架設可以賺錢的網站

為什麼選擇WordPress來架站?

WordPress是一個免費的架站平台,全世界有41%的網站是用WordPress架設的,而且這個比例每年都逐漸提高

WordPress.org官網指出WordPress有41%的全網使用率
WordPress.org官網指出WordPress有41%的全網使用率

我會選擇用 WordPress,更準確來說是WordPress.org來架設個人部落格的主要原因是品牌跟自由 (你現在觀看的這個教學也是教你使用WordPress.org來架設網站)。

WordPress其實有分成WordPress.com跟WordPress.org,用錯的話長久下來就虧大了,你果你不清楚這兩個的差別的話,可以看我之前做過的影片。

wordpress.com和wordpress.org比較👑|WordPress中文教學|用哪個架設網站比較好?

你可能聽過很多人用痞客邦、Blogspot (Blogger) 等等來寫Blog,但使用別人的網站來寫部落格比較沒有建立自己的品牌的感覺。而且版面設計、功能限制也很多,甚至也有可能像過去無名小站倒閉的風險。只要痞客邦或Blogspot倒閉,你經營的內容或努力寫的文章可能就沒了。

相對來說使用WordPress架設網站的話,我們可以有自己的域名建立品牌形象,在設計與功能也都能客製化調整,也可以很簡單地備份你的文章。所以,我推薦使用WordPress來寫Blog。

以下我還列了幾個WordPress的優點,你可以參考看看。

WordPress的優點

  • 免費。
  • 開源軟體。
  • 不用學程式就可以架站。
  • 可以客製化各種設計、排版。
  • 可以根據需求增加功能。
  • 不只可以架部落格,還可以做網路商店、官方形象網站等等。
  • 可以進行搜尋引擎優化 (容易在Google有好排名)。

講完優點還是要講一下缺點,沒有一個東西是完美的。

WordPress需要比較長的學習時間,大概需要幾天到幾週。不過不用擔心,只要跟著這篇教學,你一定可以架好你的個人部落格。

WordPress跟其它架站平台比較
WordPress跟其它架站平台比較

⭐ 更多免費筆記
什麼是WordPress?

架設個人部落格我們需要什麼呢?

想要架設自己的部落格,我們需要3樣東西,第一個就是我們剛剛提到的WordPress。WordPress是免費的。但要使用這個免費WordPress軟體,我們需要購買主機來安裝WordPress軟體,然後註冊自己的域名 (Domain name)。

架設Blog/個人網站需要的東西

  • WordPress (免費)
  • 主機 (付費)
  • 域名 (付費)

什麼是域名?

如果把部落格/個人網站當作家的話,域名簡單來說就是家 (網站) 的門牌,讓全世界的人可以找到你的家。別人只要打你的域名在網址列,按下Enter (輸入),就可以找到你的網站。

像是,你想要在蘋果的官網買手機,你只要在網址列輸入「apple.com」,按下Enter,就可以進入蘋果的官方網站。取域名是我最喜歡的步驟,因為很有趣,你可以想像自己是CEO,幫自己的事業取一個品牌名稱

域名(Domain Name)
域名 (Domain Name)

我把取一個好域名值得注意的地方整理起來,如下:

  • 有品牌感
  • 簡短
  • 好記
  • 最好「.com」結尾 (如果有人取了「.net」、「.org」 也不錯)
  • 不要拼錯字 (之後要改很麻煩)

當然在想域名的時候不要過度思考,遵從你的內心,完成比完美更重要 (Done is better than perfect)。

像我的這個網站的域名是「notesstartup.com」,主要是因為我叫諾特斯 (Notes),我想要在這個網站分享有關如何架設網站的資訊,提倡把網站當作是自己的事業的概念,所以後面加上創業的英文 (Startup) 就成了「notesstartup.com」。

註冊域名要錢嗎?

要的,註冊域名第一年約$12.99美金 ($390台幣) ,在後面的段落會跟你分享第一年免費註冊的方法。第一年過後,續訂的價格是18.99美金/年 ($570台幣/年)。

備註:
在這篇筆記中,美金匯率以30做估算,如果現在匯率比30還低,換算成台幣的價格會更便宜。

很多知名品牌為了避免跟自己的品牌類似的域名被有心人士註冊走,而導致品牌形象受損,他們甚至會花很多錢在購買很多個類似自己品牌的域名。

⭐ 更多免費筆記
域名/網域名稱/domain name是什麼?(詳細)
Bluehost網域/域名的費用要多少?

什麼是主機?

如果把部落格/個人網站當作家的話,主機就是土地,我們要租一塊地才能蓋自己的家。通常我們要找資訊,會說去Google,但是我們的網站資料其實不是放在Google上,而是放在自己的主機上。Google就像是導遊,帶大家找到我們在主機存放的資料。

主機才是真正存放網站資料的地方。有自己的主機的好處是,我們對自己網站的資料有100%的掌控權,可以想寫什麼就寫什麼,不會被刪掉,或突然違反什麼條約,而導致部落格被關掉。

主機(Hosting)
主機 (Hosting)

主機要錢嗎?

要的。每個月大概$3–$50美金。大概是架網站初期會花最多成本的地方。

不過沒關係,用Bluehost主機的話,我有幫你爭取到諾特斯觀眾才有的專屬28折優惠,只要$2.75美金/月 (原價$9.99美金/月),以購買1年的方案為例,總共可以省$86.88美金(約省2606台幣),希望這些折扣對你有幫助。

備註:
在這篇筆記中,美金匯率以30做估算,如果現在匯率比30還低,換算成台幣的價格會更便宜。

Bluehost logo

為什麼選Bluehost?

因為我覺得Bluehost是對新手最友善的主機。使用Bluehost主機的話,剛剛提到的WordPress、域名、主機,會一次幫我們整合起來,在設定上不會出問題。

很多人一開始會不小心用到一些爛主機或太高階的主機。太爛的主機效能不夠,太高階的主機除了太貴之外,還要花很多時間去設定,還沒開始寫部落格就把自己搞得灰頭土臉,我覺得很不值得,我們應該要多把時間花在製作內容上。

我記得我還在台大讀書的時候架了我的第一個網站就是使用Bluehost

我在學生時期就開始邊打工邊嘗試開始自己的網路事業。我還記得那時候我利用打工的空檔,用郵局金融卡買了Bluehost主機 (對,當時我還是學生沒有信用卡),一開始不知道為什麼還刷不過,後來是把郵局金融卡綁訂PayPal才付款成功。

雖然現在看起來很便宜,但對我當時來說,幾千塊也是一大筆錢,那時我花了好多時間看要用哪個主機,看了很多國內外分析文章,最後選擇了Bluehost,到現在還在用。Bluehost真的是蠻不錯的,我蠻推薦新手使用Bluehost來架設網站。

Bluehost logo

我把我長期使用Bluehost過後體驗到的優點整理下來:

Bluehost優點

  • 對新手非常友善。
  • 值得信賴,是WordPress官方推薦的主機。
  • CP值超高,$2.75美金/月 (諾特斯觀眾專屬,原價$9.99美金/月),該有的功能都有。
  • 客服很棒,有問必答。
  • 第一年免費註冊域名 (價值約$12.99美金)。

Bluehost缺點

  • 屬於共享主機,速度較慢。
  • 對速度有要求的話,需要另外做網站速度優化,或升級高階的雲端主機。

我的手繪動畫網站「notesscribe.com」就是用Bluehost架的,每個月都持續帶給我被動收入與案子來源。目前在幾個Google關鍵字排行都在第一頁,甚至是第一名,為我帶來不錯有動畫案子來源還有被動收入。

最近我幫我的女友霧痴架個人部落格「pipichocho.com」,我也是建議她用Bluehost主機架設網站,很多她手帳圈、文具圈的朋友都很喜歡她新架好的部落格。

用Bluehost主機架設WordPress網站要花多少錢?

透過諾特斯觀眾的專屬優惠連結購買高CP值Bluehost主機,每個月最低只要$2.75美金 (約$83台幣),還會送你1年免費域名。也就是說,以購買1年的方案為例的話,只要$33美金 (約$990台幣),就可以開始架設屬於自己的網站了。

使用高階主機+註冊域名費用,可能每年超過$200美金 (約$5600台幣),而且設定起來也比較複雜,所以建議新手可以使用Bluehost主機來架設網站,比較便宜,也比較容易。

我覺得最基本的方案對新手來說就很夠用了,這個教學會以Bluehost主機的Basic(基本)方案為例,以下是我整理的規格與費用表格。

項目

WordPress + Bluehost (一年)

主機

原價:$9.99美金/月 ($300台幣/月)
特價:$2.75美金/月 ($83台幣/月)

域名

第1年免費

SSL憑證

免費

訪客數量

無限

總費用

$33美金
(約990台幣)

總節省費用
(透過優惠連結)

省$86.88美金

(省$2606台幣)

優惠連結

備註:
1. 主機優惠只有首次購買時才有,續約時價格會變回原價。
2. 域名免費第一年後的價格約$18.99/年 (約570台幣/年)。

有推薦Bluehost主機之外的其他主機嗎?

Bluehost主機的價格是每個月$2.75美金/月 (約$83台幣/月),CP值非常高。

但如果你的單月預算比較高,有超過$10美金/月 (約$300台幣/) 的話,可以考慮直上Cloudways主機。使用Cloudways主機,網站速度會超級快

如果你想要使用Cloudways主機架設網站的話,可以參考這篇 Cloudways主機架站教學。如果還不確定自己適合哪個主機的話,可以參考這篇 Bluehost主機 vs Cloudways主機

#1 開始架設網站 (使用Bluehost主機)

在第1步驟,我會教你如何透過Bluehost購買主機註冊域名安裝WordPress,也會教你一些WordPress重要的基本設定

🚩 點擊Bluehost優惠連結

  • 點擊下方優惠連結 (點擊連結會自動套用專屬優惠)
Bluehost logo

如果你要購買 Bluehost 主機,歡迎使用我提供的推薦連結。

這樣不僅可以支持我繼續製作更多能幫助到大家的免費內容 (我可以獲得一些收入),還可以讓你解鎖我爭取到專屬優惠價格 $2.75 美金 / 月 (全網最便宜!)。

如果你透過其他方式進入到 Bluehost 的官網,就沒辦法享受到這個優惠價格。

  • 點Get Started Now (現在開始) 按鈕
點擊Get Started Now (現在開始) 按鈕,開始購買Bluehost主機
點擊Get Started Now (現在開始) 按鈕,開始購買Bluehost主機

🚩 選擇價格方案

如果想架設一個網站,建議選擇 Basic (基本) 方案,假如果想要架設多個網站,建議選擇 Plus (加) 方案。

大多數新手一開始只需要架設一個網站,所以我們以Basic方案做示範。

  • 新手選最便宜的Basic (基本) 方案
  • 按Select (選擇) 按鈕
選擇Basic (基本) 方案
選擇Basic (基本) 方案

🚩 註冊/設定域名

  • 填寫域名 → 按Next (下一步) 按鈕。
  • 如果還沒想好 → 按I′ll create my domain later (我之後再創建域名)。
在Bluehost免費註冊新域名
在Bluehost免費註冊新域名

🚩 註冊Bluehost帳戶

  • 選擇註冊新域名的人,如果輸入的域名可以使用會出現下面的訊息。
域名可以使用(沒有其他人註冊)會顯示的訊息
域名可以使用 (沒有其他人註冊) 會顯示的訊息
  • 填寫帳戶資訊 (Account Information)
填寫Bluehost帳戶資訊(姓名以以周杰倫,地址以101為例)
填寫Bluehost帳戶資訊 (姓名以以周杰倫,地址以101為例)

💡 怎麼把中文地址翻譯成英文地址?

在台灣的話,可以利用中華郵政的中文地址英譯服務,把中文地址翻譯成英文地址。

🚨 郵遞區號打3碼即可,打6碼可能會出現錯誤訊息。

錯誤訊息:
Zip / Postal Code did not match country requirement

解決方法:
郵遞區號打前3碼就好。

中華郵政的中文地址英譯服務
中華郵政的中文地址英譯服務
  • 選擇套餐資訊 (Package Information)

選擇Bluehost主機租用方案

在帳戶方案 (Account Plan) 可以選擇一次租用12個月或36個月。

下方為Basic(基本)方案中,12個月方案與36個月方案比較表:

項目

一次租用12個月

一次租用36個月

原價

$9.99美金/月
(約$300元台幣/月)

$9.99美金/月
(約$300台幣/月)

特價

$2.75美金/月
(約$83台幣/月)

$4.95美金/月
(約$149台幣/月)

折扣

28折

5折

總節省費用
(透過優惠連結)

省$86.88美金

(約省2606台幣)

省$181.44美金
(約省$5443台幣)

優惠連結

備註:
主機優惠只有首次購買時才有,續約時價格會變回原價。

這個教學以Basic(基本),一次租用12個月的方案做示範。

選擇Bluehost主機的方案
選擇Bluehost主機的方案

勾選與取消套餐加購項目 (Package Extras)

諾特斯建議新手的2種選擇:

1. 適用大多數新手

加購項目全部取消。

基本上這邊的加購項目大多都不必要,取消可以為你省一些不必要的成本,之後想要也可以在Bluehost後台購買。

取消所有Bluehost加購選項
取消所有加購選項

2. 適用注重隱私的人

只選擇加購域名隱私與保護 (Domain Privacy + Protection)。

這個項目勾選後可以保護你的個資,以後別人Google你的域名的時候,就查不到你填的資訊 (像是姓名、地址、電話等等)。

取消所有加購選項,只留下Domain Privacy+Protection (適用注重隱私的人)
取消所有加購選項,只留下Domain Privacy+Protection (適用注重隱私的人)
  • 填寫付款資訊 (Payment Information)
填寫付款資訊
填寫付款資訊
  • 勾選同意自動更新
  • 按submit (提交) 按鈕
勾選同意條款並按Submit(提交)按鈕
勾選同意條款並按Submit (提交) 按鈕

🙋‍♂️ 提交時如果遇到無法付款的請形,我有幫觀眾問過Bluehost客服,可以透過更換其它瀏覽器 (Firefox、IE、Edge、Chrome等等) 解決。更換瀏覽器之後記得要再次點這個連結,28折優惠才會生效!

  • 按Create your account (創建你的帳戶) 按鈕
付款成功,並開始創建Bluehost帳戶。
付款成功,並開始創建Bluehost帳戶。
  • 設定Bluehost密碼
創建Bluehost帳戶密碼
創建Bluehost帳戶密碼
  • 登入Bluehost帳戶
帳戶創建成功,點擊按鈕開始登入Bluehost帳戶。
帳戶創建成功,點擊按鈕開始登入Bluehost帳戶。
登入Bluehost帳戶
登入Bluehost帳戶

🚩 在Bluehost自動安裝WordPress

  • 開始創建網站
開始Bluehost引導流程,點擊Create your website(創建你的網站)按鈕。
開始Bluehost引導流程,點擊Create your website (創建你的網站) 按鈕。
  • 跳過Bluehost所有引導流程

我會從頭開始教你如何創建一個WordPress網站,Bluehost的引導流程可以跳過,都先選擇Skip this step (跳過這個步驟)。

點擊skip this step(跳過此步驟)
點擊skip this step (跳過此步驟)
點擊skip this step(跳過此步驟
點擊skip this step (跳過此步驟)
  • 點擊左邊的Limitless customization(無限制客製化)選項,Bluehost會為你自動安裝WordPress.org。右邊的選項是有附加Bluehost提供的Website Builder(網頁編輯器),選右邊反而會限制網站的功能
點選左邊的選項,開始安裝WordPress.org軟體。
點擊左邊的Limitless customization(無限制客製化)選項,開始安裝WordPress.org軟體
  • 繼續跳過引導步驟
點擊skip this step(跳過此步驟)
點擊skip this step (跳過此步驟)
往下拉,選擇skip this step(跳過此步驟)。
往下拉,選擇skip this step (跳過此步驟)
  • 點擊Get Started (開始) 按鈕,進入Bluehost後台
點擊Get Started開始 1
點擊Get Started (開始) 按鈕
  • 正式進入Bluehost後台
    一開始網站仍為暫時域名,過一段時間後,會自動變成當初註冊的域名。
進入Bluehost後台(一開始網站仍為暫時域名,過一段時間後,會自動變成當初註冊的域名)
Bluehost後台

🚩 登入WordPress並設定密碼

  • 在Bluehost為你自動安裝WordPress後,會自動幫你轉跳到WordPress後台。
  • 到側邊欄「Users」(使用者) → 「All users」(全部使用者)
  • 點擊使用者
點擊使用者
點擊使用者
  • 往下拉 → 點擊「Set New Password」(設定新密碼) 按鈕 → 設定WordPress密碼
設定新WordPress密碼
設定新WordPress密碼

🚩 收Bluehost寄的重要驗證信件

  • 登入Email
  • 找到WHOIS域名註冊驗證信件
到信箱收取域名註冊驗證信
到信箱收取域名註冊驗證信
  • 點擊Verified your Email (驗證你的Email)
點擊Verified Your Domain(驗證你的域名)按鈕
點擊Verified Your Domain (驗證你的域名) 按鈕

🚩 認識WordPress後台、WordPress前台

  • 前台:觀眾/訪客會看到的畫面
    路徑:xxxxxx.com (xxxxxx.com請帶入你的域名)
前台
前台
  • 後台:網站管理者才看得到的畫面
    路徑:xxxxxx.com/wp-admin (xxxxxx.com請帶入你的域名)
後台
後台

⭐ 更多免費筆記
WordPress後台教學 (未來開放)

💡 如何登入WordPress後台?

從Bluehost登入 (第一次)

  • 登入Bluehost後台
  • 選「My site」 (我的網站) → 「Manage Site」(管理網站)
透過Bluehost後台登入WordPress
透過Bluehost後台登入WordPress

從網址列登入 (後續登入較方便)

  • 在任何瀏覽器的網址列打:「你的域名/wp-admin」。

範例

域名:notesblogdemo.com

輸入:notesblogdemo.com/wp-admin

在網址列輸入:你的網域/wp-admin(以示範網站notesblogdemo.com為例)
在網址列輸入:「你的域名/wp-admin」
  • 選擇「Log in with username and password」(用使用者名稱跟密碼登入)
選擇Log in with username and password(用使用者名稱跟密碼登入)
選擇「Log in with username and password」(用使用者名稱跟密碼登入)
  • 打使用者名稱/Email。
  • 密碼打之前設好的密碼。
輸入使用者名稱/Email和密碼
輸入使用者名稱/Email和密碼

🚩 做WordPress一般設定

  • 進入WordPress後台 → Settings (設定) → General (一般)
  • 把WordPress語言改成繁體中文 → 儲存
  • 填寫網站標題
  • 填寫網站說明
  • 選擇日期格式
  • 選擇時間格式
  • 儲存所有一般設定
WordPress一般設定
WordPress一般設定

🚨 請不要自行改WordPress位置 (網址)、網站位置 (網址)

WordPress位置 (網址)、網站位置 (網址) 原本會顯示類似「http:// box2123.temp.domains/xxxxxx」。這是Bluehost給你的暫時域名,讓你在等待域名設置的期間,可以先順利架站。

Bluehost給的暫時域名
Bluehost給的暫時域名

過幾個小時之後,Bluehost會自動幫你修改成你當初註冊的域名,請不用緊張。

過一段時間Bluehost會自動幫你改成你當初註冊的域名
過一段時間,Bluehost會自動幫你改成你當初註冊的域名

自己修改的話會導致無法登入WordPress,請小心!

如果已經不小心修改了的話,可以聯絡Bluehost客服。

🚩 設定預設永久連結

  • 進入WordPress後台 → 「Settings」(設定) → 「永久連結」
  • 改成文章名稱
永久連結設定
永久連結設定

這樣以後文章連結預設就會變成文章名稱,如果不小心忘記自己自訂的文章連結,也不會出現亂碼。

#2 安裝WordPress主題

在第2步驟,我會帶你了解什麼是WordPress佈景主題,然後跟你分享一個很好的免費佈景主題,並教你怎麼安裝它

💡 WordPress佈景主題的功能是什麼?

WordPress佈景主題 (或簡稱主題) 是可以控制網站版型設計的工具。透過主題,你可以像玩遊戲換造型那樣,動動手指一按就可以更改網站外觀。

WordPress佈景主題可以調控的東西

  • 文字大小、顏色
  • 網站版型
  • 頁首、頁尾
  • 文章設計
  • 頁面設計
  • 側邊欄設計
  • Logo位置

🚩 看看使用預設主題網站的樣子

WordPress預設主題的樣子
WordPress預設主題的樣子

🚩 新增佈景主題

  • 到WordPress後台 → 「外觀」 → 「佈景主題」
點擊WordPress側邊欄外觀的佈景主題
點擊WordPress側邊欄外觀的佈景主題
  • 點擊「安裝佈景主題」
點擊「安裝佈景主題」
點擊「安裝佈景主題」

你可以選擇任何你想要的佈景主題,這個教學會以Blocksy佈景主題為例。

💡 為什麼選擇免費Blocksy佈景主題?

Blocksy是我最喜歡的WordPress主題之一,這個網站就是用Blocksy主題製作的。這個主題是我目前測試過所有免費WordPress主題當中最好的,這個主題給我一個很簡約創新的感覺。

它有很多免費的功能在其他主題是要付費的,像是固定/透明頁首固定側邊欄網站客製化調色盤、電腦/手機/平板響應式設計 (Responsive Web Design) 等等。

你可以去試試其它主題,試過之後會發現Blocksy免費的功能就給得很大方,而且這些功能永久免費。在所有WordPress主題中,是一個很簡單而強大的存在。

Blocksy的logo

Blocksy優點整理

  • 簡約好看 (我喜歡簡約一點的設計)。
  • 免費版就很夠用 (跟其它免費主題比起來有更多功能)。
  • 強大 (甚至比很多付費主題有更強大的功能)。
  • 公認最快的WordPress主題之一。
  • 操作簡單,容易使用。
  • 可以客製化的頁首、頁尾。
  • 全網站調色盤 (很好用,不用每次都手動調整)。
  • 內建固定側邊欄功能。
  • 手機/平板響應式設計。
  • 內建其它社交平台分享功能。

我自己一開始是使用免費版的Blocksy主題,後來跟客服聯絡之後,覺得很喜歡這家公司,不想白用這些好功能,想要支持一下,再加上我想要讓選單可以有小圖標,所以就果斷升級付費版了。

但對成本有限的人來說,其實免費版的Blocksy就很夠用了,在一大堆WordPress主題當中是一個很好的選擇。

我們來安裝免費Blocksy佈景主題。

  • Blocksy網站點擊右上角「Free Download」按鈕,免費下載Blocksy佈景主題。
在Blocksy官網點擊Free Download(免費下載)按鈕
在Blocksy官網點擊Free Download (免費下載) 按鈕
點擊Download(下載)按鈕
點擊Download (下載) 按鈕
  • 上傳Blocksy佈景主題
點擊上傳佈景主題按鈕
點擊上傳佈景主題按鈕
上傳下載好的Blocksy主題zip檔
上傳下載好的Blocksy主題zip檔
  • 安裝 Blocksy → 啟用 Blocksy
點擊立即安裝按鈕
點擊立即安裝按鈕
點擊啟用
點擊啟用

🚩 看看安裝Blocksy主題之後網站的樣子

安裝完Blocksy主題後網站的樣子(簡約、乾淨)
安裝完Blocksy主題後網站的樣子 (簡約、乾淨)

#3 安裝WordPress外掛

在第3步驟,我會跟你介紹什麼是WordPress外掛,然後教你怎麼安裝WordPress外掛,也會跟你分享一些我覺得很好用的免費WordPress外掛

💡 什麼是WordPress外掛?

WordPress外掛是能擴展你的網站功能的工具。就像是你手機的APP那樣,只要安裝了,就可以讓你的手機有特殊功能。

就像手機APP那樣,WordPress外掛有免費的,也有付費的。付費的外掛通常是一開始基礎功能免費,進階功能要付費的模式。

我的觀念是能用免費的就用免費的,真的有需要再付費就好。所以,我在這個WordPress Blog 教學會跟你講我花很多時間搜尋、研究、比較後,找到的免費且強大的外掛。

🚩把不需要用到的外掛刪除

安裝完WordPress之後,它會為我們自動安裝一些外掛。 我們要先把不會用到的外掛刪掉。之後想要也還可以再安裝回來。刪掉不會用到的外掛的好處是可以讓網站速度變快,畫面也變更簡潔。

  • 到WordPress後台 → 「外掛」 → 「已安裝外掛」
  • 先停用外掛,再刪除所有預設外掛
在外掛的已安裝外掛停用並刪除預設外掛
在外掛的已安裝外掛,停用並刪除預設外掛

🚩 學習如何安裝外掛

  • 到WordPress後台的側邊欄 → 「外掛」 → 「安裝外掛」

安裝外掛有兩種安裝方法:

① 透過搜索欄安裝WordPress外掛

  • 搜尋外掛 → 輸入你想安裝的外掛
透過搜索欄安裝WordPress外掛
透過搜索欄安裝WordPress外掛
  • 點擊「立即安裝」按鈕 → 點擊「啟用」按鈕
點擊「立即安裝」按鈕
點擊「立即安裝」按鈕
點擊「啟用」按鈕
點擊「啟用」按鈕

② 透過自己上傳外掛來安裝外掛 (以Rank Math外掛為例)

  • 到Rank Math官網下載免費外掛 (要下載其他外掛就去它的官網下載,步驟都類似)
點擊「DOWNLOAD FOR FREE」按鈕免費下載Rank Math外掛
點擊「DOWNLOAD FOR FREE」按鈕免費下載Rank Math外掛
  • 點擊「上傳外掛」按鈕 → 上傳自己從外掛官網下載的外掛zip檔
透過自己上傳外掛來安裝外掛
透過自己上傳外掛來安裝外掛
  • 點擊「立即安裝」按鈕 → 點擊「啟用」按鈕
點擊「立即安裝」按鈕
點擊「立即安裝」按鈕
點擊「啟用外掛」
點擊「啟用外掛」

🚩 安裝這個教學需要用到的外掛

① Blocksy Companion
② Really Simple SSL
③ Rank Math

  • 安裝完Rank Math需先連結帳戶才能開始使用。
  • 點擊側邊欄的「Rank Math」
點擊側邊欄的Rank Math
點擊側邊欄的Rank Math
  • 點擊「Connect Your Account」按鈕開始連結你的帳戶
點擊「Connect Your Account」按鈕連結你的帳戶
點擊「Connect Your Account」按鈕連結你的帳戶

可以選擇Google或Facebook帳戶連結

連結Facebook或Google帳戶
連結Facebook或Google帳戶

💡 諾特斯有推薦什麼好用外掛?

  • Blocksy Companion → 強化Blocksy主題的功能
  • Really Simple SSL → 讓你的網站有安全鎖頭 (SSL憑證)
  • Rank math → 幫助你提升Google排名
  • Site Kit by Google → 分析網站數據
  • Wordfence Security → 防止駭客入侵
  • Loco Translate → 翻譯其它外掛

#4 新增部落格文章、頁面、選單

在第4步驟,我會跟你分享如何在WordPress網站新增文章頁面選單。包括在文章、頁面新增圖片、影片、自訂連結,還有自訂頁首選單等等。也會跟你分享重要的網站/部落格搜尋引擎優化 (SEO) 的技巧,讓你的文章、頁面可以出現在Google搜尋的第一頁。

💡文章 (post) 跟頁面 (page) 的差別

在WordPress裡,當我們想打一些內容,可以選擇建立文章或頁面,但是這兩種類型差在哪裡呢?這個問題是WordPress新手一定會遇到的問題。

要用文章還是頁面來發佈,需要根據你的內容來判斷,以部落格來說,大部分內容都該用文章來建立,以下給你一個簡單的準則。

文章

區分方法:

  • 文章會有作者
  • 文章會有分類標籤
  • 文章會有發佈時間更新時間

備註:

這些區分方法是指 WordPress預設的一般狀況,網站管理者有可能會隱藏作者、分類/標籤、發佈時間/更新時間。

使用時機:

會想頻繁分享的內容

例如:

  • 你的部落格文章 (食記、網誌、任何你想長期分享的主題)
  • 新資訊 (像是新ipad的功能、旅遊資訊)

你現在看到的這篇筆記,就是用文章來建立的,但因為我叫諾特斯 (Notes,筆記),所以我特別把我的文章都叫做筆記。

頁面

區分方法:

  • 頁面不會有作者
  • 頁面不會有分類標籤
  • 頁面不會有發佈時間更新時間

備註:

這些區分方法是指WordPress預設的一般狀況,網站管理者有可能會自己新增作者、分類/標籤 (需使用外掛)、發佈時間/更新時間。

使用時機:
不會很頻繁更新的內容

例如:

  • 關於我
  • 聯絡資訊
  • 服務項目

你可以參考我的網站,以下這些都是用頁面做的。

諾特斯網站的頁面

🚩 刪除預設文章

  • 到WordPress後台 → 「文章」 → 「全部文章」
  • 選取預設文章「Hello world!」 → 點擊「移至回收桶」
把預設文章移至回收桶
把預設文章移至回收桶

🚩 新增第一篇文章

  • 到WordPress後台 → 「文章 」→ 「新增文章」
WordPress文章介面
WordPress文章介面

這個教學,我以旅遊部落格當作範例。我先教你怎麼寫第一篇文章。

我在台大讀研究所的時候,有一次做完實驗和朋友在附近巷子吃晚餐。原本就只是隨便聊聊,講到是不是該一起出國玩了。原本我們只是起鬨說:「走呀!走呀!」。沒想到我們吃完後,馬上真的訂機票,跟教授請好假,幾天後,就飛往沖繩開始我們6天5夜的沖繩自駕旅行了!

我就以這次有趣的經驗為標題,寫這個旅遊部落格的第一篇文章。

這邊我跟你分享我寫文章的架構。

WordPress文章架構
文章架構

新增標題

  • 打上標題:沖繩自由行|一趟說走就走的旅行。

新增文章段落

  • 段落 (一般文字,非標題) 直接打就可以了。

💡 標題標籤 (Heading Tags) 的功能

標題標籤用得好,可以讓我們的文章更容易爬到google搜尋的第一名。

標題標籤可以讓文章有階層,這可以讓google更容易讀懂我們的文章,也就進而讓我們的文章有更高的機率在google搜尋有好的排名。

標題標籤有H1—H6。H1 (Heading 1) 代表第一階,H2 (Heading 2) 代表第二階,以此類推。

標題標籤怎麼用呢?

主標題 → H1 (預設)
副標題 → H2
其他小標題 → H3、H4、H5、H6

通常一篇短文章用H1、H2就很夠了,比較長的文章的可以用H1、H2、H3

文章主標題在WordPress裡預設是用H1,我們不用特別去調。

副標題,我們則需要自己設成H2。

因為這是示範教學,我用中文假文產生器先生產一些假的文章內容,好讓你知道文章寫好後大概長什麼樣子。

新增標題標籤

  • 點擊「+」
  • 選擇「標題」區塊
在文章新增標題區塊
在文章新增標題區塊
  • 選擇標籤 (H2—H6)
  • 輸入標題文字
輸入標題並選擇標籤階層(H2-H6)
輸入標題並選擇標籤階層 (H2—H6)

新增圖片

如何在文章新增圖片?

① 從文章介面上傳

從文章介面上傳的方法適合一張一張上傳

  • 點擊區塊右邊的「+」
  • 點擊「圖片」
新增圖片區塊
新增圖片區塊
  • 圖片區塊 → 點擊「上傳」按鈕插入圖片
點擊「上傳」按鈕來上傳圖片
點擊「上傳」按鈕來上傳圖片
  • 點擊圖片 → 右上角的「齒輪」→ 區塊 → 加入替代文字 (Alt Text)
新增替代文字
在圖片新增替代文字
  • 點擊文章內的圖片 → 右上角的「齒輪」→ 「區塊」 → 進階設定 → 在「title 屬性」加入文章標題
在圖片新增標題文字
在圖片新增標題文字

💡 替代文字 (Alt Text) 是什麼?

替代文字 (Alt Text) 是用來描述圖片的文字,為了給無法看到圖片的觀眾看,跟告訴搜尋引擎機器人圖片的內容。

當圖片因為某些原因無法顯示的時候,瀏覽器也會把圖片用替代文字顯示。

💡 圖片標題 (Image Title) 是什麼?

圖片標題是當你滑鼠移動到圖片時會顯示的文字

💡 替代文字跟圖片標題,哪個對搜尋搜尋引擎優化 (SEO) 比較重要?

替代文字是比較重要的,因為搜尋引擎機器人會看它。

所以,我們可以適當地把關鍵字放在替代文字裡面,讓我們的文章在特定關鍵字有機會有更好的排名。

舉例來說,我想讓文章在「沖繩 象鼻岩」這個關鍵字有比較好的排名的話 ,就可以在替代文字加入像是「沖繩必拍,巨大的象鼻岩 。」這樣的描述文字,如果的有人搜尋「沖繩 象鼻岩」的話就更有機會找到我的文章。

更棒的是,在圖片的替代文字加入「沖繩 象鼻岩」這組關鍵字的話,之後有人在google搜尋「沖繩 象鼻岩」就有機會找到我放的圖片。所以我們要好好利用替代文字這個功能。

① 從媒體庫上傳

從媒體庫上傳的方法適合批量操作,可以一次把替代文字跟標題打好再一次從文章介面用「媒體庫」插入

  • 選擇「新增媒體」
點擊「媒體庫」來新增圖片
點擊「媒體庫」來新增圖片
  • 點擊「上傳」→ 透過「拖曳」或「選取檔案」批量上傳圖片
在媒體庫上傳圖片
在媒體庫上傳圖片
  • 點擊「媒體庫」 → 新增替代文字及圖片標題
在媒體庫新增替代文字
在媒體庫新增替代文字

新增影片

如果你想要在文章內嵌入影片也是可以的,加入影片可以讓文章更豐富,我自己就很常把YouTube影片放到自己的網站文章裡面。

  • 點擊左上角的「+」
  • 瀏覽全部區塊
瀏覽全部區塊
瀏覽全部區塊
  • 媒體 → 選擇「視訊」
新增視訊區塊
新增視訊區塊

透過上傳按鈕影片

  • 視訊區塊 → 點擊「上傳」
  • 從電腦上傳影片
透過「上傳」按鈕上傳
透過「上傳」按鈕上傳

從「媒體庫」按鈕上傳

  • 視訊區塊 → 點擊「媒體庫」
  • 從「媒體庫」上傳影片
透過「媒體庫」按鈕上傳

加入YouTube影片

  • 視訊區塊 → 點擊「從網址插入媒體」
  • 貼上YouTube網址
  • 點擊「套用」圖示
上傳YouTube影片
上傳YouTube影片

設定精選圖片

精選圖片就像是書的封面那樣。

  • 齒輪 → 文章 → 精選圖片
  • 設定精選圖片
新增精選圖片
新增精選圖片

設定永久連結

永久連結就是你可以分享給其他人的網址。永久連結可以設定中文或英文。我喜歡用英文,因為中文在分享網址的時候,有機率會變成一串亂碼,用英文看起來比較簡短、比較舒服。

💡 要怎麼跟朋友分享文章?

像這篇是沖繩 (Okinawa) 旅遊,那我就可以把網址代稱叫做okinawa。

這篇的永久連結就變成:「https://notesblogdemo.com/okinawa」。

把這個網址分享給你的朋友就好了。

新增永久連結
設定永久連結

設定分類 (Category)

分類是要分文章的類別,如果我們的目標是要做一個美食+旅遊+生活的部落格,那我們類別就可以分成美食、旅遊、生活。如果想專寫旅遊 那我們可以分成 日本、台灣、韓國等等,以一個剛開始的部落格來說,3—5個分類就很夠了,等網站做大了,再慢慢加就好。

以這個示範網站為例,我想專寫旅遊,所以我把類別分成日本、台灣、韓國。

新增文章分類
設定分類

設定標籤 (Tag)

標籤就有點像IG的#hashtag。如果沒用過IG的話,簡單來說,標籤就是關於這篇文章的關鍵字。以我們這篇為例的話,就可以把標籤設定成:沖繩、自駕、自由行等等。

新增文章標籤
設定標籤

設定內容摘要 (Excerpt)

內容摘要不填也沒關係,WordPress會自動幫你把文章的前幾個字當做摘要。

搜尋引擎優化

搜尋引擎優化 (Search Engine Optimization) 在網站架設的領域通常會直接講SEO。做好SEO,你就很容易在Google有免費的流量。SEO是一門有趣而且博大精深的學問,之後有機會會再多寫幾篇筆記跟你分享我學到的SEO技巧,這篇筆記我就先跟你分享如何用WordPress的SEO外掛來做優化。

WordPress的SEO外掛有很多,最知名的就是Rank math跟Yoast,在我自己實際用過之後,覺得Rank math比較好,所以這個教學就以Rank math來示範。

Rank math可以幫你在Google有更好排名,只要用之前跟你說要安裝的Rank math的檢查清單調整,在SEO上就可以贏其他沒在管SEO的人了。

安裝好Rank math外掛之後,文章介面的右上角會有一個圖標,點進去就可以設定我們的目標關鍵字。下面可以看到SEO檢查清單。打勾是你已經做到的,打叉是你還沒做到的,越多勾勾,分數就會變越高。

我們的目標是盡量把叉叉都都變成勾勾,但是因為我們是中文使用者,這個外掛則是針對英文用戶,所以有一些項目永遠沒辦法達成,我們只要盡力就好,通常能調到70以上就已經很好了。

Rank Math 介面
Rank Math 介面

舉例來說 (請參照上圖),像是第一個項目要我把這篇文章的關鍵字放在標題,我已經做到了,所以這個項目就會顯示勾勾。第二個項目,要我們把關鍵字放在說明,我已經放進去了,所以已經顯示勾勾。

第三個項目Focus Keyword not found in the URL (目標關鍵字沒有在網址) 不用達成也沒關係。因為URL我喜歡設定英文,所以沒有達到很正常。

字數統計還有關鍵字密度的項目,因為範例文章是用中文寫的,現在的SEO外掛中文都會有統計錯誤的問題,所以顯示叉叉是正常的。

中文字數統計/關鍵字密度的問題,官方已經說之後會修改了。

這個SEO檢查清單,我們只要盡量調整就好,不需要太過度在意分數。太執著於每個項目都要打勾,這樣反而會讓自己很痛苦。還是那句話,完成比完美更重要 (Done is better than perfect)。

⭐ 更多免費筆記
Rank math詳細教學 (未來開放)

發佈文章

文章寫好、做好基本設定與SEO之後,就可以發佈我們的第一篇文章囉!

直接發佈:

  • 按右上角的「發佈」
  • 在發佈前檢查項目再次按右上角「發佈」
  • 你的文章正式上線囉!
發佈文章

排程發佈:

  • 按右上角的「發佈」
  • 在發佈前檢查項目中的「發佈時間:立即排程」,選擇你想要發佈文章的時間。
  • 你的文章會在你排程的時間正式上線。
排程發佈
排程發佈

🚩 新增多篇文章

接下來我們要用相同的方法,發佈多篇文章,然後看看Blocksy簡約、漂亮的設計。

發佈多篇文章
發佈多篇文章網站的後台

發佈後

發佈多篇文章後網站的樣子
發佈多篇文章後網站的樣子

Blocksy真的是蠻扯的,用預設的就蠻漂亮的。我用過數不清的外掛之後, 發現Blocksy是我目前最喜歡的主題。在第5步驟,會教你用Blocksy主題的自訂器客製化你網站設計的方法,讓你的網站變成你心目中最想要的樣子。

🚩 刪除預設頁面

  • WordPress 後台 → 「頁面」 → 「全部頁面」
  • 選取預設頁面 → 刪除預設頁面
刪除預設頁面
刪除預設頁面

🚩 新增頁面

你可以新增各種你想要的頁面。這次的教學,我們先設定一個「我的故事」頁面。

我們先在標題打我的故事,然後加入一些文字並發佈它。

  • WordPress 後台 → 「頁面」 → 「全部頁面」
  • 點擊「新增頁面」按鈕
點擊「新增頁面」按鈕
  • 新增我的故事頁面
  • 寫關於你的故事
  • 發佈文章
撰寫頁面內容並發佈
撰寫頁面內容並發佈

🚩 新增選單

接下來,新增選單是很多架站新手會卡關的地方,不過跟著操作就沒問題了。

還沒設定選單前:

  • Blocksy會自動把我們的選單加在Menu上
Blocksy預設選單
Blocksy預設選單

開始設定選單:

有兩個方法可以進入選單設定頁面。

① WordPress 後台 → 「外觀」 → 「選單」 (範例操作使用①)

從WordPress後台選單功能來建立選單
從WordPress後台選單功能來建立選單

② WordPress 後台側邊欄 → 「外觀」 → 「自訂」 → 會轉跳到WordPress自訂器

點擊WordPress後台側邊欄的自訂
點擊WordPress後台側邊欄的自訂
從WordPress前台新增並建立選單
從WordPress自訂器來建立選單

接下來我們用方法①建立一個主要選單。

  • 在WordPress後台,進入設定選單頁面
  • 新增選單名稱:主要選單
  • 點擊「建立選單」按鈕
  • 找到想新增的頁面、文章、分類等等
  • 在新增選單項目的分類 → 把「日本」、「台灣」、「韓國」分類加入選單
  • 在新增選單項目的文章 → 把多篇文章加入選單
  • 在新增選單項目的頁面 → 把「我的故事」頁面加入選單
  • 在新增選單項目的自訂連結 → 把YouTube頻道連結加入選單
從WordPress後台建立選單
從WordPress後台建立選單

💡 如何把分類新增進選單?

  • 在新增選單項目 → 點開「分類」
  • 把我們想要的類別新增進選單
把分類新增至選單
把分類新增至選單

💡 如何把頁面新增進選單?

頁面是最常被加入選單的項目,可以加入我的故事、服務項目、聯絡資訊等等頁面。

  • 在新增選單項目 → 點開「頁面」
  • 點選「新增至選單」按鈕,把頁面新增進選單

💡 如何把文章新增進選單?

我們可以把覺得寫得最棒或核心文章的文章新增進選單。

  • 在新增選單項目 → 點開「文章」
  • 把我們想要的文章新增進選單

如果我們覺得去日本旅遊一定要考慮看看沖繩,觀眾應該先看看「沖繩自由行」這篇文章的話,我們可以把「沖繩自由行」放進日本的子選單。

  • 在新增選單項目 → 點開「文章」把「沖繩自由行」新增進選單
  • 放在「日本」下面,往右拉,就會變成子項目了

因為文章原本的標題太長了,我們可以修改顯示的文字。

  • 在「選單結構」中把「沖繩自由行|一趟說走就走的旅行」點開
  • 把「導覽選單項目標籤」修改為「沖繩自由行」

💡 如何把自訂連結新增進選單?

舉例來說,如果我們在YouTube有一個介紹網站的影片,可以用自訂連結功能把影片加入選單。

  • 在新增選單項目 → 勾選「自訂連結」
  • 填入「網址」、「連結文字」
  • 把我們想要放的連結新增進選單

因為我們不想要讓觀眾點開連結之後,就轉跳到YouTube,離開我們的網站,所以我們要讓YouTube在新視窗打開。

  • 點開右上角「顯示項目設定」
  • 把「連結目標開啟方式」打勾
在顯示項目設定勾選連結目標開啟方式
在顯示項目設定勾選連結目標開啟方式
  • 點開自訂YouTube影片連結的選單項目
  • 把「在新分頁中開啟連結」打勾
勾選在新分頁中開啟連結
勾選「在新分頁中開啟連結」

🚩 看看網站現在的樣子

終於設定好選單了,我們來看看現在網站的樣子吧。現在我們有了文章之後,網站已經越來越完整了!

新增文章、頁面、選單後網站的樣子
新增文章、頁面、選單後網站的樣子

⭐ 更多免費筆記
WordPress後台設定詳細教學 (未來開放)

#5 客製化網站外觀

在第5步驟,我會跟你分享如何設計網站外觀。包括如何使用WordPress的自訂器來自訂網站的logo網站標題文章/頁面的排版設計等等,也會跟你分享怎麼用自訂器做響應式網頁設計,也就是讓你的網站在電腦、平板、手機能有不同顯示的方法。結束之後,你就會擁有一個漂亮的WordPress部落格網站。

🚩 安裝Blocksy Companion

Blocksy Companion是Blocksy主題的團隊開發的外掛。

安裝完之後 (已在第3步驟安裝過),我們就可以免費獲得很多很棒的功能,像是:透明頁首、固定頁首、模版網站、聯絡資訊小工具、社交圖標等等。

這些功能在很多其它主題都是要付費的,我們可以好好利用這些免費資源。

🚩 進入自訂器 (Customizer)

進入自訂器 (Customizer) 有兩個方法,第一個是從網站前台,第二個是從網站後台,兩個方法最後到的自訂器都是一樣的。

從前台:

  • 進入網站前台
  • 點擊上方「自訂」
從前台進入自訂器
從前台進入自訂器
  • 進入自訂器介面
自訂器介面
自訂器介面

從後台:

  • 進入網站後台
  • 點擊左邊「外觀」→「自訂」
從後台進入自訂器
從後台進入自訂器
  • 進入自訂器介面
自訂器介面
自訂器介面

💡 自訂器的功能是什麼?

自訂器是一個可以調整你的網站外觀設計,還有部分功能的工具,如果想調整網站的外觀、設計,來這邊就對了。

只要在自訂器裡設定好,就會適用在整個網,不用一篇文章、一篇文章或者是一個頁面、一個頁面調整,很方便。

在自訂器也可以調整部落格在各種裝置的外觀,你可能也看過一些部落格,用電腦看起來很漂亮,但用手機、平板看起來字體大小、設計都怪怪的。透過自訂器的響應式網頁設計 (Responsive Web Design),我們就可以在不同裝置有不同的排版設計。

每個佈景主題,都有不一樣的自訂器,可以調整的外觀、功能也不一樣。而我會選用Blocksy佈景主題就是因為它免費的版本,能控制的項目就有很多,而且操作跟其它佈景主題的自訂器比起來直觀很多,算是蠻佛心的佈景主題。

因為裡面可以調整的項目很多,新手可能不太清楚裡面的名稱是對應到哪個外觀設計,所以很容易就迷失在自訂器裡面。我先做簡單的名詞解釋,這樣你就會比較清楚,你想要調整的外觀要去哪邊設定。

每個佈景主題控制同一個項目的名稱可能略有不同,有的是英文的,但Blocksy主題下載完後就已經中文化了。 以下名詞解釋以Blocksy主題為例,如果你選用其它佈景主題的話,名稱可能會略有不同。

💡 自訂器名詞解釋

我這邊就先介紹最常用而且比較容易搞混的功能。

網誌文章

你有看過其他部落格的話,應該會比較好理解這個項目,我們寫完一篇一篇部落格文章之後,通常會有一個頁面把所有部落格文章彙整起來,放在同一個頁面,如下圖。如果想控制這個彙整頁面設計的話,就到網誌文章裡面設定。

網誌文章
網誌文章

單一文章

這個比較好理解,就是可以控制你的文章版型。像是文章標題、精選圖片等等。

單一文章
單一文章

分類

我們在寫文章的時候,會把每篇文章都加進某個分類,而Blocksy會幫我們把同個分頁的文章加進同一個分類彙整頁面 (Category archive page)。

舉例來說,我們把所有去日本旅遊的文章都加到「日本」分類,那我們點進「日本」這個分類的話,就會進入日本旅遊的文章的彙整頁面,所有加進「日本」分類的文章都會在裡面。 而在自訂器的「分類」可以調整彙整頁面的設計。

分類的彙整頁面
分類的彙整頁面

頁面

「頁面」可以控制像關於我、服務項目、聯絡資訊等等頁面的設計。

頁面
頁面

資訊欄

資訊欄可以控制我們的側邊欄版型設計。

我們可以添加搜尋功能、社交網站圖標等等。

資訊欄(側邊欄)
資訊欄 (側邊欄)

響應式網頁設計

響應式網頁設計 (Responsive Web Design,簡稱RWD),又稱回應式網頁設計。響應式網頁設計是一種讓網站能跨平台使用的設計。有做響應式網頁設計的網站會根據使用者的裝置尺寸,調整網站顯示的排版,像是文字大小、行距、圖片大小等等,讓使用者不管是在電腦、平板、手機都能有良好的體驗。

🚩 自訂網站標題、說明、logo

響應式網頁設計(Responsive Web Design)
響應式網頁設計 (Responsive Web Design)

修改網站的標題:

  • 進入自訂器 → 「核心」 → 「網站識別」
  • 填寫網站標題、網站說明、網站圖示
自訂網站標題、說明、網站圖示(logo)
自訂網站標題、說明、網站圖示 (logo)

因為這是示範網站,我的標題就填「諾特斯旅遊」。

網站說明:

網站說明是要填你網站的主題是什麼。因為這個示範網站的主題是在講台灣、日本、韓國旅遊,所以我就填「台灣、日本、韓國旅遊」。

網站圖示 (logo):

我們的logo可以放在瀏覽器分頁左上角的圖示,也可以放在選單上,有自己的logo可以增加我們的品牌形象。

logo建議可以花個幾千塊請專業的設計師設計,不過我知道很多人一開始預算比較有限。

我有找到一個可以免費設計logo的網站叫作Canva。在架站初期,我們應該要把時間、成本花在生產內容上。所以我們可以先用這個網站快速設計自己的logo,節省一些初期架站的成本還有學習設計軟體的時間。等網站比較有規模之後,有需要的話,再請設計師設計新的logo就好。

在Canva製作網站圖示(logo)
Canva製作網站圖示 (logo)

上傳網站圖示:

  • 網站識別 → 網站圖示
  • 傳製作好的logo

🚩 自訂單一文章 (single post) 設計

  • 自訂器 → 文章類型 → 單一文章
透過自訂器來自訂單一文章的設計
自訂單一文章的設計

🚩 自訂側邊欄 (Sidebar) 設計

  • 自訂器 → 一般選項 → 資訊欄

我們可以來調整側邊欄的寬度,我比較喜歡用33%,這樣主文章頁面才不會太寬,適合大家閱讀。

自訂資訊欄(側邊欄)設計
自訂資訊欄 (側邊欄) 設計

🚩 自訂頁首設計

  • 在Canva製作頁首標誌 (logo)
在Canva製作頁首logo
在Canva製作頁首logo
  • 自訂器 → 一般選項 → 頁首 → 元件
  • 把「標誌」放到主要列
  • 把「選單」放到主要列
  • 點擊主要列 → 調整頁首最小列高
自訂頁首設計
自訂頁首設計

🚩 響應式網頁設計

  • 點擊下方的電腦、平板、手機的頁首設計
  • 看看不同平台顯示的樣子
  • 微調不同裝置的設定
透過響應式網頁設計來設計頁首
透過響應式網頁設計來設計頁首

P.S. 響應式網頁設計不只可以用在頁首設計,所有的自訂項目都可以調整在不同裝置的排版,你可以自己點點看、玩玩看。

固定頁首功能

  • 自訂器 → 一般選項 → 頁首→ Headers分頁
  • 點選Global Header (通用頁首)
  • 開啟Sticky Functionality (固定功能)
    P.S. 這是要安裝Blocksy companion 才有的功能
開啟固定頁首功能(Sticky Functionality)
開啟固定頁首功能 (Sticky Functionality)

🚩 自訂頁尾設計

  • 自訂器 → 一般選項 → 頁尾 → 下面列
  • 點選版權
  • 刪除「- 使用 {theme_author} 佈景」
  • 加入「|你的域名」
自訂頁尾設計
自訂頁尾設計

🚩 看看自己網站現在的樣子

現在我們可以看看網站現在的樣子,你可以再自己調整成你喜歡的設計。

透過WordPress自訂器設計排版後網站的樣子
透過WordPress自訂器設計排版後網站的樣子

🚩 使用諾特斯模板 (選用)

現在你已經會自己設計網站了,你現在看到的這個網站「notesstartup.com」就是用Blocksy佈景題做的,如果你有覺得不錯的地方可以參考一下,如果有覺得可以再改進的地方,也可以在下方留言給我建議 。

這是我花了好幾個小時調整好的設計,我也不藏私,把這個模板免費送給你,如果你喜歡我網站的設計的話,可以直接套用,再根據你的需求做微調就好。這應該可以幫你省下好幾個小時調整排版的時間,你可以點擊下方按鈕,下載諾特斯網站的模板設計。

備註:新版的Blocksy可能無法套用

諾特斯網站(notesstartup.com)的設計
諾特斯網站「notesstartup.com」的設計

套用諾特斯Blocksy模板的方法

  • 一般 → 管理選項
  • 透過Click or drop to upload a file來上傳檔案
  • 點擊Import Customizations (匯入自訂檔案)
  • 上傳剛剛下載的諾特斯網站模板檔案
上傳諾特斯的Blocksy模板
上傳諾特斯的Blocksy模板

#6 強化網站功能

在第6步驟,我會跟你分享要如何加入訂閱電子報/表單功能、如何加入強化網站資安功能,還有如何安裝Google Search ConsoleGoogle Analytics網站分析工具。這些是加碼的教學,你可以看你自己的需求,來決定要不要為你的網站加入這些功能。

加入訂閱電子報、表單功能

💡 Sendinblue的功能

Sendinblue是一個將訂閱電子報、網站表單、Email自動化等等功能合一的工具。我們可以透過它跟網站觀眾建立更好的連結

🚩 註冊免費Sendinblue

註冊Sendinblue步驟

  • 點擊下方按鈕免費註冊Sendinblue
  • 點擊右上角Sign up free (免費註冊)
  • 開始填寫註冊資料
Sendinblue的評價4.8顆星
免費註冊Sendinblue
免費註冊Sendinblue

🚩 在Sendinblue後台製作訂閱表單

我們可以透過Sendinblue在WordPress裡加入漂亮的訂閱表單,來蒐集網站觀眾的Email。蒐集到觀眾的Email之後,以後更新部落格文章或是有什麼優惠資訊、新消息都可以透過Email跟觀眾分享。

製作訂閱電子報表單步驟

  • 點選Contacts (聯絡人)
  • 點選側邊欄的List (名單)
  • 點選add a new list (加入新名單)
  • List name (名單名稱) 填「訂閱電子報名單」
  • 回到Contacts (聯絡人) → Forms(表單)
  • Create new subscription form (創建新的訂閱表單)
  • ① Setup (設置) → Form name (表單名稱) 填「訂閱電子報表單」
  • ② Design (設計) → 設計表單
  • ③ Lists (名單) → 選擇剛剛填的「訂閱電子報名單」
  • ④ Settings (設定) → 客製化表單設定
  • ⑤ Messages (訊息) → 客製化表單訊息
  • ⑥ Share (分享) → 選擇分享表單方式
依照①-⑥製作訂閱表單
依照①—⑥步驟製作訂閱表單
設計訂閱電子報表單
設計訂閱電子報表單

🚩 把訂閱電子報表單加入WordPress Blog/網站

  • 在⑥Share (分享) → 點選HTML
  • 複製訂閱電子報表單的HTML碼
在步驟⑥複製訂閱電子報表單的HTML碼
在步驟⑥複製訂閱電子報表單的HTML碼
  • 在WordPress後台新增訂閱電子報頁面
  • 新增HTML區塊
  • 貼上剛剛複製的HTML碼
在WordPress貼上HTML碼
在WordPress貼上HTML碼
  • 看看訂閱電子報表單成果
訂閱電子報表單在網站呈現的樣子
訂閱電子報表單在網站呈現的樣子

🚩 在Sendinblue後台製作聯絡表單

製作聯絡表單步驟:

  • 點選Contacts (聯絡人)
  • 點選側邊欄的List (名單)
  • 點選add a new list (加入新名單)
  • List name (名單名稱) 填「填寫聯絡表單的名單」
  • 回到Contacts (聯絡人) → Forms (表單)
  • Create new subscription form (創建新的訂閱表單)
  • ① Setup (設置) → Form name (表單名稱) 填「聯絡表單」
  • ② Design (設計)

我們要新增一個Text Attribute (文字屬性),來收集觀眾想傳的文字。

到Contacts (聯絡人) → Setting (設定) → 點擊 Add a new attribute (新增新的屬性) 按鈕 → Attribute Name (屬性名稱) 輸入MESSAGE → Attribute Type (屬性種類) 選擇Text (文字)

新增一個新的Text(文字)屬性
新增一個新的Text (文字) 屬性

Attribute list (屬性清單) 選MESSAGE,Field size (場域大小) 選Multi lines (多行)。

設計聯絡表單
設計聯絡表單
  • ③ Lists (名單) → 選擇剛剛填的「填寫聯絡表單的名單」
  • ④ Settings (設定) → 客製化表單設定
  • ⑤ Messages (訊息) → 客製化表單訊息
  • ⑥ Share (分享) → 選擇分享表單方式

🚩 把聯絡表單加入WordPress Blog/網站

  • 在⑥Share (分享) → 點選HTML
  • 複製聯絡表單的HTML碼
  • 在WordPress後台新增聯絡資訊頁面
  • 新增HTML區塊
  • 貼上剛剛複製的HTML碼
  • 看看聯絡表單成果
聯絡資訊表單在網站呈現的樣子
聯絡資訊表單在網站呈現的樣子

⭐ 更多免費筆記
Sendinblue評價

強化網站資安功能

我們可以透過安裝免費的「Wordfence Security」外掛來強化網站資安功能

💡 Wordfence Security的功能

「Wordfence Security」是一個安全性防護外掛,可以保護我們不被駭客入侵。這個我建議剛開始架設Blog的時候就先安裝好。

🚩 安裝Wordfence Security

安裝並啟用Wordfence Security外掛
安裝並啟用Wordfence Security外掛
  • 設定Wordfence Security外掛
  • 填寫Email並開啟通知
設定Wordfence Security外掛
設定Wordfence Security外掛
  • Premium License Key (付費認證金鑰) → No thanks (不了謝謝)
免費使用Wordfence,選擇No thanks,不使用付費金鑰。
免費使用Wordfence,選擇No thanks,不使用付費金鑰。
  • 選擇是否要自動更新
  • 優化網站防火牆
設定Wordfence Security
設定Wordfence Security

加入網站分析工具

💡 Google Search Console的功能

「Google Search Console」是監測你的網站在Google搜尋引擎中表現結果的工具。舉例來說,它可以告訴你,你的網站在3個月內的曝光總數、總點擊次數、平均點擊率、熱門查詢項目等等。其中我最常用到的功能是查看網站文章在特定關鍵字的排名。

💡 Google Analytics的功能

「Google Analytics」是Google推出的一個免費網站分析工具,安裝了之後,它會在後台默默幫你蒐集使用者的數據,並自動幫你分析網站的數據。

有一些蠻酷的功能是,你可以即時看到逛你的Blog的人是位在世界的何處,也可以看到他們是使用電腦還是手機瀏覽等等資訊。

Google Analytics我也是建議剛開始架設Blog就先裝好,你之後會感謝我這麼早就先跟你說要安裝這個的。

🚩 安裝「Site Kit by Google」

以前要安裝Google Search Console和Google Analytics還蠻麻煩的,不過現在只要安裝「Site Kit by Google」這個外掛就好了。

  • 在WordPress安裝並啟用Site Kit by Google。
安裝Site Kit by Google外掛
安裝Site Kit by Google外掛
  • 點擊START SETUP (開始設置),連結你的Google帳號連結。
連結Google帳號
連結Google帳號
  • 會需要進行一些授權跟同意條款。
進行授權予同意條款
進行授權予同意條款
  • 連結Google Search Console跟Google Analytic服務。
連結Google Search Console跟Google Analytic
連結Google Search Console跟Google Analytic
  • 等48小時後,就可以看到數據分析了!

結語

恭喜你,跟著這個WordPress部落格/個人網站教學操作的話,你已經有能力製作出一個屬於自己的Blog了。

這個教學中,我帶你註冊域名租用主機安裝佈景主題安裝外掛,然後示範寫一篇有架構、SEO友善的文章,也教你如何設計網站的外觀強化網站的功能。

能把這個系列做完,其實我還蠻感動的。

之前,有觀眾希望我做詳細的WordPress教學。後來,為了完成這個教學,我婉拒掉很多案子跟合作的邀約,因為我想要專注在這個計劃上。

我花了很多個人的時間在收集資料、評測軟體工具、編排課程、錄影實作跟後置剪輯上。

我甚至另外花錢找了助理幫忙上影片字幕、編輯文章。她也很用心地幫大家核對文字跟翻譯我用英文說的地方。

我同時製作了圖文網站筆記YouTube影片版本。網站筆記用文字與圖片的方式讓你能快速瀏覽會學到的內容,YouTube影片我結合了手繪動畫跟螢幕錄製的方式,讓你能更有效率的吸收網站架設的相關知識,也讓你能更清楚瞭解每一步驟的實際操作。

這些都是為了讓你能夠更好地學習如何用WordPress架設部落格/個人網站。

我們總共花了288個小時以上的時間來製作圖文跟影片教學,並把這些內容100%免費地分享給你。

希望這樣的教學對你有幫助。

如果你想看其他我製作的 WordPress 架站教學,歡迎點擊連結觀看。

我最後來提倡一個理念,就是把網站當作自己的事業來經營。堅持每天花一點時間,讓你的網站變得更好更豐富。

就算是從每天花個五分鐘、十分鐘開始也很好,相信之後會有很大的回報的。

祝大家架設部落格網站順利!

69 則留言

  1. 謝謝你無私的分享,當初就是跟著你的教學打造出自己的部落格的。
    如今已經經營了快兩年了,也有了自己的商業模式,要不是有你的幫助,可能現在還卡在原地,真的非常非常感謝你

    希望以後有機會合作!

  2. 諾特斯大大您好,我最近這幾天靠著您的教學完成一個網站了(歡慶+1),謝謝。

    我已經決定好網站主題是貼自己的作品,和身為插畫創作者的廠商推薦、相關資訊分享。

    目前還在摸索外觀的玩法,希望自己能用在這裡學到的知識繼續精進網站,提供有用的資訊,幫助其他跟我一樣也在畫圖的朋友。

    對了,很期待大大能推出這個留言模板的教學。

    最後再次感謝您的分享。

    • 太棒了,聽到你完成了自己的網站,我也很有成就感!
      恭喜恭喜!

      關於留言模板的教學,
      之後有機會會再出教學~

      希望你的網站越來越受歡迎!

  3. 謝謝諾特斯大大的無私分享,您幫助架站的人數可以再+1了!希望早日看到您達成您幫助3000人架站的階段性目標~

  4. 你好~我是稍後才設定域名,所以一開始並沒有域名,前兩天才買域名,但放了兩天他還是沒有啟動耶,一直是Unassigned的狀態QQ…
    我要在bluehost測定什麼嗎QQ
    補充我是XXXX.site

  5. 您好,我也完成blue host申請與架站,主題與霧痴使用相同,還蠻好使用的。但有時常會發生我的網頁文章有時1-2篇,有時會是同一時間的幾則文章都突然發生下列錯誤訊息。
    不知道是哪邊出錯?還是外掛問題?還是自動更新後造成問題(因為有時蠻常是正常的,但是在收到更新信件沒多久後就發生這問題),因為還蠻困擾,想請教有沒有建議方式處理,非常感謝您,謝謝!

    錯誤訊息:
    這個網站發生重大問題。
    進一步了解WordPress 中的疑難排解方式
    連結是連到這邊:https://wordpress.org/support/article/faq-troubleshooting/

  6. 真的很感谢您,我从很久以前就有想要经营部落格的念头,参考了好多架设网站教学,但是实践的时候总是有卡住的地方🤨,最后,是看着您的教学,一步一步成功搭建起自己的部落格🤩,非常非常非常感谢您

  7. 謝謝您的無私教學!我的網站已經成功架好了!!但是有個小問題想要請教老師,我用一樣的Blocksy主題,要如何在首頁的網誌上面像您的網頁一樣有一段獨立的文字,如果我套用了模板,目前的內容會消失嗎!!

  8. 你好,非常感謝你的教學,想請問我在客製化網站外觀那裡,不管按什麼像是網誌文章排版或是其他的網站外觀都沒有改變耶,不像你的影片裡按一下他就會隨著排版改變,是不是我有設定到什麼按鈕了呢?

  9. 真的谢谢你这篇很详细的解说, 我成功开了自己的部落格网站。 真的感激不尽。我找了很多解说,你的是最容易了解以及全面。

  10. 諾特斯:
    您好,感謝您的無私分享。
    想請教您:在創建域名的地方選擇「I′ll create my domain later(我之後再創建域名)」後,現在已經進到用Wordpress架設完部落格的階段時,是否要回到bluehost購買域名,wordpress部落格的網址才可以改成自己要的網址呢?另外,之後再購買域名的話是否就沒有第一年免費的優惠了呢?

  11. 您好~~想請問一下,如果購買bluehost是只有第一次直接購買才有優惠嗎?如果第二年想要購買是否就是原價了呢?謝謝

  12. 諾特斯您好,我想在網頁中設定一個連結可以直接從bluehost下載檔案,但因為我的檔案大於512mb,無法直接上傳到網頁,詢問bluehost客服後客服建議使用ftp方式上傳至File Manager,我成功的將檔案上傳至public _html資料夾中,我的問題是如何將連結連接到這個檔案,因為我在媒體庫中找不到這個檔案。
    麻煩您撥空解答,謝謝!

  13. 謝謝你的用心整理!覺得很好閱讀,一步一步的教學也很貼心~
    我想請問如果是在藍色主機上申請網域,上面提到是免費贈送一年,那過了一年之後這個網址會消失嗎?還是需要付費以維持網址呢?謝謝!

  14. 您好,感謝您的分享,受益良多,也透過連結架設了自己人生的第一個部落格網站。
    發表第一篇文章後,現在進去編輯時,照片都無法顯示,請問會是什麼問題呢?

  15. 諾特斯你好,感謝你的分享與指導,看了你的影片我也購買了bluehost,但是在安裝軟體的時候我點選了右邊wordpress+bluehost,而不是左邊的wordpress org,看到這文章才發現我安裝錯了,請問這種情況我該怎麼做,有辦法重新安裝軟體嗎?可以的話再麻煩你指導一下,謝謝你

  16. 求救諾特斯 ~
    購買bluehost 後 還沒進行密碼設定
    啟用Wordpress
    就不小心跳離頁面
    不知道要去哪裡再繼續進行下一步啊~~

    請幫幫我~~🙏

  17. 諾老師您好,
    想請問您右邊導覽選單的小圖示怎麼弄上去的,比如”快速瀏覽”前面的閃電符號,我的資訊欄都只能打文字而已,謝謝~
    您的教學很棒,受益良多。

  18. 你好, 我想要設定,電子報, 請問HTML是要貼到那??文章裡面???每一篇文章都要手動貼?

    在WordPress後台新增訂閱電子報頁面
    新增HTML區塊
    貼上剛剛複製的HTML碼

  19. 你好,我有購買bluehost
    外掛那些都啟用了
    文章也有打幾篇了
    但是好像一直沒有開啟網頁
    是不是哪個步驟漏掉了
    可以的話再麻煩指導!!謝謝

    • 這是Bluehost外掛的功能
      他原本的目的是為了讓你的網站在還沒做好前
      先有個Coming Soon頁面
      你可以把這個功能關掉
      或是像我的教學那樣直接把這個外掛刪掉
      應該都可以解決你這個問題~

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *