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

Featured image for wordpress blog tutorial

你想知道如何用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 是一個免費的架站平台,全世界有 43.5% 的網站是用 WordPress 架設的,而且這個比例每年都逐漸提高

我會選擇用 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跟其它架站平台比較

👉 更多免費筆記

DNS 是什麼的精選圖片

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 台幣) ,在後面的段落會跟你分享第一年免費註冊的方法。

第一年過後,續訂的價格是 $23.99 美金/年 ($720 台幣/年)。

備註:
台幣價格是用美金兌台幣匯率 30 來估算。不過,因為匯率會隨時間浮動,實際的台幣價格還是要看交易時的匯率喔。

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

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

什麼是主機?

如果把部落格/個人網站當作家的話,主機就是土地,我們要租一塊地才能蓋自己的家。

通常我們要找資訊,會說去 Google,但是我們的網站資料其實不是放在 Google 上,而是放在自己的主機上

Google 就像是導遊,帶大家找到我們在主機存放的資料,而主機才是真正存放網站資料的地方。

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

主機(Hosting)
主機 (Hosting)

主機要錢嗎?

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

不過沒關係,用 Bluehost 主機的話,我有幫你爭取到諾特斯觀眾才有的 專屬 17 折優惠

每月只要 $1.99 美金 (原價 $11.99 美金/月),以購買 1 年的方案為例,總共可以省 $120 美金 (約省 3,600 台幣),希望這些折扣對你有幫助。

Bluehost LOGO(2025)

點擊連結優惠即生效

為什麼選 Bluehost?

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

很多人一開始會不小心用到一些爛主機或太高階的主機,太爛的主機效能不夠;太高階的主機除了太貴之外,還要花很多時間去設定。

還沒開始寫部落格就把自己搞得灰頭土臉,我覺得很不值得,我們應該要多把時間花在製作內容上。

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

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

雖然現在看起來很便宜,但對我當時來說,幾千塊也是一大筆錢。

那時我花了好多時間看要用哪個主機,看了很多國內外分析文章,最後選擇了 Bluehost,到現在還在用。

Bluehost 真的是蠻不錯的,我蠻推薦新手使用 Bluehost 來架設網站。

Bluehost LOGO(2025)

點擊連結優惠即生效

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

Bluehost 優點

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

Bluehost 缺點

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

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

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

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

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

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

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

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

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

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

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

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

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

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

🚩 點擊 Bluehost 優惠連結

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

Bluehost LOGO(2025)

點擊連結優惠即生效

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

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

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

點 Get Started Now (現在開始) 按鈕。

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

🚩 選擇價格方案

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

選擇最左側的 Basic 方案 (基本方案),按「Choose Plan」(選擇方案)。

Bluehost 諾特斯優惠選擇方案
選擇Basic (基本) 方案

🚩 註冊域名

  • 填寫域名 → 「Search For Domain」(搜尋域名)。
  • 如果還沒想好 → 按「CHOOSE DOMAIN LATER」(稍後選擇域名)。

✏️ 取域名的小技巧

域名建議設計得簡短易記,避免使用數字和特殊符號。常見的取名方式包括使用品牌名稱、人名、首字母縮寫、主題關鍵字等元素,將它們排列、組合成域名。

想好域名再架站
搜尋域名

🚩 選擇方案期間 & 取消附加功能

Cart(購物車) 裡目前有 4 個項目:

  • WordPress Basic Hosting (WordPress 基本主機服務)。

我推薦大家選擇 1 年期的合約,是因為 Bluehost 給 1 年期合約的折扣力度最大,而且對新手來說,1 年的時間剛好適合用來摸索和嘗試經營網站

16 選擇 1 年期主機服務
  • .COM Domain (.COM 域名)。

因為購買 Basic方案會贈送 1 年的免費域名,所以費用會是 0 元。

17 1 年免費域名費用 0 元
  • Domain Privacy + Protection(域名隱私保護)。

如果你比較注重個資隱私的話,可以考慮加購,它會幫我們在 WHOIS 數據庫中隱藏真實聯絡資訊。

不過,經過諾特斯團隊實測,在 Bluehost 後台加購 會比在這邊買的價格更便宜,所以目前可以先刪掉這個項目,之後再加購就好。

18 域名隱私保護建議在Bluehost 後台加購

現在顯示 0 元,是因為有贈送 1 個月的免費試用。

但試用期結束後會自動續訂,為了避免後續忘記取消,而被收取額外費用,如果不需要這項功能的話,我建議現在就把它刪掉。

點擊「垃圾桶」圖示。

19 點擊垃圾桶圖示

選擇「REMOVE FROM CART」(從購物車移除) 把「域名隱私保護」刪除。

20 點擊從購物車移除
  • Professional Email」(專業電子郵件)

因為首購時有贈送 3 個月的試用,所以費用顯示 0 元。

跟域名隱私保護一樣,我建議先刪除這個項目。

真的有需要的話,在 Bluehost 後台加購 會比較省錢!

21 刪除專業電子郵件

接著,按「CONTINUE TO CHECKOUT」(繼續結帳),前往下一步。

22 點擊繼續結帳

🚩 填寫資料與 Bluehost 密碼設定

域名註冊者的 Contact Information (聯絡資訊) 都必須填寫英文。

✏️ 小筆記

姓名可以利用 姓名中翻英工具 填寫

地址的部分,可以使用 中文地址英譯 的系統,我會把連結分享在下方,大家可以點擊使用。

👉 點我前往:中華郵政全球資訊網:郵務業務|中文地址英譯

填好聯絡資訊,最下面打勾是指,同意 Bluehost 來電或寄送一些促銷電子郵件給我們,所以我建議把它取消勾選。

取消勾選寄送促銷訊息

「Account Information」(帳戶資訊),要設定登入 Bluehost 用的密碼,輸入 2 遍做確認。

「Billing Information」(帳單資訊),可以選擇的付款方式有信用卡和 PayPal 兩種,這次我以信用卡做示範。

「Billing Address」(帳單地址) 如果跟帳戶資訊一樣,把「Same as Account Information」(與帳戶資訊相同) 打勾就可以直接套用,不需要再次填寫資訊。

帳戶與帳單資訊

填好所有資料後,在右側的「Order Summary」(訂單摘要) 確認最終金額。

金額正確的話,就可以按下藍色按鈕「SUBMIT PAYMENT」(提交付款)。

✏️ 申請退款的注意事項

  1. Bluehost 提供 30 天內全額退款保證,但只適用於主機費用。
  2. 儘管各方案都附贈 1 年免費的域名,但已經註冊的域名是不可退還的,所以 Bluehost 會從退款中扣除 12.99 美金的域名費用。
訂單摘要確認金額提交付款

如果你有遇到無法付款的問題,我之前有將解決的 5 種方法整理成筆記,你可以點擊下方連結前往。

Bluehost無法付款的封面

購買 Bluehost 主機時無法付款怎麼辦?

🚩 在 Bluehost 自動安裝 WordPress

接著,Bluehost 會自動安裝 WordPress.org 提供給我們的免費 WordPress 軟體 。

自動安裝免費 WordPress 軟體

如果你不知道 WordPress.comWordPress.org 的差別的話,可以點擊下方連結,觀看我做的解說影片:

👉 點我前往:wordpress.com 和 wordpress.org 比較

當畫面上跳出視窗寫著「Your WordPress Site is ready!」(你的 WordPress 網站已準備就緒!)

這樣就代表我們已經完成 Bluehost 主機的租用,並安裝好 WordPress 了。

WordPress 網站已準備就緒

🚩 收取域名聯絡資訊確認信

下一步,先到剛剛註冊時填寫的 Email 信箱,我們會收到幾封來自 Bluehost 的信件。

「Order Confirmation」(訂單確認) 是剛剛租用主機的收據,建議保留起來 —— 圖片標註 ➀。

另一封主旨寫著「This is exciting!」則是 Bluehost 的促銷信件,可以不用理會它 —— 圖片標註 ➁。

我們要找的是最重要的「域名聯絡資訊確認信」,也就是主旨寫著「Alert: Keep Your Domain Active」(提醒:保持你的域名活躍) 的信件 —— 圖片標註 ➂。

✏️ 諾特斯的經驗分享

在大多數情況下,註冊域名的幾分鐘到24小時內就會收到域名聯絡資訊確認信。如果超過 24 小時還沒收到的話,可以檢查看看信箱的垃圾郵件,或是聯絡 Bluehost 客服詢問。

這次諾特斯示範時,大約是在註冊完域名的 2 個小時後收到確認信,給你作為參考。

收取域名聯絡資訊確認信

打開信件,點擊橘色按鈕「CONFIRM EMAIL ADDRESS」(確認電子郵件地址)。

確認電子郵件地址

看到「Your Email is Confirmed」(你的電子郵件已確認),就表示驗證成功。

電子郵件驗證成功

🚩 等待域名生效

回到 Bluehost 後台,先來看看網站目前的狀態。

點擊藍色按鈕「LOG IN TO WORDPRESS」(登入 WordPress)。

點擊登入 WordPress

可以看到,網站的網址目前還是 Bluehost 的臨時域名。

網址顯示臨時域名

而且 SSL 憑證也還沒有生效,因此網站會顯示「連線並不安全」。

✏️ 諾特斯的經驗分享

這次諾特斯示範時,大約是在註冊完域名的 4 個小時後,網址會自動變成我註冊的正式域名,並安裝好 SSL 憑證。

SSL 憑證還沒有生效

通常等待幾個小時到 1 天的時間之後,我們註冊的域名和 SSL 憑證就會自動生效。

你可以先去喝杯咖啡、和朋友聊聊天,休息一下!晚點再回來進行下個步驟。

等待一下域名和 SSL 憑證會自動生效

🚩 認識 WordPress 後台、WordPress 前台

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

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

💡 如何登入 WordPress 後台?

從 Bluehost 登入 (第一次)

  • 登入Bluehost後台
  • 選「Websites」 (網站) → 「EDIT SITE」(編輯網站)
點擊編輯網站

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

  • 在任何瀏覽器的網址列打:「你的域名/wp-admin」,輸入好網址後按「Enter」。

✏️ 範例

域名:notesblogdemo.com

輸入:notesblogdemo.com/wp-admin

網址列登入方式
在網址列輸入:「你的域名/wp-admin」
  • 輸入使用者名稱/Email。
  • 密碼打之前設好的密碼。

登入帳戶可以輸入使用者名稱或電子郵件地址,使用者名稱可以在 WordPress 後台的「使用者」中查到。

電子郵件則是在 Bluehost 租用主機時填寫的 Email。

查詢使用者名稱和 Email

🚩 做 WordPress 一般設定

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

🚨 請不要自行改 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 後台 →「外觀」
左側欄位選擇外觀

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

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

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

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

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

Blocksy 優點整理

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

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

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

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

  • Blocksy 網站 點擊右上角「Free Download」按鈕,免費下載Blocksy佈景主題。
免費下載 Blocksy
在 Blocksy 官網點擊 Free Download (免費下載) 按鈕
下載 Blocksy zip 檔
點擊Download (下載) 按鈕
  • 上傳 Blocksy 佈景主題
WordPress 後台上傳外掛
  • 安裝 Blocksy → 啟用 Blocksy
zip 檔拖曳上傳並安裝
點擊立即安裝按鈕
點擊立即安裝按鈕
點擊啟用
點擊啟用

🚩 看看安裝 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 教學的精選圖片

Rank Math 教學 2025
比 Yoast 更佛心的 WordPress SEO 外掛!

發佈文章

文章寫好、做好基本設定與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 網站分析工具。這些是加碼的教學,你可以看你自己的需求,來決定要不要為你的網站加入這些功能。

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

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

🚩 註冊免費 Brevo

註冊 Brevo 步驟

  • 點擊下方按鈕免費註冊 Brevo
  • 點擊右上角Sign up free (免費註冊)
  • 開始填寫註冊資料

🚩 在 Brevo 後台製作訂閱表單

我們可以透過 Brevo 在 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碼
  • 看看訂閱電子報表單成果
訂閱電子報表單在網站呈現的樣子
訂閱電子報表單在網站呈現的樣子

🚩 在 Brevo 後台製作聯絡表單

製作聯絡表單步驟:

  • 點選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碼
  • 看看聯絡表單成果
聯絡資訊表單在網站呈現的樣子
聯絡資訊表單在網站呈現的樣子

⭐ 更多免費筆記

WordPress電子報、表單工具:Sendinblue

Brevo 評價
免費訂閱電子報/表單/Email自動化系統

強化網站資安功能

我們可以透過安裝免費的「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 架站教學,歡迎點擊連結觀看。

Featured image for free wordpress course

WordPress 新手教學 (總整理)

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

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

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