WordPress Blog 教學｜如何用 WordPress 架設部落格／個人網站 (2026)

你想知道如何用 WordPress 架設個人網站，分享你的生活嗎？這篇筆記會用淺顯易懂的方式跟你分享怎麼用最簡單、最超值的方法，快速建立一個高速又穩定的 WordPress 個人網站 / 部落格 (blog)。

我會不藏私地免費把如何架設個人網站的方法鋪成階梯，你只要跟著 6 大步驟 一步步操作，就能快速搞懂整個架站流程，少走很多我以前走過的冤枉路，在架站的路上領先 90% 以上的新手！

你的 WordPress 個人網站 / 部落格將會擁有這些強大功能：

• 部落格寫文章功能
• 自訂的專屬域名
• 免費 SSL 憑證
• 搜尋引擎優化 (SEO) 輔助功能
• 自訂個人 Logo
• 客製化排版設計
• 響應式設計 (RWD)
• 免費電子報
• 串接 Google Search Console (GSC)
• 串接 Google Analytics (GA)

這麼多功能的客製化網站要花錢請別人做，通常費用都不便宜，也未必能完全符合你的需求，但只要你願意自己動手，就能省下一大筆錢喔！

如果你偏好用影片學習，歡迎觀看下面的 YouTube 影片。

👉 系列教學 YouTube 播放清單

如果你喜歡透過圖文學習，請繼續往下閱讀吧！

圖文筆記會比較詳細、方便快速瀏覽，還會持續更新與補充內容。

你可能會擔心：「自己架站聽起來有點複雜，我做得到嗎？」

其實以前我也和你一樣，不會寫程式，完全從零開始，所以，我非常能體會新手一開始那種不知道從哪裡開始下手的心情。

現在我會架設網站了，就來做一個可以「無腦跟著照做」的保姆級教學，相信我，只要一步一步跟著這篇筆記做，你就能輕鬆架出屬於自己的網站了！

或許有些人會把這樣的內容做成線上課程賣錢，不過我以前也是靠著網路上很多前輩無私分享，才慢慢學會架站的，所以我也想把這份「知識傳承」的精神延續下去。

用 WordPress 架設個人網站

一開始我想和你分享，架設個人網站 / 部落格 (Blog) 前需要知道的事情。

如果你想直接開始架設個人網站，可以點擊下方按鈕：

架設個人網站 / 部落格 (Blog) 好處

《你要如何衡量你的人生》這本書的作者 Clayton Christensen 說過：「我們把自己的時間、精力和才華投入在什麼地方，我們的人生就會呈現相同的樣貌。」

而我覺得「架設個人網站」，就是一件非常值得我們投入時間、精力與才華的事情！

架設個人網站的好處：

• 學會「架設網站」技能
• 養成用文字、圖片「記錄生活、表達觀點」的習慣
• 透過個人網站吸引到更多理念相近的朋友，拓展你的人脈，累積影響力
• 透過網站打造網路事業 (個人品牌)，賺取被動收入與主動收入

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

社群媒體盛行，還值得架設網站嗎？

現在大家都在刷 TikTok、滑 Threads，所以你可能會懷疑：「這時候還有經營網站的必要嗎？」

我的想法是：「社群媒體可以當作吸引流量的幫手，但『網站』才是你真正的舞台！」

為什麼這麼說呢？

因為社群平台像是租來的場地，規則不是你說了算，只要演算法一改，或者帳號被封，長久以來辛苦經營的內容可能在一夕間全部消失。

而且社群內容的壽命很短，沒幾天就會被新的內容洗掉了。

相反地，網站是你自己擁有的資產，你要放什麼內容、怎麼呈現，決定權都在你手上。

只要你持續創作好的內容，它就能在未來的好幾年裡，一直為你帶來流量和機會。

現在有 AI，還需要自己學怎麼架網站嗎？

你可能會想：「AI 已經這麼厲害了，直接請它幫我架網站不就好了嗎？」

確實，現在市面上已經出現不少 AI 架站工具，號稱只要下幾個指令，就能做好一個網站，聽起來很令人心動，對吧？

但是如果你太依賴 AI，對網站底層設定一竅不通，要是哪天網站出了問題，你就只能乾瞪眼，完全不知道該怎麼解決。

相反地，當你跟著教學實際做過一遍，有扎實的基礎概念後再搭配 AI 輔助，才更能事半功倍。

如何找到想經營的內容？

我們先來聊聊建立網站前最重要的一步 —— 選擇網站主題，也就是「你想在網站上分享什麼？」

因為只有你真心喜歡，對這個主題有熱情，網站才有辦法長久經營下去。

那如果你不知道要分享什麼，這邊提供你 3 個實用的思考方向：

方向 1：想想你擅長什麼

試著回想一下，你以前做過什麼工作、考過什麼證照、參加過什麼比賽？

就算只比新手懂多一點點事情，也很值得分享，因為網路上永遠有一群初學者，非常需要你的過來人經驗談。

方向 2：想想你曾經遇過哪些問題

生活中，你一定碰過一些非常困擾你的事，你是怎麼撐過來的？又是怎麼解決的呢？

那些曾經讓你感到挫折、痛苦，甚至當時不想跟別人講的事情，反而適合拿來寫文章。

比方說，「你曾經飽受失眠困擾，後來怎麼改善」或是「你是怎麼成功瘦下 20 公斤的」。

這些故事由我們這樣的素人分享，會感覺更貼近讀者、更有說服力。

如果一時間想不到也沒關係，我還有個小技巧：去翻翻你的 Google 搜尋或 ChatGPT 對話紀錄，看看你以前查過哪些問題，說不定能激發新靈感喔！

方向 3：想想你最享受的興趣是什麼

你可能喜歡 DIY 手作、閱讀、健身、露營、美妝、投資等等，只要是你熱愛的、想要分享給大家知道的東西，都能成為你的網站主題。

只要你願意分享，就有機會認識一群志同道合的朋友，甚至讓他們成為你的支持者。

關於選擇主題，其實不用太糾結。

你可能一開始會選錯方向，但老實說，就算選錯也沒關係，因為過程中你一定會學到更多。

與其停在原地，不如邊做邊調整，先開始行動會比卡在過度思考的狀況裡更好。

自己架設個人網站需要什麼？

架設個人網站必要的 3 大元素

想要架設個人網站，有必要的 3 個東西：

• 主機 (付費)
• 域名 (付費)
• 架站軟體 WordPress (免費)

你可以把網站想像成一間房子，主機是用來蓋房子的那塊土地，域名是門牌號碼，WordPress 則是把房子蓋起來的工人，這三個東西組合起來，才能建構一個完整的網站。

架站軟體 (架站平台)，可以讓我們不用自己寫程式，也能快速建好一個網站。

主機，也叫做伺服器 (Server)，是用來存放網站資料的空間，我們需要租用主機，存放網站的文字、圖片、外掛等檔案。

域名，就是網站的網址，像 Apple 官方網站的域名是 apple.com，我們也需要註冊一個專屬域名，來打造個人網站的品牌感。

在這篇教學中，我們會使用 WordPress 軟體，搭配「Bluehost 主機 + 域名」來架設個人網站。

為什麼推薦用 WordPress 架設網站？

WordPress 是一個完全免費的架站平台，全世界有 43% 的網站是用 WordPress 架設的。

我會選擇用 WordPress，而不是用像痞客邦、Blogger 這樣的部落格平台來架設個人網站，最主要的原因是為了打造品牌感，和保有最完整的自由度。

你想想看，如果是用別人的部落格平台架設網站，不但版型和功能被侷限了，就連網址也會帶著平台的名字 (例如：notesdemo.pixnet.net) 看起來就不像是自己的品牌，對吧？

更危險的是，這些平台還隨時有關閉的風險！

像當年紅極一時的無名小站說倒就倒，萬一痞客邦或 Blogger 哪天也倒閉了，你辛苦寫的文章、多年的心血就可能通通不見。

相反地，自己用 WordPress 架站就不一樣了，因為網站的資料是存放在主機上，主機是我們另外租用的，你擁有 100% 控制權，不用擔心平台倒閉讓網站消失。

所以，我會強烈建議你用 WordPress 架自己的網站 (順帶一提，你現在看到的這個「諾特斯網站」也是使用 WordPress 來架設的！)。

✏️ 諾特斯的小提醒

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

我再另外列出幾個 WordPress 的優點，你可以參考看看：

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

講完 WordPress 的優點也要講一下缺點，畢竟沒有一樣東西是完美的。

WordPress 的確需要一些時間學習才能上手，大概幾天到幾週不等，但別擔心，這系列教學會手把手帶著你把網站架起來！

⭐️ 延伸閱讀

WordPress 是什麼？如何免費安裝？

前往免費筆記

為什麼推薦 Bluehost 主機？

我推薦新手可以用 Bluehost 主機開始架站，原因有以下幾個：

① 操作簡單

Bluehost 的使用者介面非常直覺，沒有太多複雜的操作，就算是新手小白也能很快上手。

它是 WordPress 官方推薦的三家網站主機之一，提供了一鍵安裝 WordPress 的服務。

只要在 Bluehost 上同時租用主機和註冊域名，Bluehost 還會幫我們自動完成 DNS 設定，省下很多麻煩的技術細節。真的是新手的福音。

👉 延伸閱讀：DNS 是什麼？

② 24 小時真人文字客服

如果遇到任何問題，客服都能即時提供協助。

雖然線上客服需要用英文溝通，但也不用擔心語言不通，只要善用 Google 翻譯或 ChatGPT 等工具來翻譯，通常他們都能看懂。

③ 價格親民，CP 值高

Bluehost 是高 CP 值的共享主機 (虛擬主機)，我另外向 Bluehost 公司爭取了諾特斯觀眾的專屬優惠。

透過 諾特斯連結 註冊，每個月最低只要 $2.99 美金 (約 $90 台幣)。

👉 延伸閱讀：什麼是虛擬主機？

點擊連結優惠即生效！

🎁 取得專屬 3 折優惠

這個價格包含了免費的 SSL 憑證和 CDN 服務，還多送你一年免費域名，非常適合預算有限的新手。

我在大學時期，第一次架站就是使用 Bluehost 主機。

諾特斯團隊的成員鹹魚也是用 Bluehost 架站，她也用了快兩年，對主機表現也蠻滿意的。

架設 WordPress 網站要花多少錢？

前面有提到，架設網站的 3 個必要元素是架站軟體、主機和域名。

其中，我們使用的架站軟體 WordPress 是免費的，它是由世界各地的專業人士共同開發、貢獻的，不需要任何費用。

主機的部分，我們會使用高 CP 值的 Bluehost 主機架設網站，建議新手先從最便宜的方案開始，費用最低是每個月 $2.99 美金 (約 $90 台幣)。

域名的部分，在 Bluehost 租用主機會直接送你 1 年免費域名，第 2 年起，續約費用是 $23.99 美金 / 年 (約 $720 台幣 / 年)。

當然，你也可以選擇其他主機或域名平台，只是操作介面可能會跟我示範的不太一樣。

所以我會建議你跟我用一樣的組合，這樣我們的畫面和步驟都會是相同的，方便你跟著同步操作。

1. 用 Bluehost 架設 WordPress 網站

第 1 步

點擊下方諾特斯觀眾專屬連結，進到 Bluehost 官方網站。

點擊連結優惠即生效！

🎁 取得專屬 3 折優惠

第 2 步

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

第 3 步

方案價格已經自動套用優惠，點擊 Starter (入門方案) 的「Choose Plan」(選擇方案)。

✏️ 諾特斯專屬優惠推薦方案

Bluehost 提供了多種 WordPress 主機方案，諾特斯專屬優惠 中最便宜的 Starter (入門方案) 是每個月最低 $2.99 美金 (約 $90 台幣)。

Starter (入門方案) 可以建立 10 個網站，共有 10 GB 的儲存空間，適合個人網站、部落格或小公司的官方網站。

對大多數的新手來說，選 Starter 方案就很夠用了！

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

如果你有考慮其他更進階的方案，可以點擊下方連結，參考我整理的 Bluehost 方案介紹。

Bluehost WordPress 完整教學與費用分析｜高 CP 值主機推薦

進一步瞭解

(2) 註冊 Bluehost 域名

第 1 步

填寫想要註冊的域名。

✏️ 取域名的小技巧

① 使用個人元素或主題關鍵字

用你的英文名字、綽號來取域名，也可以試著加入主題關鍵字，讓人一眼就知道這個網站的主題類型，例如：旅遊類 → travel、美食類 → foodie。

② 簡短好記

域名要盡量簡單好記，避免使用符號，或是英數交錯混用，讓訪客更容易記住你，加深品牌印象。

③ 優先選擇 .com 域名

不過，要是 .com 的域名已經被取走的話，改註冊 .net 或 .org 也是可以的，不會差太多。

目前全世界有超過 40% 的網站都是用 .com 域名，最常見又好記，看起來比較正規，讓人更有信任感。

另外要特別提醒你，域名註冊後不能修改！註冊的時候務必仔細檢查，不要拼錯。

以「諾特斯網站」為例，Notes 是我的名字「諾特斯」，我想要在網站上分享有關如何架設網站的資訊，提倡「把網站當作是個人事業」的概念，所以後面加上創業的英文「startup」，域名就取作「notesstartup.com」。

第 2 步

把「Add Domain Privacy + Protection」(新增域名隱私保護) 取消勾選。

第 3 步

點擊「UNPROTECTED」(不受保護)。

第 4 步

按下「Search For Domain」(搜尋域名)。

✏️ 現在還沒有想好要用什麼域名，可以之後再註冊嗎？

當然可以，只要點「Choose domain later」(稍後選擇域名) 就可以先跳過「註冊域名」步驟。

不過，事後補註冊的操作步驟會比較麻煩，所以我會建議在註冊前就先計劃好要用什麼域名。

(3) 租用 Bluehost 主機

第 1 步

輸入「Email」(電子信箱) 並自訂一組「Password」(密碼)，這會是之後登入 Bluehost 用的帳號、密碼。

第 2 步

「Recommended Add-ons」(推薦附加元件) 都是要另外付費加購的，目前用不到，所以全部「取消勾選」。

第 3 步

對照附圖的中文翻譯，填寫「Billing Information」(帳單資訊)。

第 4 步

如果你想試試看寫部落格，不確定自己可以寫多久的話，「Shopping Cart」(購物車) 第一項可以先切換成「1 Year」(1 年)，每個月是 $3.99 美金 (約 $120 台幣)。

初期啟動的成本最低，不用一開始就砸一大筆錢，之後有需要升級再換 更高階的主機 就好。

第 5 步

Data Center (資料中心) 是指主機的所在位置，系統會依照剛剛填在「Billing Information」(帳單資訊) 填寫的地址，自動選擇離你最近的地點。

以亞洲地區為例，預設會是「India, Mumbai」(印度，孟買)。

第 6 步

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

第 7 步

「Professional Email Trial」(專業 Email 試用) 因為有贈送 1 個月試用所以費用顯示為 0 元。

但是試用結束後會自動續訂，為了避免後續忘記取消而被收取額外費用，建議先點擊「Remove」(移除) 把它刪掉。

真的有需要的話，之後再 到 Bluehost 後台加購 會比較省錢！

第 8 步

要是不想收到 Bluehost 的促銷資訊，把「YES, I want special offers and educational content from Bluehost.」(是的，我想收到 Bluehost 的特別優惠與教育內容。) 取消勾選。

第 9 步

按下藍色按鈕「SUBMIT PAYMENT」(提交付款)。

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

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

進一步瞭解

(4) 在 Bluehost 主機安裝 WordPress

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

👉 延伸閱讀：WordPress.com 和 WordPress.org 有什麼差別？

當看到這樣的 Bluehost 後台介面，就代表網站已經準備好了，點擊域名就可以打開網站。

目前網址已經是我註冊的域名，但是 SSL 憑證還沒有生效，所以網站會出現「不安全」的警告。

有的時候，不只是 SSL 憑證還沒生效，還可能遇到正式域名還沒生效，導致網站顯示臨時網址的情況。

遇到這些狀況，其實都不用緊張！

只要耐心等待幾個小時到 1 天的時間，Bluehost 就會自動幫我們把註冊的域名和網站連結起來，並安裝好免費的 SSL 憑證了。

✏️ 諾特斯的經驗分享

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

✏️ SSL 憑證與域名尚未生效時，我可以繼續後續的架站操作嗎？

域名跟 SSL 憑證還沒生效時，如果你等不及想馬上開始架站了，可以安心地照著後續教學直接開始設定。

Bluehost 會在背景自動完成設定，不會影響到後續操作。

✏️ SSL 憑證和域名一直沒有生效怎麼辦？

要是你等了一整天，域名和 SSL 憑證都還沒生效，只要從 Bluehost 後台，點擊右下角的「Ask BLU」(詢問 BLU)，Bluehost 客服會非常快速、免費幫你解決問題！

(5) 收取域名聯絡資訊確認信

第 1 步

到剛剛註冊時填寫的 Email 信箱，我們會收到幾封來自 Bluehost 的信件。

「Order Confirmation」(訂單確認) 是租主機的收據，建議保留起來。

點開主旨寫著「Alert: Keep Your Domain Active」(提醒：保持你的域名活躍) 的「域名聯絡資訊確認信」。

第 2 步

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

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

什麼是 WordPress 前台/後台？

在 WordPress 相關的筆記中，你會常常看到「WordPress 前台」、「WordPress 後台」這兩個詞，有時候也寫作「網站前台」、「網站後台」，意思都是一樣的。

WordPress 前台指的是訪客能直接看到的部分，也就是網站對外呈現的畫面。

最上面的黑色工具列，只有已登入的管理者才會看到，一般訪客只會看到工具列以下的部分。

備註：上方的紅色警告表示「網站尚未上線」，等網站公開後就會消失了，不用在意它。

相對的，WordPress 後台是管理、編輯網站的地方，只有管理者 (你自己) 才能進入。

做網站時，我們常常會在前台、後台之間切換，像是在後台進行設定，再到前台確認訪客看到的畫面是不是對的。

如何從 Bluehost 前往網站前台？

在 Bluehost 後台，點擊域名即可開啟網站。

如何從 Bluehost 前往網站後台？

在 Bluehost 後台，點擊網站名稱最右側的「WordPress Admin」(WordPress 管理員)。

(6) 自訂 WordPress 密碼

第 1 步

在 Bluehost 後台，點擊「Manage」(管理)。

第 2 步

點擊域名，開啟網站。

第 3 步

點擊左上角「儀表板」圖示。

第 4 步

點擊 WordPress 後台左側欄位的「Users」(使用者)。

第 5 步

點擊使用者名稱下方的「Edit」(編輯)。

第 6 步

按「Set New Password」(設定新密碼)。

第 7 步

把預設亂碼刪掉，填上自訂密碼。

第 8 步

點擊「Update Profile」(更新個人資料) 。

如何快速登入 WordPress 後台？

自訂好 WordPress 密碼後，以後就可以從「瀏覽器網址列」直接登入網站後台。

這個方法不限登入裝置，不管電腦、平板或手機，只要有網頁瀏覽器都可以使用。

第 1 步

在瀏覽器的網址列輸入「你的域名 /wp-admin」，再按「Enter」(輸入)。

第 2 步

輸入「Username or Email Address」(使用者名稱或電子郵件地址) 和「Password」(密碼) —— 圖片標註 ➀。

點擊「Log In」(登入) —— 圖片標註 ➁。

備註：

• 電子郵件地址即為 Bluehost 註冊時填寫的 Email
• 密碼為 上一步驟自訂的 WordPress 密碼，不是 Bluehost 密碼喔！

從瀏覽器網址列登入網站後台，可以省掉登入 Bluehost 後再跳轉的步驟，所以我會建議你之後都用這個方法登入 WordPress 後台，會比較快喔！

(7) 網站基礎設定 (WordPress 一般設定)

第 1 步

點擊 WordPress 後台左側欄位的「Settings」(設定)、「General」(一般)。

第 2 步

找到「Site Language」(網站語言)，點開選單，選擇「繁體中文」。

第 3 步

點擊「Save Changes」(儲存變更)。

介面變成中文，操作更直覺、方便。

第 4 步

填寫「網站標題」與「網站說明」。

第 5 步

檢查 WordPress 位址跟網站位址的部分，如果正式域名已經確實套用、網址的開頭也變成「https」，表示 Bluehost 提供的免費 SSL 憑證已經生效。

✏️ 不要自行更改網址

如果你還沒等域名或 SSL 憑證生效就開始設定 WordPress，WordPress 位址跟網站位址可能會顯示 Bluehost 的臨時域名，網址開頭會是 http。

請不要手動變更網址，以避免網站發生錯誤導致無法開啟後台，Bluehost 將會在域名與 SSL 憑證生效後自動修正網址。

第 6 步

根據你的所在地點，選擇對應的「時區」。

第 7 步

「日期格式」跟「時間格式」的部分，我個人都會選擇「第 1 個選項」，看起來比較符合中文閱讀的習慣：

• 「Y 年 n 月 j 日」，範例：2026 年 4 月 8 日
• 「a g:i」，範例：下午 2:56

第 8 步

點擊「儲存設定」。

(8) 公開網站 (網站上線)

目前訪客打開網站會看到 Bluehost 的預設頁面，這是為了避免訪客看到我們還沒設定好的網站。

第 1 步

點擊 WordPress 後台左側欄位的「Bluehost」。

第 2 步

點擊「Launch Site」(啟動網站) 按鈕。

後台左上角顯示綠色的「LIVE」，就表示網站公開上線了。

2. 安裝 WordPress 主題

在第 2 步驟，我會帶你了解什麼是 WordPress 佈景主題，然後跟你分享一個 很棒的免費佈景主題，帶你安裝它並套用網站模板，快速完成設計簡約、好看的外觀。

WordPress 佈景主題是什麼？

「WordPress 佈景主題」通常簡稱為「主題」，提供了豐富的網站模板和設計工具讓我們選擇。

我們可以把網站想像成一棟房子：WordPress 就像房子的結構，確保一切正常運作；網站外觀是裝潢。

我們挑選佈景主題，就像是選擇裝潢的設計師。主題會提供我們不同的網站模板，讓我們可以快速變換網站的整體風格。

更換網站模板，就像重新裝潢一樣，網站內容不會變，但網站外觀可能完全不同。

如何挑選適合的佈景主題？

在 WordPress 有上千種主題可以選擇，有要花錢的、也有免費的，在挑選時可以注意以下重點。

① 速度性能佳

好的主題程式碼精簡，不會拖慢網站速度。速度快的網站，訪客使用體驗更好，有助於 SEO 排名。

② 主題定期更新

WordPress 會一直改版，因此主題開發團隊必須持續地維護、優化佈景主題，才能確保網站的穩定性、安全性。

③ 安裝人數與評價高

優先考慮安裝數高、評分高的主題，通常這樣的主題功能比較完整、穩定性更好，在網路上能找到的教學資源相對較多，可以減少踩雷的機會。

④ 支援響應式設計 (RWD)

現在大部分人都用手機上網，所以響應式設計是必須的，它能讓網站在手機、平板、電腦上都能正常顯示，保持排版整齊。

⑤ 支援常見的頁面編輯器

如果主題能搭配 Elementor、Brizy 這類的頁面編輯器，就算完全不會寫程式，也能用拖拉的方式做出漂亮的網頁，要客製化網站設計時會更有彈性。

現在你應該已經對「怎麼挑一個好的 WordPress 主題」有基本的概念了。

之後在逛網站時，你可以多多觀察其他人的網站，如果看到喜歡的排版設計，就能用下面這個工具查詢該網站的佈景主題。

👉 點我前往：WordPress 主題查詢工具

如果你還沒找到心儀的主題，我推薦你一款非常適合新手的主題 —— Blocksy！

🎁 免費下載 Blocksy

為什麼推薦 Blocksy 主題

Blocksy 主題 不但風格簡約，功能還非常強大，像我自己的 諾特斯網站 就是用 Blocksy 做的。

它不只符合剛剛提到的 優秀佈景主題挑選條件，我最推薦的原因是 —— Blocksy 免費版就非常好用，功能甚至比一些知名的付費主題還要強！

很多在其他主題要付費才能解鎖的功能，比如固定的頁首、側邊欄，還有客製化的網站配色等等，Blocksy 都是免費提供。

這正好符合我的架站觀念：「能用免費的就先用免費的，等到有更高階的需求時，再考慮花錢升級就好。」

這樣一來，你就能用最少的預算，輕鬆打造專業又好看的網站。

(1) 安裝佈景主題的 2 種方法

方法 1：搜尋佈景主題

第 1 步

在 WordPress 後台，選擇左側欄位的「外觀」、「佈景主題」。

第 2 步

點擊「安裝佈景主題」。

第 3 步

在右上角的搜尋欄，輸入你想安裝的主題名稱。

第 4 步

點擊「安裝」。

第 5 步

點擊「啟用」。

第 6 步

按下「安裝 Blocksy Companion」解鎖 Blocksy 免費版的完整功能。

方法 2：在佈景主題官網下載檔案並自行上傳

第 1 步

點擊下方連結，前往 Blocksy 官方網站。

🎁 免費下載 Blocksy

第 2 步

點擊「Free Download」(免費下載)。

第 3 步

點擊「Download」(下載)，獲得主題 zip 檔。

第 4 步

在 WordPress 後台，選擇左側欄位的「外觀」、「佈景主題」。

第 5 步

點擊「安裝佈景主題」。

第 6 步

點擊「Upload」(上傳)。

第 7 步

把剛剛下載的主題 zip 檔拖曳進來上傳。

第 8 步

按下「立即安裝」。

第 9 步

點擊「啟用」。

第 10 步

點一下「安裝 Blocksy Companion」，解鎖 Blocksy 免費版的完整功能。

我比較 推薦第 2 個安裝方法，因為從官網下載主題可以確保安裝到正確的主題，避免在搜尋時誤裝到名字相似的其他主題。

而且學會這個方法也很實用，以後如果要升級成付費版，一樣是用第 2 個方法安裝。

(2) 套用模板 (入門網站)

第 1 步

點擊「入門網站」套用主題提供的現成模板，來節省設計的時間。

✏️ PRO 模板限制

有標示 PRO 是付費版 Blocksy 才開放使用的模板，不過光是免費的模板就有許多款式、很夠用了。

第 2 步

我挑選的是「News」(新聞) 模板，點「預覽」可以查看範例網站。

這個模板設計簡潔，頁首、頁尾、資訊欄 (也就是側邊欄)，這些基本要素都很齊全，滿適合新手使用的。

第 3 步

點擊「匯入」來套用模板。

第 4 步

把 Content (內容) 取消勾選，才不會把範本的文章、圖片也匯進網站，佔用儲存空間 —— 圖片標註 ➀。

點擊「下一個」—— 圖片標註 ➁。

第 5 步

點擊「安裝」。

點擊「查看網站」，查看套用 Blocksy 主題的網站長什麼樣子。

雖然網站內容現在還空空的，但可以看出 Blocksy 已經幫我們做好一個簡約、乾淨的版型了。

3. 安裝 WordPress 外掛

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

什麼是 WordPress 外掛？

「WordPress 外掛」就是用來擴充網站功能的工具。

WordPress 並不是一開始就把所有功能都內建在系統裡，這麼做是為了保持核心程式的輕量、彈性，方便不同使用者依照需求，自由加裝額外功能。

你可以根據自己的需求挑選外掛，把缺少的網站功能補齊。

這就像幫手機安裝不同功能的 Apps，安裝之後，手機就會多出導航、拍照、玩遊戲等等額外功能。

目前，WordPress 有超過 6 萬個外掛，而且還在不斷增加中。

大部分外掛都是免費的，付費外掛則大多採「基礎功能免費，進階功能付費」的模式。

這正好符合我的架站觀念：「能用免費的，就先用免費的。等到有更高階的需求時，再考慮花錢升級就好。」

接下來，我會告訴你怎麼安裝外掛，還有分享我花很多時間親自測試、比較之後，精選出來的 7 款免費、實用外掛。

(1) 刪除不需要的外掛

第 1 步

在 WordPress 後台，點擊左側欄位的「外掛」，進到外掛列表。

Bluehost 已經預先幫我們安裝好幾款外掛了，但大部分其實都用不到。

我們可以刪掉這些外掛讓後台變得更簡潔，既不會浪費主機資源，還能提升網站速度。之後如果真的有需要，再把外掛重新安裝回來就好。

除了在 第 2 步驟 配合 Blocksy 主題安裝的 Blocksy Companion 要留著，其他外掛都能刪掉。

第 2 步

勾選藍底的外掛。

第 3 步

「批次操作」選擇「停用」—— 圖片標註 ➀。

點擊「套用」—— 圖片標註 ➁。

第 4 步

停用的外掛會變成白底，把要刪掉的外掛通通打勾。

第 5 步

「批次操作」選擇「刪除」—— 圖片標註 ➀。

點擊「套用」—— 圖片標註 ➁。

第 6 步

按下「確定」。

系統就會逐一刪掉這些外掛了。

(2) 安裝 WordPress 外掛的 2 種方法

安裝 WordPress 外掛方法 1：從 WordPress 後台搜尋

第 1 步

點擊「安裝外掛」。

第 2 步

在右側搜尋欄位輸入外掛名稱「Rank Math」。

備註：這篇教學的第 4 步驟、第 6 步驟都會用到「Rank Math」這款 SEO 外掛，建議先安裝好。

第 3 步

第一個搜尋結果就是我要找的外掛，點擊「立即安裝」。

第 4 步

按下「啟用」。

安裝 WordPress 外掛方法 2：自行上傳外掛檔案

第 1 步

點擊下方連結，打開 Rank Math 官網。

下載免費外掛

第 2 步

點擊右上方的「DOWNLOAD」(下載)，得到外掛 zip 檔。

第 3 步

回到 WordPress 網站後台，點擊「安裝外掛」。

第 4 步

點擊「上傳外掛」。

第 5 步

將剛剛下載的外掛檔案拖進來。

第 6 步

點擊「立即安裝」。

第 7 步

按下「啟用外掛」。

我比較 推薦第 2 種安裝方法，因為從官網下載可以確保安裝到正確的外掛，避免在搜尋時誤裝名字相似的其他外掛。

而且學會這個安裝方法也很實用，以後如果要升級成付費版外掛，一樣是用「下載外掛檔案後自行上傳」的方式安裝。

諾特斯推薦的免費 WordPress 外掛

備註：本教學有用到的外掛會標示為必安裝，其他的就看自己的需求，有需要再安裝就好！

• Rank Math：必安裝，強大的 SEO (搜尋引擎優化) 外掛，幫助你提升 Google 排名
• Kadence Blocks：必安裝，進階區塊外掛，讓你的文章看起來更專業、更精緻。
• Akismet Anti-Spam：過濾垃圾留言，防止表單被惡意濫填。
• NitroPack：輕鬆提升網站速度。
• Wordfence Security：強化網站資安防護，避免駭客入侵。
• Pretty Links：將冗長的網址轉換為品牌專屬的短網址，一鍵更新全站連結
• Elementor：頁面編輯器，讓你不會寫程式也能做出媲美專業設計師的精美網頁。
• 更多好用外掛：諾特斯推薦的 WordPress 工具清單 (持續更新)

⭐️ 延伸閱讀

NitroPack｜我最推薦的免費 WordPress 網站速度優化外掛

前往免費筆記

4. 新增文章、頁面、選單

在第 4 步驟，我會跟你分享如何在 WordPress 網站新增文章、頁面、選單。

包括在文章、頁面新增圖片、影片、自訂超連結，還有自訂頁首選單等等。

還要跟你分享重要的網站/部落格搜尋引擎優化 (SEO) 的技巧，讓你的文章、頁面可以出現在 Google 搜尋的第一頁。

WordPress 文章 (Post) & 頁面 (Page) 的差別

在 WordPress 裡，當我們想寫一些內容，有建立「文章」或「頁面」2 種方式，它們有什麼不同呢？

文章 (Post) 是什麼？

文章會顯示作者名、發佈時間，能加上分類 (Categories) 和標籤 (Tags)，並且預設開啟留言功能讓訪客可以和站長互動。通常一個網站裡的文章版型都差不多，差別只在內容不一樣。

以我的諾特斯網站為例，每一篇筆記都是用文章來建立的，像你正在看的這篇筆記就是「文章」！所有文章版型一致，但每篇內容都不同。

頁面 (Page) 是什麼？

頁面的特色正好與文章相反，它不會顯示作者、發佈時間，不能設定分類和標籤，預設沒有留言功能。每個頁面都可以獨立設計排版，通常用來放比較固定、不常變動的內容。

以我的諾特斯網站為例，像是「關於諾特斯」、「觀眾許願池」、「諾特斯團隊好評」都是用頁面建立的。我會依照每個頁面想傳達的內容，做不同的排版設計。

如何分辨文章與頁面的使用時機

什麼時候應該用「文章」？ 什麼時候又該用「頁面」呢？

其實只要問自己 2 個問題，就能快速判斷。

① 這份內容的「時效性」重要嗎？

文章會顯示發佈日期或更新日期，讀者一看就能知道新舊，適合會隨著時間更新的內容。

頁面不會顯示日期，更適合那些相對固定、長期有效的資訊。

② 這份內容需不需要「分類」整理？

文章可以加上分類和標籤，讓讀者可以快速找到相關的內容。

頁面則是獨立存在的，彼此之間沒有太大關聯。

所以，需要被歸類的內容就用「文章」建立；可以獨立存在的內容就用「頁面」建立。

假設你在經營一個「美食部落格」網站，你會不斷更新食記，但餐廳資訊可能會逐漸過時，所以內容的「時效性」就很重要。你也需要用「分類」來整理每篇食記，方便讀者快速找到相關內容。

像食記這樣有「時效性」並需要「分類整理」的內容，就適合用「文章」來建立。

相反地，像是「關於我」的自我介紹，基本上不太會變動，就算要更新也是直接修改，而不是另外寫一篇新的。

像這樣不常更新的內容，就適合用「頁面」來建立。

掌握這些原則，你就能快速判斷網站內容該用「文章」還是「頁面」建立囉！

(1) 新增 & 編輯文章

這次教學，我會以「美食部落格」當範例，寫一篇介紹慕尼黑地方餐廳的文章，這篇文章我是這樣規劃的：

1. 介紹當地飲食文化
2. 分享 5 間慕尼黑傳統料理餐廳 (包含餐廳資訊、個人用餐心得)
3. 結語

在 WordPress 後台，點擊左側欄位的「文章」、「新增文章」，開啟 WordPress 的區塊編輯器 (Block Editor)。

✏️ 區塊 (block) 是什麼？

在 WordPress 編輯器裡，不管是文字、標題、圖片、表格還是影片，所有元素都是一個一個的「區塊」。

你可以把它們想像成一塊一塊的「積木」，積木有大有小，形狀、功能不一樣，但每一塊就是一個單位。比如說，剛剛你打的標題是一塊「標題」積木，內文則是「段落」積木。

我們把不同的區塊拼湊起來、調動順序，就能把文章編排成想要的樣子。

[1] 編輯文字 (標題 & 段落)

第 1 步

輸入「主標題 (H1)」，也就是文章的「名字」，會顯示在 Google 搜尋結果和網站後台的文章列表裡。

第 2 步

輸入文章內文，第一段可以簡單介紹一下這篇文章要聊什麼當開場。

WordPress 的文字編輯方式跟 Word 之類的文書軟體很像，可以變更對齊方向、粗體斜體還有顏色等等設定。

[2] 新增標題

每一段內容前面加上標題的話，文章看起來架構比較清楚，讀者能一眼看出「這是新章節的開始」。

第 1 步

點左上角的「+」號 (區塊插入器)。

第 2 步

點擊「標題」。

第 3 步

新增標題的時候，預設標題標籤是「H2」，如果要調整它，要點「變更階層」切換到其他層級。

標題標籤 (Heading Tag) 是什麼？H2、H3、H4 是什麼？

在 WordPress 裡，我們會用 H1 到 H6 這 6 種「標題標籤」來區分標題的層級。

你可以把文章想像成一本書：

• H1 是主標題，就像是書的「名字」，每篇文章只會有一個。
• H2 是大標題，就像書的「第幾章」，用來標示文章的主要段落主題。
• H3 是中標題，就像「第幾小節」，用來再細分 H2 底下的內容。

一般來說，1000 字以內的短文章，用到 H2 就很夠了；長一點的文章，可以再搭配 H3，必要時再加上 H4。

基本上，只要把 H1 + H2 + H3 用好，就已經能把文章架構整理得很清楚了。

做好階層架構，不只是方便讀者閱讀，更可以幫助 Google 快速看懂文章脈絡。

當 Google 更懂你的文章內容，自然就比較有機會在搜尋結果中拿到更好的排名。

另外也要提醒，標題標籤不是用來調整字體大小的！

不可以從 H2 直接跳到 H4，必須按照 H2 → H3 → H4 這樣的階層來寫。

如果階層亂掉，不只讀者會覺得混亂，還會干擾 Google 對文章結構的判斷。

我們可以從編輯器左上角的「內容總覽」、「大綱檢視」檢查文章的標題階層是否正確。

[3] 新增段落 (一般文字)

輸入標題後按「Enter」，系統會自動新增一個「段落」區塊，可以接著繼續寫文章內容。

[4] 新增超連結

我可以用「Link」(連結) 功能，加入其他網站的相關資料，作為延伸閱讀。

第 1 步

打開連結的目標頁面，全選並複製網址。

第 2 步

回到 WordPress 後台，選取要連結的文字 —— 圖片標註 ➀。

點擊「Link」(連結) —— 圖片標註 ➁。

第 3 步

貼上網址，再按「Enter」(輸入)。

第 4 步

點擊「編輯連結」。

第 5 步

點開「進階」。

第 6 步

我通常會把「在新分頁中開啟」打勾 —— 圖片標註 ➀。

按「儲存」完成設定 —— 圖片標註 ➁。

這樣做的好處是，當讀者點擊連結時會在新分頁開啟目標網頁，不會直接離開我們的網站。

第 7 步

按「儲存草稿」把目前的進度存檔。

第 8 步

點擊「檢視」—— 圖片標註 ➀。

選擇「在新分頁中預覽」—— 圖片標註 ➁。

到網站前台點一下剛剛做好的超連結，確認能不能順利打開目標網頁。

[5] 新增圖片 (上傳圖片到媒體庫)

如果文章只有文字，大部分的人應該很快就看不下去了，圖文並茂才更有吸引力，提升讀者把文章看完的意願。

所以我們來加幾張圖片，讓文章內容更豐富。

第 1 步

在「區塊插入器」選擇「圖片」。

第 2 步

我建議選擇「媒體庫」來上傳，這樣可以一次匯入多個檔案，比較方便。

第 3 步

打開電腦的圖片資料夾，將檔案全部拖進瀏覽器視窗。

填寫圖片替代文字

圖片上傳完後，需要填寫每張圖的附件詳細資料。

其中最重要的是替代文字 (Alternative Text / Alt Text，又稱為 Alt 屬性、Alt 描述)，你可以把它想成是「用文字來描述這張圖片內容」。

當圖片無法顯示，或者讀者使用螢幕閱讀器而不是直接看到圖片時，他們可以透過替代文字來理解圖片在表達什麼，這對視障者來說尤其重要！

另一方面，替代文字也是給搜尋引擎看的，它能幫助搜尋引擎的爬蟲「看懂」圖片內容。

因此，我們可以在「替代文字」中加入想爭取的關鍵字，讓圖片有機會出現在 Google 圖片搜尋結果，為網站帶來更多曝光和流量。

舉例來說，如果我希望這篇文章在「慕尼黑美食」這個關鍵字有更好的排名，就可以把替代文字寫成「慕尼黑美食文化」。

如此一來，當有人搜尋「慕尼黑美食」時，除了可能在一般搜尋結果看到我的文章，還有機會透過圖片搜尋結果連進來。

剩下的圖片標題、媒體說明文字和內容說明，對 SEO 的影響就相對比較小。

填寫圖片標題、內容說明

圖片標題 (Title) 跟內容說明 (Description) 的主要用途其實是幫我們的後台做管理。

例如原檔名是英文，我就會把「圖片標題」改成中文，這樣比較直覺好記。

「內容說明」則可以當作備註來用，存放一些相關字。

以後要找圖的時候，除了用檔名搜尋之外，也可以用「圖片標題」或「內容說明」裡的字詞來找指定圖片。

媒體說明文字 (Caption) 就是圖片下方的小字，會出現在網站前台，訪客也看得到。

通常用來補充說明、標註來源，要不要填就看你的需求，沒有一定要寫。

從媒體庫插入圖片到文章

選擇要插入文章的圖檔 —— 圖片標註 ➀。

點「選取」—— 圖片標註 ➁。

[6] 新增圖示清單 (icon list)

接下來的「餐廳介紹」章節，我會分享幾間當地餐廳，那麼地址、價位這些基本資訊一定不能少，這類資訊適合用條列式呈現，讀起來會清楚很多。

第 1 步

點擊「+」(區塊插入器) —— 圖片標註 ➀。

選擇「Icon List」(圖示清單)，這是一個前面帶有小圖示的條列項目—— 圖片標註 ➁。

✏️ 小筆記

必須安裝並啟用外掛 Kadence Blocks，「區塊插入器」的最上面才會有藍色的進階區塊可以使用。

備註：點 這裡 複習如何安裝外掛。

🎁 免費安裝 Kadence Blocks

第 2 步

輸入餐廳地址 —— 圖片標註 ➀。

在右邊欄位點「Select Icon」(選擇圖示) —— 圖片標註 ➁。

第 3 步

搜尋「pin」—— 圖片標註 ➀。

選「地圖標記」(第一個圖示) —— 圖片標註 ➁。

✏️ 諾特斯的設計參數：圖示清單

• 人均消費：圖示搜尋「creditcard」，選「信用卡」的圖示。
• 餐廳地址：圖示搜尋「pin」，選「地圖標記」(第一個圖示)。
• 推薦指數：圖示搜尋「thumb」，選「讚」的圖示。

[7] 新增影片 (嵌入 YouTube 影片)

影片建議放到影音平台 (例如： YouTube、TikTok)，之後再嵌入文章裡，不要直接上傳到網站後台。

這樣能省下大量主機儲存空間，網站也會跑得比較順。

第 1 步

打開 YouTube 影片，點擊「分享」。

第 2 步

按下「複製」。

第 3 步

回到 WordPress 編輯器，把網址直接「貼上」。

影片就自動嵌入文章裡了。

[8] 新增手風琴 (Accordion)

備註：本步驟需要先安裝並啟用 Kadence Blocks 外掛。

在「餐廳介紹」的最後，我還想補充推薦餐點和交通資訊。

這種屬於補充性質、非必要的內容，適合放在手風琴裡，讓有興趣的讀者再自行點開閱讀，才不會讓文章顯得太冗長。

第 1 步

在「區塊插入器」選擇「Accordion」(手風琴)。

第 2 步

挑選自己喜歡的手風琴樣式。

第 3 步

在 Title (標題) 打上「推薦餐點」。

第 4 步

點擊「新增區塊」。

第 5 步

按下「瀏覽全部」。

第 6 步

選擇「清單」，內容列出幾道推薦的特色菜。

[9] 新增按鈕

第 1 步

在「區塊插入器」選擇「按鈕組」。

第 2 步

在按鈕上輸入文字，比如說「查看完整菜單」。

第 3 步

點擊「連結」—— 圖片標註 ➀。

「貼上」網址後按「Enter」—— 圖片標註 ➁。

第 4 步

點擊「編輯連結」。

第 5 步

把「在新分頁中開啟」打勾 —— 圖片標註 ➀。

按下「儲存」—— 圖片標註 ➁。

第 6 步

點擊「變更項目分散對齊方式」—— 圖片標註 ➀。

選擇「項目置中分散對齊」—— 圖片標註 ➁。

至於按鈕的顏色和文字大小，現在先不用管，我會等到 第 5 步驟：設計網站外觀 時再統一調整。

[10] 新增地圖 (Google Maps)

備註：本步驟需要先安裝並啟用 Kadence Blocks 外掛。

第 2 個手風琴我打算用來放交通資訊，除了大眾運輸和停車資訊之外，我還要加上一張定位地圖讓讀者參考。

第 1 步

在「區塊插入器」選擇「Google Maps」。

第 2 步

在右側欄位的「Location」(位置) 輸入地點，地圖就會定位到指定位置。

[11] 新增 HTML 錨點

寫到最後的「結語」章節，別忘了加上行動呼籲。

以這次示範的「食記」為例，「一定要親自去品嚐看看！」就是很常見的 CTA。

當讀者心中燃起「我要去吃！」的念頭時，他們最直接的需求就是「回頭再看一下剛剛推薦了哪些餐廳」。

所以我會設計一個「捷徑」，讓他們不用再往上滑，就能迅速回到「餐廳介紹」章節。

這時候就可以用到「HTML 錨點」功能，它就像文章內部的超連結，能直接帶讀者回到指定的位置。

第 1 步

回到「餐廳介紹」章節，選取標題 —— 圖片標註 ➀。

打開右側欄位的「進階設定」—— 圖片標註 ➁。

第 2 步

在「HTML 錨點」設定代稱，我自己習慣用英文命名。

第 3 步

回到「結語」章節，選取要連結的文字 —— 圖片標註 ➀。

點擊「連結」—— 圖片標註 ➁。

第 4 步

輸入「#」再加上剛剛設定的 HTML 錨點名稱，然後按「Enter」。

[12] 新增目錄 (Table of Contents)

備註：本步驟需要先安裝並啟用 Kadence Blocks 外掛。

目錄可以讓讀者一眼看懂文章架構，找到他想要的內容在哪；也能幫助 Google 更好理解文章內容，對 SEO 有加分效果。

第 1 步

在「區塊插入器」選擇「Table of Contents」(目錄)。

第 2 步

把英文標題「Table of Contents」改成中文的「目錄」。

到這裡，「文章內容」就算是編輯完成了，你可以自己再試試「區塊插入器」裡的其他區塊，很多功能都很好玩，也很實用。

(2) 使用 Rank Math 外掛優化文章 SEO

我們用心寫好的文章，當然希望有更多人看到，對吧？

所以我會用 Rank Math 這款外掛，來檢查文章 SEO 做得好不好，有沒有符合「SEO 友善」標準，並根據外掛的建議修改文章。

✏️ 小筆記

必須安裝並啟用 SEO 外掛 Rank Math 才能跟著此步驟操作！

備註：點 這裡 複習如何安裝外掛。

下載免費外掛

[1] 設定焦點關鍵字 (Focus Keywords)

第 1 步

點擊區塊編輯器右上角的「Rank Math」圖示。

第 2 步

在 Focus Keyword（焦點關鍵字）這邊，設定你想爭取 Google 排名的關鍵字。

比如說，我希望有人搜尋「慕尼黑美食」時能看到我的文章，就在這邊輸入「慕尼黑美食」。

[2] 依照 SEO 建議修改文章

Rank Math 會依據焦點關鍵字來分析文章的 SEO 表現，現在可以看到，這篇文章的分數目前不太理想。

接下來，我們要照著 Rank Math 提供的檢查清單去調整文章，慢慢提高 SEO 分數。

「綠色打 ✔」的項目代表我們已經做到了，可以先跳過。

「紅色打 ✘」的項目則是還需要優化的部分，我們就是要針對這些項目處理。

不過要先提醒你，雖然我們的目標是把檢查清單盡量完成，但這款外掛是針對英文設計的，而我們是用中文來寫文章，所以有些項目不管怎麼做都無法達成。

這時候就別太糾結，一般來說只要能超過 80 分，就算是一篇 SEO 友善的文章了。

第 1 部分 Basic SEO (基礎 SEO) 主要提醒我們，在文章的標題、描述、內文都要放入焦點關鍵字，才能讓搜尋引擎快速了解文章主題。

基本 SEO ①：在標題中加入焦點關鍵字

把「慕尼黑美食」加到標題裡，項目就變成綠色通過了，分數也上升很多。

基本 SEO ②：在 SEO 描述中加入焦點關鍵字

點擊「Edit Snippet」(編輯摘要)。

在「Description」(描述) 輸入簡短的文章介紹，別忘了把焦點關鍵字放進去 —— 圖片標註 ➀。

按右上角「✕」關閉視窗並儲存設定 —— 圖片標註 ➁。

基本 SEO ⑥：文章長度太短，建議至少要有 600 字

其實這是 Rank Math 偵測中文的 bug，我的示範文章早就達標了。

所以這一項直接忽略就好，它不會真的影響到 SEO 排名。

第 2 部分 Additional (額外項目) 是針對文章的圖片、影片、連結等附加元素的豐富度，還有焦點關鍵字的使用情況來做評分。

額外項目 ⑦：在文章裡加入內部連結

「內部連結」是指導向同一個網站裡的其他頁面的連結。

像是在結語的地方，我們可以加一個「延伸閱讀」，引導訪客去看其他文章，這樣可以延長他們在網站的停留時間、增加網站黏著度。

選取文字，點擊「連結」。

「貼上」網址。

按下「Enter」(輸入)，就能拿到分數了。

額外項目 ⑨：使用 Content AI 優化文章

「Content AI」是 Rank Math 提供的 AI 工具，用了它也不代表 SEO 一定會變好，我自己平常也沒有在用，所以這項就直接跳過，不用理會。

第 3 部分是 Title Readability (標題可讀性)。

標題可讀性 ②：標題要包含數字

具體的數字帶給讀者更明確的期待感，比較容易吸引人點擊，是很常見的 SEO 標題技巧。

只要在主標題加上餐廳數量「5 家」，這項就通過了。

如果想看更完整的優化教學，可以點擊下方按鈕，在另一篇「Rank Math 教學」有更詳細的 SEO 技巧解說跟設定示範。

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

前往免費筆記

諾特斯的 Rank Math 經驗分享

提醒你一下，千萬不要太執著在 SEO 分數上！

像這篇文章，其實已經拿到 84 分。剩下沒達成的項目多半是外掛本身限制造成的，不會對文章的真實 SEO 有負面影響。

基本上，中文文章的分數只要在黃燈～綠燈之間就已經很不錯了！

你只要跟著 Rank Math 的檢查清單去調整，就已經贏過很多完全沒做 SEO 的文章。

下載免費外掛

對我來說，Rank Math 是我目前找到最實用的 SEO 外掛，它的建議明確，新手可以邊做邊學，慢慢養成 SEO 觀念。

時間久了，你寫文章的時候自然就會考慮到 SEO 規劃。

我自己也是靠 Rank Math 讓不少文章有不錯的排名，所以我還蠻推薦大家使用的！

(3) 設定與發佈文章

[1] 設定精選圖片

「精選圖片」就是在文章列表上顯示的一張張封面圖片。

點擊右上角的「設定」，切換到「文章」。

點擊「設定精選圖片」。

挑一張具代表性的照片，按下「設定精選圖片」。

[2] 設定內容摘要

「內容摘要」是一段會顯示在文章列表上的簡介，可寫可不寫。

像股癌的網站就有放，但我自己是習慣不寫，我覺得版面看起來會比較簡潔。

[3] 設定永久連結 (代稱/文章網址)

「代稱」是文章網址的最後一段，可以自訂。

雖然用中文或英文對 SEO 沒有影響，但用中文的話，在網址複製、貼上後會變成一長串亂碼，看起來不太美觀，所以我通常會用簡短的英文翻譯作代稱。

[4] 設定分類 (Category)

以我示範的美食部落格為例，我打算先分成歐洲、美洲、亞洲，然後底下再細分不同國家。

第 1 步

點擊「新增分類」。

第 2 步

輸入「歐洲食旅」—— 圖片標註 ➀。

按下「新增分類」—— 圖片標註 ➁。

第 3 步

輸入「德國」—— 圖片標註 ➀。

上層分類選擇「歐洲食旅」—— 圖片標註 ➁。

按下「新增分類」—— 圖片標註 ➂。

這樣「德國」就會變成「歐洲食旅」底下的子分類。

第 4 步

把「德國」以外的分類都「取消勾選」。

[5] 設定標籤 (Tag)

「標籤」可以把它想成 IG 的 Hashtag，用來幫文章加上主題索引。

它對 SEO 幾乎沒什麼幫助，數量不用太多，建議控制在 0 到 3 個就好。

以示範的這篇食記來說，我就可以加上「慕尼黑」、「德國美食」、「餐廳推薦」這幾個標籤。

分類 & 標籤的差別與使用時機

很多新手常常會把分類跟標籤搞混，它們的確看起來有點像，但其實用途差很多。

你可以把分類想成是「資料夾」，幫文章做大方向的分類，讓人一眼就知道內容屬於哪個主題。

標籤則像是貼在文件上的「便利貼」，補充說明文章的重點。

簡單來說，分類比標籤更重要！

每篇文章至少要有一個分類，而標籤則是非必要的，依個人需求添加即可。

如果你想更深入了解分類跟標籤的差別，還有該怎麼正確使用，可以進一步閱讀我寫的另一篇筆記。

WordPress文章的「分類」vs「標籤」｜如何正確地使用分類和標籤？

前往免費筆記

[6] 發佈文章

第 1 步

點擊「發佈」。

第 2 步

再點一次「發佈」。

點擊「檢視文章」到前台看文章成品。

如果你對排版或顏色不滿意，我們會到 第 5 步驟：設計網站外觀 再調整，讓它變成你喜歡的風格。

(4) 新增 & 編輯頁面

在 WordPress 後台，點擊左側欄位的「頁面」。

[1] 刪除預設頁面

第 1 步

頁面列表裡面會看到系統預設的草稿頁面，按下「移至回收桶」。

第 2 步

點擊「回收桶」。

第 3 步

點擊「永久刪除」，才是把草稿頁面徹底刪掉。

[2] 新增頁面

點擊「新增頁面」。

[3] 編輯頁面

這次示範寫一個「自我介紹」頁面，「標題」就打「關於 XXX (替換成你的名字)」。

第 1 步

選擇「媒體及文字」。

內容可以先放一張大頭貼，再加一段開場白。

第 2 步

點擊「媒體庫」。

第 3 步

從 批次上傳 的圖片裡面選擇自己的形象照 —— 圖片標註 ➀。

點擊「選取」—— 圖片標註 ➁。

第 4 步

在右側「設定」欄位，把「媒體寬度」改成「20」，把大頭貼調整為適當大小。

備註：寬度可依個人喜好調整，「20」只是參考值。

第 5 步

點擊「文字」區塊，輸入「大家好，我是XXX (替換成你的名字)」，再加上兩三句自我介紹。

除了「自我介紹」之外，「關於我」頁面也可以寫一些小故事，例如「我為什麼會開始製作這個網站」或是「對網站的期許」。

[4] 發佈頁面

第 1 步

點擊「發佈」。

第 2 步

再按一次「發佈」。

點擊「檢視頁面」就可以在網站前台看到「關於 XXX」頁面。

(5) WordPress 選單設定

這時候你有沒有發現，右上角出現了「關於 XXX」的連結呢？

這一排就是網站的「選單」，它會出現在網站每一個頁面上，所以我們應該要把特別希望訪客點擊的重點內容放進來。

舉例來說，如果我希望訪客能很快在網站上找到「首頁」或是各種「分類」，那就應該把這些項目加到選單裡。

[1] 新增選單

第 1 步

點擊 WordPress 後台左側欄位的「外觀」、「選單」。

第 2 步

「選單名稱」可以寫「主選單」比較直觀 —— 圖片標註 ➀。

在「指定編輯中選單的顯示位置」把「頁首選單 1」打勾，這個選單才會出現在網站最上面 —— 圖片標註 ➁。

第 3 步

按下「建立選單」。

[2] 新增選單項目：分類

第 1 步

點開「分類」。

第 2 步

切換到「檢視全部」。

第 3 步

勾選想要的分類 —— 圖片標註 ➀。

按下「新增至選單」 —— 圖片標註 ➁。

[3] 新增選單項目：頁面

第 1 步

點開「頁面」。

第 2 步

切換到「檢視全部」。

第 3 步

把要加進選單的頁面打勾，再按下「新增至選單」。

[4] 新增選單項目：文章

第 1 步

點開「文章」。

第 2 步

把要加進選單的文章打勾，按下「新增至選單」。

第 3 步

點開項目右邊的「小三角形」圖示。

第 4 步

文章標題通常比較長，不適合直接顯示在選單上。

只要把「導覽選單項目標籤」改成簡短的標題，選單看起來就會清爽很多。

[5] 新增選單項目：自訂連結

比如說我有經營 YouTube 頻道，就可以把連結放到選單裡，引導訪客去看影片。

第 1 步

複製 YouTube 頻道網址。

第 2 步

回到 WordPress 後台，點開「自訂連結」。

第 3 步

「貼上」網址 —— 圖片標註 ➀。

「連結文字」輸入「YouTube」—— 圖片標註 ➁。

按下「新增至選單」—— 圖片標註 ➂。

第 4 步

點擊右上角「顯示項目設定」。

第 5 步

把「連結目標開啟方式」打勾。

第 6 步

點開剛剛新增的「YouTube」項目，把「在新分頁中開啟連結」打勾。

這樣訪客點擊連結時不會直接離開你網站，而是另外打開一個新分頁。

[6] 選單重新排序 (製作下拉式選單)

在網站後台，選單是「由上而下」排列；但是在網站前台會轉換成「從左到右」顯示。

如果選單項目太多就會變得很長一條，反而沒有重點，這時候就可以用「子選單 (下拉式選單)」來整理它們。

第 1 步

假設我要把「日本」放到分類「亞洲」底下，只要把項目往「右」拖一點，它就會變成「亞洲」的子項目。

第 2 步

長按滑鼠左鍵，拖曳項目上下移動可以調整選單項目的排序。

第 3 步

按下「儲存選單」。

從網站前台檢查，滑鼠移到選單主項目 (有小三角形的圖示) 就會展開子選單了。

這次示範網站我把所有類型的「選單項目」都加進來了，所以看起來比較雜亂。

等你的網站內容越來越豐富的時候，記得要讓選單保持簡潔，只放最精華的項目就好。

這樣不只方便訪客快速找到重點，也不會因為選項太多而分心，不知道該看什麼。

5. 客製化網站外觀 (使用 Blocksy 主題)

在第 5 步驟，我會跟你分享如何完成網站的視覺設計，包括如何用 Blocksy 自訂器調整顏色、字體和排版，打造出你想要的風格。

如果你跟我一樣不懂設計也沒關係，我們可以 透過 AI 快速生成專屬的品牌 LOGO，讓你的網站看起來專業又有質感。

也會帶你一起完成響應式網頁設計，讓網站在電腦、平板和手機上都能有良好的瀏覽體驗。

網站的基本架構

不管一個網站看起來多複雜，你都可以把它拆成 3 大部分：頁首、網站內容、頁尾。

• 頁首：網頁最上方區域，通常會放網站的 LOGO、名字和選單。
• 內容：位於頁首和頁尾之間，網頁中間最大的區域，展示主要內容 (文字、圖片、表格…)。
• 頁尾：網頁最下方區域，通常會放版權聲明、聯絡方式或表單。

認識 Blocksy 自訂器

在 第 3 步驟，我們已經幫網站安裝好 Blocksy 佈景主題，也套用了模板，網站現在看起來已經有基本的樣子了。

但你肯定不希望網站長得跟別人一樣，對吧？

如果想要打造專屬的視覺風格，像是調整網站的顏色、字體、排版等等細節，我們就要用到 Blocksy 的「自訂器」。

它是一個可以即時預覽修改的設計介面，讓你不用寫程式碼，就能輕鬆調整網站外觀。

我接下來示範的所有功能和選項名稱，都是以 Blocksy 主題為準，如果你用的是其他主題，可能會缺少某些功能，或是選項不太一樣。

所以我建議你直接 跟我一樣使用 Blocksy 主題，這樣比較方便對照學習。

🎁 免費下載 Blocksy

我建議從網站的整體風格開始，先確定大方向的設計，再調整細節。

備註：這篇筆記沒有帶到所有的設定選項，有些我覺得維持預設就好、不重要的項目會省略不提，你可以再依照自己的需求去試試看、玩玩看。

如何進入 Blocksy 自訂器

方法 1：從 WordPress 前台進入 Blocksy 自訂器

點擊上方選單的「自訂」。

方法 2：WordPress 後台進入 Blocksy 自訂器

點擊左側欄位的「外觀」、「自訂」。

Blocksy 自訂器介面

左邊是設定區，右邊是網站的預覽畫面，在設定區調整參數後預覽畫面就能即時看到變化。

✏️ Blocksy 自訂器如何調整為中文介面？

第 1 步

滑鼠移至 WordPress 後台左側欄位的「設定」—— 圖片標註 ➀。

點擊「一般」—— 圖片標註 ➁。

第 2 步

網站介面語言 (也可能顯示為 Site Language) 選擇「繁體中文」。

第 3 步

點擊「儲存設定」。

自訂器就會變成繁體中文介面了。

(1) 網站整體設計 (色彩、文字、Logo)

[1] 調整網站配色 (色彩調色盤)

在所有設定裡面，我習慣第一個就先處理網站配色，因為顏色可以說是佔網站視覺最大的部分，光是顏色就能影響網站的風格走向。

第 1 步

點擊左側欄位的「色彩」。

第 2 步

點擊「進階」、「色彩調色盤」。

Blocksy 很貼心地提供了「整體色彩調色盤」功能，內建 10 多款配色方案，如果你對配色沒有什麼想法，直接套用這些調色盤，網站就很好看了！

第 3 步

如果想自訂顏色，可以點擊調色盤裡的圓形色塊。

第 4 步

拖動圓圈或直接輸入色碼來修改顏色 —— 圖片標註 ➀。

可以從右邊的即時預覽，看到套用新色彩後的網站長什麼樣子 —— 圖片標註 ➁。

舉例來說，當我修改了「色彩 1」，預覽畫面就會即時更新，所有套用「色彩 1」的元素都會換成新的配色。

這樣就能快速切換不同的配色組合，而且保持整個網站的風格一致。

第 5 步

修改完調色盤後，點擊「進階」—— 圖片標註 ➀。

按「儲存調色盤」—— 圖片標註 ➁。

之後就能在「色彩調色盤」的「自訂」中直接套用這組配色，省去重新調整的麻煩。

1.  **主題**：[請填寫你的網站主題或品牌類型]
2.  **風格**：[請描述你期望的風格關鍵詞]
3.  **靈感來源 (請提供 3-5 個)**：
    *   [靈感一]
    *   [靈感二]
    *   [靈感三]
    *   (可自行增減)
4.  **色彩限制 (選填)**：[請描述色彩規則，如：避免某色、多用某色系等]
---
# 指令

你是一位專業的視覺設計師。根據我上方提供的「主題」、「風格」、「靈感來源」與「色彩限制」，完成以下兩項任務：

**任務 1：生成色票總圖**
生成一張圖片。圖片為簡潔的平面設計風格，包含 5 個橫向排列的色帶。每個色帶由 6 個並排的顏色方塊組成，分別對應你設計的 5 組配色方案。每一組方案都必須基於一個獨特的靈感來源，確保彼此風格各異。

**任務 2：提供文字說明**
在圖片後，以 Markdown 格式條列出 5 組配色的詳細資訊，每組都需包含：
1.  **主題名稱**：富有創意的名稱。
2.  **完整色碼**：6 個 HEX 色碼，順序與圖片對應。
3.  **用途建議**：主色、輔色、背景、文字、點綴色。

如果你喜歡我這次示範網站的配色，可以參考以下參數設定。

[2] 修改文字 (排版樣式)

點擊「排版樣式」。

排版樣式可以分別設定不同類型的文字，像是一般內文、各級標題、按鈕文字和連結文字，每一種都能調整字體、字型大小、行高、字元間距。

一定要注意的是目前「系統預設」的字體是「英文字體」，並不支援中文。

所以瀏覽器會自動抓使用者電腦裡的預設中文字體來顯示，結果就是無法保證每個訪客看到的字體都是一樣的。

為了確保網站風格一致，我強烈建議手動指定網站字體。

不過，中文字體的檔案通常很大，會拖慢網站速度，還要注意版權問題，檢查是否支援「免費商用」。

聽起來就很頭痛對吧？

不用擔心，我們安裝的 Blocksy 自訂器有內建 Google Fonts 字體。

其中，「思源黑體 (Noto Sans TC)」和「思源宋體 (Noto Serif TC)」就有支援繁體中文，幾乎不會缺字，又可免費商用，是中文網站最穩定的好選擇。

在搜尋欄輸入「Noto Sans TC」(思源黑體) —— 圖片標註 ➀。

點擊「Noto Sans TC」就能完成設定 —— 圖片標註 ➁。

同樣的操作，依序把所有文字項目的字體都改成「思源黑體」。

✏️ 諾特斯小提醒

每完成一部分設定，都要記得點「發佈」儲存，避免網路不穩定或是異常，不小心讓辛苦設計的結果消失！

[3] 版面配置

點擊「一般」。

「一般」裡的項目比較雜，但可以想像成是「控制整個網站共用的元素」的地方。

例如內容區塊的距離、按鈕樣式、社群連結、還有返回頂端的按鈕，這些功能在每個頁面都會出現，所以都被放在「一般」裡。

點擊「版面配置」。

「版面配置」能控制內容區塊之間的距離，我是維持預設不動，但你可以調整成你覺得舒服的樣子。

[4] 按鈕

第 1 步

點擊「按鈕」。

第 2 步

打開「游標暫留效果」，滑鼠移到按鈕上的時候，會有「彈起來」的動態效果。

備註：「導覽標記」跟「表單元素」在 News 網站模板沒有用到，可以略過。

[5] 條目內容

點擊「條目內容」。

「條目內容」可以調整內容區塊的間距和超連結樣式，我通常保持預設。

[6] 社群連結 (社交網路服務帳號)

第 1 步

點擊「社群連結」。

第 2 步

選填你常用的社群平台網址 (個人頁面)。

備註：這些資訊晚一點會在 設計頁尾 時用到，建議先設定好。

[7] 返回頂端按鍵

第 1 步

開啟「返回頂端」按鈕。

這是一個很貼心的設計，可以讓訪客在閱讀很長的文章時輕鬆一鍵回到頁首。

第 2 步

點擊「返回頂端」來微調按鈕。

第 3 步

箭頭的形狀，我選擇的是「型式 2」。

第 4 步

切換到「設計」。

第 5 步

「形狀邊框半徑」改為「4 px」，讓按鈕邊緣看起來更柔和一點。

[8] 網站圖示 / 分頁小圖示 (網站識別)

第 1 步

點擊「網站識別」。

之前已經在 WordPress 後台設定「網站標題」與「網站說明」了，所以這邊只剩下「網站圖示」要處理。

「網站圖示」就是瀏覽器分頁標籤旁邊的小圖示，通常大家會放上自己的 Logo。

✏️ 用 AI 設計 Logo

在網站剛起步的時期，比起花大筆預算請設計師，我更建議你把時間和資源集中在內容產出上。

所以我會用 免費版 ChatGPT 快速生成 Logo，不但能節省設計費用，也能省下學習設計軟體的時間。

第 1 步

複製下方 Prompt。

提示詞

你是一位頂尖的 LOGO 設計師，專長是創造簡潔、易於識別的品牌標誌。 請根據以下需求生成： 

**LOGO 設計需求**
品牌名稱：[請填寫你的品牌或網站名稱]
主題類型：[請填寫你的網站主題或品牌類型]
設計風格：[請填寫你期望的風格關鍵詞]
靈感來源 (3-5 個名詞)：
色彩限制 (選填)：[請填寫色彩規則，如：避免某色、多用某色系等] 

**圖像要求**
1. 不包含任何文字或字母
2. 使用清晰輪廓線 (clean outlines) 與純色塊 (solid colors)
3. 絕對避免漸層、陰影、紋理或 3D 效果
4. 清晰、平面、向量感強、無文字
5. 保持風格一致、乾淨簡潔

**生成設定**
背景：透明
檔案格式：PNG
尺寸：512×512 區塊大小

第 2 步

在 Prompt 填入你的品牌名稱、主題、風格、參考靈感和色彩偏好，貼到 ChatGPT 的對話框裡 —— 圖片標註 ➀。

點擊「送出」—— 圖片標註 ➁。

第 3 步

稍等一下，AI 就會幫你生成一個看起來有模有樣的 Logo，點擊「下載」儲存檔案。

等之後有預算，你可以再請設計師做一個新的 Logo 把舊的替換掉。

第 2 步

點擊「選取網站圖示」。

第 3 步

拖曳上傳 Logo 圖案。

第 4 步

按下「選取」。

第 5 步

調整 Logo 圖示大小 —— 圖片標註 ➀。

點擊「裁剪圖片」—— 圖片標註 ➁。

原本分頁標籤上是預設的 WordPress Logo，現在已經變成你自己的 Logo 了。

(2) 設計頁首

第 1 步

點擊一般選項的「頁首」。

左邊是可以放進頁首的元素 —— 圖片標註 ➀。

預覽區域下方是頁首編輯器，用來調整版面配置 —— 圖片標註 ➁。

第 2 步

頁首我只要放「標誌」、「網站名稱」和「選單」，讓畫面乾淨俐落。

除了「標誌」和「選單 1」留下，其餘元素都按「X」刪除掉。

[1] 頁首背景

第 1 步

點擊「主要列」。

第 2 步

「最小列高度」改成「85 px」。

第 3 步

切換到「設計」—— 圖片標註 ➀。

點背景的「色彩」—— 圖片標註 ➁。

第 4 步

選擇「色彩 5」—— 圖片標註 ➀。

把透明度調降到「0.4」—— 圖片標註 ➁。

第 5 步

點擊「陰影」選項。

第 6 步

點擊「啟用」，讓頁首稍微多一點層次感。

[2] 頁首 Logo (標誌)

第 1 步

點擊「標誌」。

第 2 步

按下「選取標誌」。

第 3 步

選擇你的 Logo 圖片，點擊「Select」(選擇)。

第 4 步

覺得 Logo 太小的話，可以把標誌高度調整成「45 px」會比較適合。

備註：「45 px」只是建議參數，實際請依照個人情況調整。

第 5 步

「開啟」網站標題。

第 6 步

「標誌圖片位置」選擇「左」，Logo 就能和網站名稱並排。

[3] 頁首主選單

第 1 步

滑鼠移到選單上 —— 圖片標註 ➀。

點擊彈出的「三個點」圖示，叫出「選單 1」設定 —— 圖片標註 ➁。

頁首的選單分成兩層要調整：

• 「最上層選項」是「主選單」
• 「下拉選項」是滑鼠移到主選單上會出現的「子選單」

第 2 步

切換到「設計」 —— 圖片標註 ➀。

把最上層選項的「字型大小」改成「14 px」，讓文字大一點 —— 圖片標註 ➁。

第 3 步

切換到「一般」，往下滑到「下拉選項」。

第 4 步

「項目游標暫留效果」選擇「純色」。

第 5 步

「寬度」設為「110 px」，讓子選單背景與主選單對齊。

第 6 步

「上面偏移」設為「0 px」，子選單才會貼齊頁首。

第 7 步

切換到「設計」—— 圖片標註 ➀。

把下拉選項的字型大小改成「14 px」—— 圖片標註 ➁。

第 8 步

點擊字型色彩的「游標暫留」—— 圖片標註 ➀。

選擇「色彩 5」—— 圖片標註 ➁。

(3) 設計頁尾

第 1 步

預覽畫面滑到最底下，滑鼠移到頁尾區域，點擊「編輯」。

第 2 步

我打算在頁尾放上版權聲明和社群連結按鈕。

所以先把不需要的元素按「X」刪除掉，留下「版權」、「社交網路服務」。

第 3 步

點擊「下面列」。

第 4 步

「欄」選擇「3」，改變欄位數量。

第 5 步

把「版權」長按拖曳到「中下」位置；「社交網路服務」移到「右下」位置。

[1] 修改版權聲明

第 1 步

點擊「版權」。

第 2 步

把「版權文字」改成「版權所有 © + 年份 + 品牌名稱」的格式。

✏️ 版權所有 © {current_year} —— (品牌名稱)

✏️ 諾特斯觀眾小默契

你可以在頁尾的版權聲明裡加上諾特斯觀眾的秘密記號：「✏️」。

有加這個秘密記號的人，都有著一段看諾特斯的影片或文章，架設網站的共同回憶。

以後看到頁尾有這個秘密記號的網站，就知道是自己人，大家可以互相照顧一下。

第 3 步

把「水平對齊」改為「置中對齊」。

[2] 新增社群按鈕 (社交網路服務)

第 1 步

點擊「社交網路服務」。

之前我們在「一般」設定裡的「社交網路服務帳號」，已經 把各個社群連結設定好了。所以只要點擊網頁上的社群圖示，就可以連到指定的社群帳號頁面，這一步只要再選擇顯示哪些項目就好。

第 2 步

如果預設列表裡沒有你要的平台，可以「搜尋」平台名稱 —— 圖片標註 ➀。

點擊「+」新增圖示 —— 圖片標註 ➁。

第 3 步

如果不想顯示某個平台，則是「關掉眼睛」把它隱藏起來。

第 4 步

把「在新分頁中開啟連結」打開，這樣訪客點擊時才不會直接離開你的網站。

第 5 步

「水平對齊」選擇「靠右對齊」。

不過目前最右邊的社群圖示會被「返回頂端」按鈕擋住，需要再調整圖示位置。

第 6 步

切換到「設計」。

第 7 步

把「邊界」的「鎖定解除」—— 圖片標註 ➀。

把右邊界設成「40 px」，就能讓社群圖示避開「返回頂端」按鈕 —— 圖片標註 ➁。

備註：40px 是參考「返回頂端」按鈕抓的大概尺寸，實際可以依照你的按鈕大小再微調。

第 8 步

點擊「發佈」儲存設定。

(4) 設計網站內容

自訂器最上層的「內容類型」讓我們可以針對不同類型的內容，像是文章列表、單篇文章，甚至是分類頁面，調整各自獨立的設計。

[1] 網誌文章

「網誌文章」控制的是文章列表，也就是把所有文章彙整在一起的頁面，像是目前的首頁就是透過「網誌文章」控制。

「網誌結構」可以一鍵修改它的排版，我現在用的是交錯排列的「增強網格」，畫面看起來比較活潑、不死板。

編輯資訊卡 (卡片選項)

第 1 步

點擊「卡片選項」來進一步細調卡片設計。

「卡片」指的就是畫面上一格一格的文章預覽，我們可以自由決定卡片上要顯示哪些資訊。

第 2 步

點開「文章中繼資料」。

「文章中繼資料」簡單來說就是「卡片上的附加資訊」，集中顯示一些文章資訊，例如這篇文章屬於哪個分類、作者是誰、什麼時候發佈的。

第 3 步

預設開啟的項目太多了，我想簡化到只剩「分類」跟「日期」就好。

所以「分類法」要保持「眼睛打開」。

第 4 步

而「日期」，我更喜歡顯示「更新日期」而不是「發佈日期」，這樣文章事後有更新內容的話，就能清楚地告訴讀者「這裡的資訊是最新的！」

所以把發佈日期的「眼睛關掉」，把「更新日期」的眼睛打開。

第 5 步

因為這是個人網站，只有我一位作者，所以我覺得「作者」可以隱藏；留言數量我覺得也不太重要，所以「留言」也可以隱藏起來。

第 6 步

點開「精選圖片」。

第 7 步

把「游標暫留效果」設成「放大」，當滑鼠移過去時圖片會微微放大，畫面更有互動感。

第 8 步

如果希望卡片看起來簡潔一點，可以把「內容摘要」和「第二組文章中繼資料」隱藏起來。

第 9 步

資訊卡元素的排列順序只要直接「拖曳」就可以自由改變位置。

第 10 步

切換到「設計」。

這裡的設定都是套用我們之前設定好的顏色和排版，也能再單獨微調。不過我建議不要改太多，不然網站的各區風格會不一致，以後想改設計也會變得很麻煩。

第 11 步

點擊「資訊卡陰影」的「色彩」。

第 12 步

選擇「色彩 1」。

第 13 步

點擊「資訊卡陰影」的「調整」。

第 14 步

「垂直偏移」改為「6 px」—— 圖片標註 ➀。

「擴散」設為「-10 px」—— 圖片標註 ➁。

第 15 步

「框線圓角半徑」輸入「14 px」，這樣卡片會有微微的立體感，可以突顯它又不會太搶眼。

開啟側邊欄 (資訊欄)

如果你不喜歡側邊欄，可以把「資訊欄」關掉。

我自己是保留，因為我覺得這樣畫面資訊比較完整。

分頁導覽

「分頁導覽」控制的是頁面底部的頁數設計，有 4 種型式可以選，挑自己喜歡的即可。

資訊卡揭示效果

打開「資訊卡揭示效果」。

這樣每次重新載入畫面的時候，文章會一篇篇浮起來，畫面更有動態感。

[2] 單篇文章

「單篇文章」很好理解，就是針對「一篇文章」的外觀設計。

第 1 步

點擊「單篇文章」，預覽同時點開一篇文章做對照。

第 2 步

點開「文章標題」，調整顯示的元素。

第 3 步

不要「內容摘要」就把「眼睛關掉」。

第 4 步

打開「文章中繼資料」。

第 5 步

只顯示「更新日期」跟「分類法」，其他項目都隱藏。

第 6 步

「容器最小高度」改為「350 px」，把標題背景縮短。

第 7 步

回到上一層。

第 8 步

「文章結構」我選擇「右側資訊欄」—— 圖片標註 ➀。

「內容區樣式」改為「固定寬」—— 圖片標註 ➁。

改成固定寬之後，文章區會變成白底，我希望右側資訊欄也能有一樣的白底，這樣網站風格比較一致，這部分等一下我們再到「側邊欄」裡修改。

第 9 步

「文章元素」這裡能讓你決定文章裡要加上哪些附加元素，你可以隨意點點看。

我自己有加的是「文章標籤」、「文章導覽」，方便訪客延伸閱讀更多內容。

[3] 分類

「分類」控制的是點擊分類或標籤時會出現的文章彙整頁面。

例如我們點擊「義大利」分類，就會看到所有分類在「義大利」底下的文章；點擊「#餐廳推薦」標籤，就會看到所有有「餐廳推薦」標籤的文章。

這些彙整頁面和「首頁」的排版很相似，就可以沿用跟 網誌文章 相同的設計，讓網站看起來有一致性。

[4] 頁面

「頁面」顧名思義是控制「所有頁面」的設計，像「關於我」就是其中之一。

第 1 步

點擊「頁面」。

第 2 步

「內容區樣式」改為「固定寬」。

其他設定都維持預設值即可。

[5] 作者頁面

「作者頁面」控制的是點擊作者時，會出現他所發佈的文章彙整頁面。

但因為我示範的是個人網站，只有我一個作者；剛剛也在「文章中繼資料」把「作者」的元素都隱藏起來了。

所以訪客是進不到這個頁面的，可以直接略過這項。

[6] 搜尋頁面

「搜尋頁面」控制的是在資訊欄輸入關鍵字搜尋，跳轉後的「搜尋結果」頁面。

它的排版和首頁很相似，所以我繼續沿用與 網誌文章 相同的設計。

[7] 設計側邊欄 (資訊欄)

第 1 步

資訊欄裡面要放哪些內容，不是由 Blocksy 自訂器控制，而是要到網站後台調整。

在 WordPress 後台的左側欄位選擇「外觀」、「小工具」。

第 2 步

基本上，資訊欄常見的元素在「News」網站模板裡都已經有了，我們只要把標題改成中文就能直接用了。

「Live Search」可以改成「搜你想看」或「找你想看」。

另外，我觀察到最近流行簡約風，很多部落格的設計乾脆把標題拿掉，只留搜尋框，這樣看起來也滿乾淨的。

第 3 步

「Posts」改為「最新文章」。

「Categories」改為「分類」。

第 4 步

「重要引述」區塊我用不到，就直接刪掉。

第 5 步

如果想加其他內容，可以從左上角的「+」(區塊插入器) 新增。

你可以多觀察一些你喜歡的部落格，看看他們的資訊欄都放了什麼來找靈感。

第 6 步

點擊「更新」儲存設定。

第 7 步

點擊左側欄位的「自訂」，進入 Blocksy 自訂器設計資訊欄的外觀。

第 8 步

點擊一般選項的「資訊欄」。

第 9 步

為了讓資訊欄跟左邊的文章列表風格統一，樣式選擇「型式 2」。

第 10 步

打開「分開小工具」，讓每個項目都變成一格一格的樣子，跟左邊的卡片設計呼應。

第 11 步

切換到「設計」。

第 12 步

套用跟 網誌文章的卡片 一樣的陰影和圓角設定。

[8] Blocksy Companion 擴充功能：趨勢文章

網站內容最底部有一條「目前趨勢」，是 Blocksy 主題內建的熱門文章推薦功能。不過我個人是覺得目前還用不到，可以先關掉。

第 1 步

點擊 WordPress 後台左側欄位的「Blocksy」。

第 2 步

點擊「擴充功能」—— 圖片標註 ➀。

選擇「趨勢文章」—— 圖片標註 ➁。

第 3 步

關閉「趨勢文章」。

「趨勢文章」就從網站內容不見了。

(5) 響應式網頁設計 RWD

什麼是響應式網頁設計

響應式網頁設計 (Responsive Web Design，簡稱 RWD) 指的是讓網站能依照不同裝置的螢幕尺寸，自動調整排版的設計。

也就是說，不管是用電腦、平板還是手機打開網站，版面都會自動調整成最適合瀏覽的樣子。

在這個大家手機不離身的時代，如果你的網站手機版不好用，幾乎等於直接流失一半以上的訪客。

所以，做好「響應式網頁設計」真的超級重要，絕對不能忽略！

好消息是，Blocksy 自訂器本身就支援 RWD。我們只需要針對平板跟手機的視覺效果，做一點微調，就能讓網站在各種螢幕上都有良好的呈現。

目前所有設計都是以「電腦版」畫面為主，要切換到「平板」畫面或「手機」畫面，要點擊左下角的三個裝置圖示來切換。

[1] 頁首的響應式設計

第 1 步

點擊「平板」圖示，切換到平板畫面。

第 2 步

右上角的選單變成「觸發器」按鈕，點一下會彈出行動裝置特有的「行動版選單」。

因為手機跟平板的螢幕比電腦窄很多，塞不下完整的橫式選單，所以選單會變成「滑出式」方便訪客操作。

如果你看到行動版跟桌面版的「選單項目」不一樣，是因為我們還沒指定行動版選單要顯示什麼。

第 3 步

點擊「頁首」。

第 4 步

選擇「行動版選單」。

第 5 步

把「選擇選單」從「預設」改成「主選單」。

第 6 步

切換到「設計」—— 圖片標註 ➀。

點擊「字型」調整選單文字大小 —— 圖片標註 ➁。

第 7 步

目前的字型大小在手機、平板畫面上看起來太大了，我覺得調到「16 px」會比較剛好。

第 8 步

點擊「標誌」。

第 9 步

切換到「設計」。

第 10 步

把「網站標題」的「字型大小」設為「20 px」，讓頁首左邊的網站名稱也縮小一點。

第 11 步

點擊右下角的「手機」圖示切換畫面，檢查「手機版頁首」有沒有其他需要調整的。

比如說，LOGO 變太小了。

第 12 步

切換到「一般」。

第 13 步

把標誌高度設成「40 px」才會剛剛好。

[2] 頁尾的響應式設計

因為頁首的行動版選單已經有「社交網路服務」按鈕，頁尾就不必重複出現，所以我打算把頁尾的「社交網路服務」隱藏起來。

第 1 步

滑鼠移到頁尾，按下「編輯」。

第 2 步

選擇「社交網路服務」。

第 3 步

把「元件可見度」的「平板」、「手機」項目關閉，按鈕就不見了。

第 4 步

點擊「下面列」。

第 5 步

「欄位間距」改為「0 px」。

第 6 步

點擊「版權」。

第 7 步

「水平對齊」選擇「置中」，讓版權聲明上下、左右間距一致。

第 8 步

點擊右下角的「平板」圖示切換畫面來檢查。

我發現「版權文字」偏一邊，下方還空出了一大塊。

第 9 步

把「水平對齊」設為「置中」。

第 10 步

點擊「下面列」。

第 11 步

「欄位間距」改為「0 px」。

[3] 網站內容的響應式設計

到處點點看檢查網站內容，確認平板或手機畫面裡的圖片、文字位置有沒有跑掉。

像我就發現「News」模板的 H2、H3 標題在電腦上看起來剛剛好，但換到平板或手機就太大了。

這時候就應該要針對不同裝置，分別調整適合的字型大小。

第 1 步

選擇「排版樣式」。

第 2 步

把「標題 2」設成「26 px」—— 圖片標註 ➀。

把「標題 3」設為「22 px」—— 圖片標註 ➁。

第 3 步

切換到「平板」畫面。

第 4 步

把「標題 2」改成「30 px」—— 圖片標註 ➀。

把「標題 3」改成「25 px」—— 圖片標註 ➁。

第 5 步

點擊「發佈」儲存所有設定。

諾特斯的經驗分享

我想跟你分享一個觀念：

特別是在網站設計上，很容易掉進「追求完美」的陷阱，我自己以前就常常這樣，光是在各種排版設計上就花掉超多時間。

但是，在網站外觀上吹毛求疵，真的是必要的嗎？

後來我想通了，網站成功的關鍵，從來不是設計有多完美，而是 ——

有沒有持續產出內容？

有沒有找到對的方向？

有沒有真正理解訪客需要什麼？

這些事情都需要時間去執行、去實驗、去調整，但要是我們把時間都花在追求 100 分的設計，就沒時間做這些真正重要的事了。

我現在的做法很簡單，網站外觀只要不難看就好，有個 80 分就很滿意了。省下來的時間，我會專心投入在撰寫內容與思考經營策略上。

6. 強化網站功能

在第 6 步驟，我會跟你分享要如何幫網站加入訂閱電子報功能，並實際寄出一封電子報。

還有如何用 Rank Math 串接網站分析工具 —— Google Search Console 和 Google Analytics 。

這些是加碼教學，你可以看你自己的需求，來決定要不要為你的網站加入這些功能。

功能 1：使用 Brevo 免費建立電子報服務

電子報是什麼？

簡單來說，電子報就是透過 Email，定期跟你的訂閱者們聊聊天。

這種關係有點像以前的「筆友」，你可以用電子報分享近況、心得或新文章，慢慢建立信任、拉近彼此的距離，讓原本只是路過的訪客變成你的忠實讀者。

寄電子報的頻率不用太高，一週一封，甚至更少都沒問題，有話想說的時候再寄就好。

所以，如果你想經營屬於自己的社群，電子報會是輕鬆又長期穩定的一種方式。

Brevo 介紹 (舊名 Sendinblue)

Brevo 是一個能把整個電子報流程整合起來的免費工具，從建立訂閱表單，收集名單，到寫信、寄信，全部都能在 Brevo 裡一次完成。

🎁 開始免費使用

它最大的優點就是「免費方案」每天可以寄出 300 封信，對剛開始經營電子報的人來說，已經完全夠用。

Brevo 的操作介面也很直覺，不用寫程式，用拖曳的方式就能輕鬆設計出漂亮表單。

它還內建很多現成模板，能幫你快速做出吸睛又專業的電子報。

當你建立好電子報系統，訪客就可以在你的網站上填寫表單、完成訂閱。

之後你有新文章或是想分享任何內容，就可以透過電子報告訴所有訂閱者囉！

(1) 建立訂閱電子報功能

[1] 免費註冊 Brevo

第 1 步

點擊下方按鈕，進入 Brevo 官網。

🎁 開始免費使用

第 2 步

點擊右上角「Sign Up Free」(免費註冊)。

第 3 步

輸入你的 Email，設定密碼 —— 圖片標註 ➀。

點擊「Create an account」(建立帳戶) —— 圖片標註 ➁。

第 4 步

點開 Brevo 寄到 Email 信箱的驗證信。

第 5 步

點擊「Confirm my email address」(確認我的電子郵件地址)。

第 6 步

跳轉回到註冊流程，對照下圖中文翻譯填寫個人資料。

✏️ 小筆記

• 姓名可以利用 姓名中翻英工具 填寫。
• 「公司名稱」這欄只能填英文，以「個人網站」類型為例，可以利用 Google 翻譯或 ChatGPT 把「網站名稱」翻譯成英文。

第 7 步

在「Website」(網站) 輸入你的域名 —— 圖片標註 ➀。

點擊「Continue」(繼續) —— 圖片標註 ➁。

第 8 步

照著下圖中文翻譯，繼續填寫公司資訊 —— 圖片標註 ➀。

點擊「Continue」(繼續)，前往下一步 —— 圖片標註 ➁。

第 9 步

在「Tell us about your organization」(請告訴我們關於你們組織的資訊) 回答問題。

以個人網站來說，「How many people are on your team? 」(你的團隊有多少人？) 就選「0-1 employee」(0-1 位員工)。

「How many contacts do you need to have? 」(你需要擁有多少個聯絡人？) 這題，可以先選最小的「1-300」，這不會影響之後的訂閱人數上限。

「Do you sell online?」(你有在網路上銷售嗎？) 這題，沒有盈利的個人網站選「no」(沒有) 就好 —— 圖片標註 ➀。

如果不想收到 Brevo 的行銷信，記得把最下方選項「打勾」—— 圖片標註 ➁。

點擊「Continue」(繼續) —— 圖片標註 ➂。

第 10 步

輸入手機號碼 —— 圖片標註 ➀。

點擊「Send verification code」(傳送驗證碼) —— 圖片標註 ➁。

第 11 步

收到驗證簡訊後，填上「Verification code」(驗證碼) —— 圖片標註 ➀。

點擊「Verify」(驗證) —— 圖片標註 ➁。

第 12 步

畫面上會看到幾種付費方案可供選擇，但網站初期先用免費的就可以了。

✏️ 小筆記

如果之後覺得好用，想要付費升級的話，Brevo 也是我目前找到，在功能相似的工具裡 CP 值最高的。

Brevo 評價 (舊稱 Sendinblue)｜比 Mailchimp 更好的免費 WordPress 訂閱電子報/表單/Email 自動化系統

前往免費筆記

往下滑，點擊「Select Free」(選擇免費方案)。

(2) 建立聯絡人名單

我們需要建立一份「聯絡人名單」來收集填寫電子報訂閱表單的 Email，當訪客在網站上提交表單，資料會自動被加到這份名單裡。

第 1 步

在左側欄位點擊「CRM」(客戶關係管理) —— 圖片標註 ➀。

選擇「Lists」(名單) —— 圖片標註 ➁。

第 2 步

點擊「Create a list」(建立名單)。

第 3 步

「Name of the list」(名單名稱) 這欄，我會填上「訂閱電子報」，這樣一看就知道這份名單的用途是什麼 —— 圖片標註 ➀。

「Folder」(資料夾) 選擇「Your First Folder」(你的第一個資料夾) —— 圖片標註 ➁。

按下「Create list」(建立名單) —— 圖片標註 ➂。

[3] 建立電子報訂閱表單

我們需要建立一個「訂閱表單」給網站訪客填寫 Email，讓他們能主動加入你的電子報名單。

第 1 步

點擊左側欄位的「Marketing」(行銷) —— 圖片標註 ➀。

選擇「Forms」(表單) —— 圖片標註 ➁。

第 2 步

點擊「Create sign-up form」(建立註冊表單)。

第 3 步

「What kind of form do you want to create?」(你想要建立哪種類型的表單？) 選擇「Full page/embedded」(完整頁面/嵌入式) —— 圖片標註 ➀。

「Form name」(表單名稱) 我輸入「電子報訂閱表單」—— 圖片標註 ➁。

按下「Create form」(建立表單) —— 圖片標註 ➂。

第 4 步

表單製作總共有 6 個項目要完成。

Setup (初始設定) 就是剛剛填寫過的「Form name」(表單名稱)，可以直接略過。

第 5 步

Design (設計) 是編輯表單的內容和外觀的地方，Brevo 已經自動建立好基本模板，我們只需要把英文內容改為中文就能用了。

把標題文字改成「諾特斯電子報」—— 圖片標註 ➀。

標題下方的「Text」(文字) 可以介紹你的電子報會有什麼內容。

舉例來說，我就寫「我會分享用餐心得和旅行的小故事」，還可以添加 emoji，讓文字看起來更有親和力 —— 圖片標註 ➁。

第 6 步

輸入框的提示文字改成「請輸入你的 Email」—— 圖片標註 ➀。

把輸入框裡的全大寫 「EMAIL」改成在中文介面比較通用的首字母大寫形式「Email」—— 圖片標註 ➁。

第 7 步

不需要下面那行灰色小字的話，要把左邊的「Help text」(說明文字) 取消勾選。

第 8 步

那因為我的電子報是免費的，所以我就把按鈕文字改成「免費訂閱」—— 圖片標註 ➀。

「Button」(按鈕) 的「Alignment」(對齊方式) 選擇「置中」—— 圖片標註 ➁。

第 9 步

設計完成後，按「Next」(下一步) 。

✏️ 防止機器人註冊的驗證機制

有提示我們可以開啟防止機器人註冊的驗證機制，但因為設定比較複雜，這次我先專注在建立基本可用的表單。

⭐️ 延伸閱讀：Brevo 教學 (未來開放)

第 10 步

Lists (名單) 要指定表單收集到的 Email 要放進哪個名單。

把剛剛建立好的「訂閱電子報」名單打勾 —— 圖片標註 ➀。

點擊「Next」(下一步) —— 圖片標註 ➁。

第 11 步

Settings (設定) 可以設定要不要寄「確認信」給填寫表單的人。

我這次僅示範最簡單的訂閱方式，所以選「No confirmation email」(不寄送確認信) —— 圖片標註 ➀。

點擊「Next」(下一步) —— 圖片標註 ➁。

第 12 步

Messages (訊息) 要設定訪客提交表單後看到的提示訊息。

基本上，我都是把預設的英文訊息改成中文，再依自己的風格微調，你也可以參考我的寫法去修改 —— 圖片標註 ➀。

全部填完後，點擊「Next」(下一步) —— 圖片標註 ➁。

[4] 把訂閱電子報表單加入 WordPress 網站

在 Share (分享) 設定表單的轉發方式。

最直接的方法是使用表單連結，訪客只要點開連結就能填寫表單。

但是表單頁面會開在 Brevo 而不是在你的網站裡，對訪客來說，這樣跳轉來、跳轉去，操作流程會被打斷。

更理想的做法，是把表單嵌入你的網站，讓訪客可以在你的頁面上填寫表單，操作流程會更順暢。

在 Brevo 的 Embed  (嵌入) 選項裡，選擇「HTML」—— 圖片標註 ➀。

點一下程式碼，按「Ctrl + C」(複製) —— 圖片標註 ➁。

新增訂閱電子報頁面

第 1 步

打開 WordPress 後台，我們要新增一個頁面來放這份表單。

點擊左側欄位的「頁面」、「新增頁面」。

第 2 步

標題取名為「訂閱電子報」—— 圖片標註 ➀。

點擊左上角的「+」(區塊插入器) —— 圖片標註 ➁。

第 3 步

搜尋「HTML」—— 圖片標註 ➀。

點擊「自訂 HTML」新增一個可以貼上程式碼的區塊 —— 圖片標註 ➁。

第 4 步

把剛剛複製的程式碼貼上。

第 5 步

點擊「儲存草稿」—— 圖片標註 ➀。

點擊「檢視」—— 圖片標註 ➁。

選擇「在新分頁中預覽」—— 圖片標註 ➂。

第 6 步

檢查表單在網站前台的樣子時，我發現 2 個可優化的部分：

① 原先的 Brevo 表單已經有標題，但頁面上又有一個標題。

② 表單的背景顏色和網站不一樣，看起來有點突兀。

第 7 步

回到網站後台，點擊「Blocksy Child 頁面設定」—— 圖片標註 ➀。

點擊「頁面標題」—— 圖片標註 ➁。

第 8 步

選擇「已停用」就能把標題隱藏起來 —— 圖片標註 ➀。

再點一次「儲存草稿」—— 圖片標註 ➁。

第 9 步

回到預覽畫面，「重新整理」瀏覽器，重複的標題就消失了。

第 10 步

接著調整表單背景顏色，讓它和網站的背景顏色一致，但是在設定之前，需要先查出網站的背景顏色是什麼。

點擊網站前台左上角的「自訂」，進到 Blocksy 自訂器。

第 11 步

選擇「色彩」。

第 12 步

找到「網站背景」，點開「色彩」。

第 13 步

這裡標示的顏色代碼是代表「整體色彩調色盤」裡的「色彩 7」，無法直接複製使用。

回到「整體色彩調色盤」點擊「色彩 7」—— 圖片標註 ➀。

複製「#」開頭的色碼 —— 圖片標註 ➁。

第 14 步

回到 Brevo 後台，點擊 Design (設計) 的「Return to this step」(返回這個步驟)。

第 15 步

切換到「Form Design」(表單設計) —— 圖片標註 ➀。

點開「Background」(背景) —— 圖片標註 ➁。

第 16 步

滑鼠移到色塊上 —— 圖片標註 ➀。

在「色碼」欄位點 2 下，貼上剛剛複製的色碼 —— 圖片標註 ➁。

點擊「Next」(下一步) 儲存設定 —— 圖片標註 ➂。

其他設定項目都不用更動，直接按「Next」(下一步) 略過即可。

第 17 步

修改表單顏色後，網站裡的表單不會同步更新，需要手動替換成新的程式碼。

在 Share (分享) 切換到「HTML」—— 圖片標註 ➀。

複製程式碼 —— 圖片標註 ➁。

第 18 步

回到 WordPress 後台，貼上新的程式碼。

第 19 步

點擊「儲存草稿」—— 圖片標註 ➀。

按下「檢視」—— 圖片標註 ➁。

選擇「在新分頁中預覽」—— 圖片標註 ➂。

這時就可以看到，表單底色和網站背景一致了。

第 20 步

點擊「發佈」。

第 21 步

再次點擊「發佈」。

第 22 步

按下「檢視頁面」，就能在網站前台看到正式發佈的「訂閱電子報」頁面。

新增訂閱電子報按鈕

可以在頁首加上按鈕 ，作為「訂閱電子報」頁面的入口，訪客點進去就能打開訂閱頁面。

第 1 步

右鍵點擊左上角的「自訂」、「在新分頁中開啟連結」，開啟 Blocksy 自訂器。

第 2 步

點擊「頁首」。

第 3 步

從左側設定區把「按鈕」拖到「選單 1」的右邊，在頁首加上一個按鈕。

第 4 步

點擊「按鈕」。

第 5 步

樣式選擇「Ghost」—— 圖片標註 ➀。

「標籤文字」改為「訂閱電子報」—— 圖片標註 ➁。

第 6 步

回到訂閱表單頁面，按「Ctrl+A」全選網址、「Ctrl+C」複製。

第 7 步

到 Blocksy 自訂器，在「連結 / 網址」欄位貼上網址。

第 8 步

點擊「發佈」儲存設定 —— 圖片標註 ➀。

按下「✕」關閉 Blocksy 自訂器 —— 圖片標註 ➁。

測試訂閱表單功能

第 1 步

點擊頁首的「訂閱電子報」按鈕，打開訂閱頁面，測試表單能不能正常運作。

第 2 步

填寫 Email，並點擊「免費訂閱」。

出現剛剛設定好的「訂閱成功」訊息。

第 3 步

前往 Brevo 後台，點擊左側欄位的「CRM」(客戶關係管理)、「Lists」(名單)，確認資料有沒有匯入聯絡人名單。

「訂閱電子報」名單顯示有「1」位聯絡人 。

點開名單，剛剛填寫的 Email 有出現在名單裡，代表電子報的訂閱功能可以正常運作。

現在你的網站，已經可以開始收集那些喜歡你的文字、關注你的人的名單囉！

(2) 寄出你的第一封電子報

在開始寫信之前，我們要先完成一個重要設定 —— 驗證域名。

為什麼要這麼做呢？

如果我們直接用 Gmail、Yahoo、Hotmail 這種免費信箱寄電子報，看起來不夠正式，甚至很容易被信箱誤判成垃圾信。

所以比較理想的做法，是擁有一個你專屬的「寄件者 Email」。

寄出的信會用「你的域名」而不是「免費信箱」作為後綴，不只看起來專業，也會讓讀者更有信任感。

要擁有「域名信箱」通常要額外付費購買，但好消息是，我們只要在 Brevo 完成「域名驗證」，就可以讓你的電子報看起來像是從專屬域名信箱寄出的。

這對剛起步的新手來說，絕對是最划算又實用的替代方案！

[1] 驗證域名

第 1 步

點擊「Settings」(設定)。

第 2 步

選擇「Senders, domains, IPs」(寄件者、域名、IP 位址) —— 圖片標註 ➀。

切換到「Domains」(域名) —— 圖片標註 ➁。

第 3 步

點擊「Add a domain」(新增域名)。

第 4 步

輸入你的域名，按下「Add a domain」。

第 5 步

Brevo 提供幾種驗證方式，我建議選擇第二種「Authenticate the domain yourself」(自行驗證域名) —— 圖片標註 ➀。

點擊「Continue」(繼續) —— 圖片標註 ➁。

Brevo 會提供 4 筆 DNS 紀錄，我們需要將這些資料一筆一筆新增到你的域名 DNS 設定裡。

第 6 步

打開 Bluehost 後台，在左側欄位點擊「Domains」(域名)。

第 7 步

切換到「DNS」。

第 8 步

點擊「ADD RECORD」(新增紀錄)、「Single record」(單筆紀錄)。

第 9 步

根據 Brevo 提供的資料，第一筆 DNS 紀錄的 Type (類型) 要選「TXT Record」(TXT 紀錄)。

第 10 步

「Refers to」(指向) 選擇「@」—— 圖片標註 ➁。

第 11 步

在 Brevo 點擊「Copy Brevo code txt_value」(複製 Brevo 程式碼 TXT 值)。

第 12 步

回到 Bluehost 後台，貼到「TXT Value」(TXT 值) 欄位 —— 圖片標註 ➀。

TTL (存留時間) 保持預設 —— 圖片標註 ➁。

按「ADD」(新增)，儲存第 1 筆 DNS 紀錄 —— 圖片標註 ➂。

第 13 步

第 1 筆 DNS 紀錄就完成了，繼續設定第 2 筆紀錄。

點擊「ADD RECORD」(新增紀錄)、「Single record」(單筆紀錄)。

第 14 步

「Type」(類型) 選擇「CNAME」。

第 15 步

「Refers to」(指向) 選擇「Other Host」(其他主機名稱)。

第 16 步

在 Brevo 點擊「Copy DKIM 1 record host_record」(複製第 1 筆 DKIM 紀錄的主機名稱)。

第 17 步

貼到 Bluehost 後台的「Host Name」(主機名稱) 欄位。

第 18 步

在 Brevo 點擊「Copy DKIM 1 record txt_value」(複製 DKIM 第 1 筆紀錄的 TXT 值)。

第 19 步

貼到 Bluehost 的「Alias to」(別名指向) 這欄。

第 20 步

TTL (存留時間) 保持預設 —— 圖片標註 ➀。

按「ADD」(新增)，儲存第 1 筆 DNS 紀錄 —— 圖片標註 ➁。

接下來就用相同方式，將剩下 2 筆紀錄都新增進來。

第 21 步

把 DNS 列表拉到最下面，有兩筆 TXT 紀錄指向同一個主機名稱，會互相衝突造成設定失效。

所以我們需要把「Point To」(指向) 是「v=DMARC1; p=none hosting」的這筆紀錄刪掉，讓新的紀錄取代它。

第 22 步

點擊 TXT 紀錄的「⋮」、「Delete」(刪除)。

第 23 步

點擊「Delete」(刪除)。

第 24 步

回到 Brevo 後台，點擊「Authenticate this email domain」(驗證此電子郵件域名)。

✏️ 跳出「此域名尚未驗證」怎麼辦？

如果跳出「The domain is not authenticated yet」(此域名尚未驗證) 也不用緊張，那是因為 Bluehost 的 DNS 更新還沒生效。

根據我的經驗，等幾分鐘再按一次驗證，就能順利通過了。

[2] 新增寄件者 (自訂寄件者 Email 地址)

驗證好域名後，我們就可以用這個域名來設定寄件者 Email。

第 1 步

切換到「Senders」(寄件者)。

第 2 步

點擊「Add sender」(新增寄件者)。

第 3 步

「From Name」(寄件者名稱) 可以填你的網站名稱 —— 圖片標註 ➀。

「From Email」(寄件者 Email) 可以用「你的名字 @ 你的域名」的格式 —— 圖片標註 ➁。

第 4 步

點擊「Add sender」(新增寄件者)。

[3] 電子報寄件設定

第 1 步

點擊「Marketing」(行銷) —— 圖片標註 ➀。

按下「Campaigns」(活動) —— 圖片標註 ➁。

第 2 步

點擊「Create campaign」(建立活動)。

第 3 步

選擇「Email」(電子郵件)。

第 4 步

「Campaign name」(活動名稱) 只有你自己在後台看得到，為了方便管理，我會取個簡單明瞭的名字，例如「電子報第一集」—— 圖片標註 ➀。

輸入好後，點「Create campaign」(建立活動) —— 圖片標註 ➁。

第 5 步

點擊「Select sender」(選擇寄件者)。

第 6 步

在 Email address (電子郵件地址) 選擇 前一步驟 設定好的寄件者。

第 7 步

Name (名稱) 會自動帶入 —— 圖片標註 ➀。

點擊「Save」(儲存) —— 圖片標註 ➁。

第 8 步

Recipients (收件者) 要設定電子報寄給哪些人，點擊「Add recipients」(新增收件者)。

第 9 步

點開「Send to」(發送對象)。

第 10 步

選擇「Your First Folder」(你的第一個資料夾)。

第 11 步

把「訂閱電子報」打勾。

第 12 步

點擊「Save」(儲存)。

第 13 步

Subject (主旨) 是設定 Email 的標題跟預覽文字，點擊「Add subject」(新增主旨)。

第 14 步

Subject line (主旨欄) 填入電子報標題。

第 15 步

在 Preview text (預覽文字) ，寫幾句話簡單介紹電子報的內容。

第 16 步

點擊「Save」(儲存)。

[4] 編輯電子報內容

接下來進入重頭戲 —— Design (設計)，要開始撰寫電子報內容。

第 1 步

點擊「Start designing」(開始設計)。

第 2 步

Brevo 內建了許多現成模板可以直接套用，但這次我們要練習從零開始。

點擊「Create from scratch」(從零開始建立) —— 圖片標註 ➀。

選擇「Drag and drop editor」(拖放式編輯器) —— 圖片標註 ➁。

第 3 步

左邊是各種可用的區塊；右邊是空白的信件編輯區，你可以在這裡自由設計電子報內容。

撰寫電子報時，可以把版面想像成「上、中、下」三個部分，最上面放一個清楚的標題，開門見山、直接破題。

第 4 步

從左邊按住「Title」(標題)，拖到編輯區最上方。

第 5 步

把預設文字改成自己的標題 —— 圖片標註 ➀。

點擊「Align」(對齊) —— 圖片標註 ➁。

選擇「Align Center」(置中對齊) —— 圖片標註 ➂。

第 6 步

按「✕」回到區塊選單。

從左邊按住「Divider」(分隔線) ，拖到編輯區的標題下方。

第 7 步

中間區域就是電子報的主要內容。

考慮到現在大部分的人都是用手機收信，就算排版做得再華麗，也很難確保在每個裝置上都不會跑版。

所以我建議新手先從最簡單的組合開始 —— 文字 + 一兩張圖片 + CTA 按鈕，就是一組簡潔又完整的電子報內文。

從左邊按住「Text」(文字) ，拖到編輯區的分隔線下方。

撰寫電子報內文。

第 8 步

從左邊按住「Image」(圖片) ，拖到編輯區的文字下方。

第 9 步

把要插入的圖片拉進灰色區域。

第 10 步

在內文的最後，我會加上一個 CTA 按鈕，引導讀者到網站閱讀更多內容。

從左邊按住「Button」(按鈕) ，拖到編輯區的電子報內文最末端。

第 11 步

把按鈕上的文字改成「點我看完整文章」—— 圖片標註 ➀。

在「Link target」(連結目標) 欄位貼上文章網址 —— 圖片標註 ➁。

第 12 步

電子報的「結尾」部分，可以放置簽名檔、取消訂閱按鈕。

從左邊按住「Divider」(分隔線)，拖到編輯區的電子報內文下方。

第 13 步

從左邊按住「Text」(文字) ，拖到編輯區的分隔線下方。

第 14 步

像電子報這種群發 Email，有時候會被信箱系統歸類到「促銷內容」。

會導致收件者無法在主要收件匣看到信，也不會跳出未讀通知，可能因此錯過你的電子報。

為了避免這種情況，我會在信件裡加上提醒，像是：

加上提醒後，能夠提升電子報的開信率。

第 15 步

根據多國個資法規定，每封電子報必須提供明確的「取消訂閱選項」，也就是一定要附上「取消訂閱」連結。

所以我還會在電子報結尾加上一句：

第 16 步

選取整句文字 —— 圖片標註 ➀。

點擊「Add link」(新增連結) —— 圖片標註 ➁。

第 17 步

Type of link (連結類型) 選擇「Unsubscribe link (global)」(取消訂閱連結)。

第 18 步

Use a custom unsubscribe page (使用自訂的取消訂閱頁面) 選擇「Default unsubscribe page」(預設取消訂閱頁面)。

第 19 步

點擊「Insert」(插入)，將文字連結到「取消訂閱」頁面 —— 圖片標註 ➂。

第 20 步

全選整段文字 —— 圖片標註 ➀。

點擊「Align」(對齊) —— 圖片標註 ➁。

選擇「Align Center」(置中對齊) —— 圖片標註 ➂。

第 21 步

點擊「Preview & test」(預覽與測試)。

第 22 步

檢查圖片是否能正常顯示？按鈕連結是否能正確開啟？

確認沒問題後，點擊「✕」關閉預覽視窗。

第 23 步

點擊「Save & quit」(儲存並離開)。

第 24 步

點擊「Schedule」(排程) 設定電子報寄送時間。

這次我示範直接寄出，選擇「Send now」(立即發送) —— 圖片標註 ➀。

點擊右下角的「Send now」(立即發送) —— 圖片標註 ➁。

查看電子報寄送結果

Campaigns (活動) 狀態會先顯示「Scheduled」(已排程)。

等待幾分鐘後，狀態會更新為「Sent」(已發送)。

打開 Email 信箱檢查有沒有收到電子報。

太棒了！電子報已經順利寄達。

以後只要有靈感、有故事想說，就可以透過電子報和訂閱者分享囉！

⭐️ 延伸閱讀：更多 Brevo 進階功能 —— 自動化行銷、名單分析 (未來開放)

功能 2：網站流量分析工具 (用 Rank Math 串接 GA、GSC)

Google Search Console (簡稱 GSC) 是用來監測網站在 Google 搜尋表現的工具，可以查看網站在 Google 搜尋的曝光量、點擊次數和排名，追蹤 SEO 成效。

Google Analytics (簡稱 GA) 負責追蹤網站訪客行為，像是他們從哪個管道進到你網站、在網站上停留多久、看了哪些內容。

這些數據可以幫助你了解訪客習慣、鎖定目標客群，進一步優化網站內容。

簡單來說，GSC 可以幫你「提升網站被看見的機會」；GA 則是幫你「分析訪客的喜好」。

有了這兩項工具，就能更完整地瞭解網站的流量與成效。

接下來，我會先啟用 GSC 和 GA，再回到網站後台，用 Rank Math 快速串接這兩項工具。

這樣不用自己手動設定追蹤碼，整個流程會簡單很多！

[1] 建立 Google Search Console 資源

第 1 步

點擊下方連結前往 GSC。

👉 點我前往：創建 Google Search Console 帳戶

第 2 步

按下藍色按鈕「立即開始」。

看到「歡迎使用 Google Search Console」的頁面後，動作就可以先告一個段落。

等一下連結 Rank Math 後，Rank Math 會自動幫我們建立資源。

[2] 建立 Google Analytics 資源

第 1 步

點擊下方連結前往 GA。

👉 點我前往： 創建 Google Analytics 帳戶

第 2 步

按下藍色按鈕「Get started today」(今天立即開始)。

第 3 步

點擊「開始評估」。

第 4 步

一個帳戶可以管理多個網站，帳戶名稱我通常會填入個人品牌名稱，像是「諾特斯」。

第 5 步

往下滑，點擊「下一步」。

第 6 步

「屬性名稱」填上網站名稱 —— 圖片標註 ➀。

點擊「下一步」—— 圖片標註 ➁。

第 7 步

以「個人網站」來說，「產業類別」就選「其他商業活動」—— 圖片標註 ➀。

「商業規模」選擇「小 – 1 到 10 名員工」—— 圖片標註 ➁。

點擊「下一步」—— 圖片標註 ➂。

第 8 步

業務目標就依照你的需求選擇。

這次示範的個人網站因為沒有商業行為，所以我會選「瞭解網站和 / 或應用程式流量」。

第 9 步

點擊「建立」。

第 10 步

勾選接受條款 —— 圖片標註 ➀。

點擊「我接受」—— 圖片標註 ➁。

建立好 GA 資源了。

[3] 在 Rank Math 中連結 Google 帳戶

✏️ 小筆記

必須安裝並啟用 SEO 外掛 Rank Math 才能跟著此步驟操作！

備註：複習如何安裝外掛點 這裡

下載免費外掛

第 1 步

回到 WordPress 後台，點擊左側欄位的「Rank Math SEO」、「General Settings」(一般設定)。

第 2 步

切換到「Analytics」(分析)。

第 3 步

點擊「Connect Your Rank Math Account」(連結你的 Rank Math 帳戶)。

第 4 步

點擊「Register now」(立即註冊)。

第 5 步

按下「USE EMAIL ADDRESS」(使用電子郵件地址)。

第 6 步

填上名字和 Email —— 圖片標註 ➀。

把使用條款打勾 —— 圖片標註 ➁。

點擊「REGISTER」(註冊) —— 圖片標註 ➂。

第 7 步

註冊完成，點擊「OK, ACTIVATE NOW」(好，立即啟用)。

第 8 步

選擇要串接的 Google 帳戶。

第 9 步

點擊「繼續」同意隱私權政策跟服務條款。

第 10 步

把「全選」打勾，同意 Rank Math 存取 Google 帳戶資料 —— 圖片標註 ➀。

點擊「繼續」—— 圖片標註 ➁。

第 11 步

畫面跳轉回到 WordPress 後台。

稍等一下，會看到 Search Console (搜尋控制台) 的 Site (網站) 欄位自動跳出網址 —— 圖片標註 ➀。

「Enable the Index Status tab」(啟用索引狀態標籤) 也已經開啟，表示 Rank Math 已經自動於 GSC 驗證完網站所有權 —— 圖片標註 ➁。

第 12 步

在 Analytics (分析) 選擇剛剛 在 GA 設定好的資源 —— 圖片標註 ➀。

開啟「Install analytics code」(安裝分析代碼)，讓 Rank Math 自動把 GA 追蹤碼安裝進網站 —— 圖片標註 ➁。

開啟「Exclude Logged-in users」(排除已登入的使用者)，可以避免 GA 把你自己檢查網站時的瀏覽行為也記錄下來，影響分析結果 —— 圖片標註 ➂。

第 13 步

點擊「Save Changes」(儲存變更)，完成 Rank Math 與 GSC、GA 的串接設定。

過一段時間，等 Google 收集到足夠的數據後，你就能透過 GSC 找出哪些關鍵字、哪些頁面能帶來流量；同時利用 GA 觀察訪客們最喜歡看哪些主題。

這兩項工具能幫助你更了解訪客，根據數據調整內容方向，會是你未來經營網站的好夥伴。

結語

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

你真的非常努力，請給自己一個掌聲吧！

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

為了完成這個教學，諾特斯團隊花了好幾百個小時來製作 影片 和圖文教學，從蒐集資料、評測各種軟體工具，到編排課程、錄影實作和後製剪輯，每個環節都投入了很多心力。

只希望讓你在學習的時候更輕鬆、更容易跟上每一步操作。

如果這些內容有幫助到你，那就是對我最大的鼓勵了。

最後，我要提倡一個理念，就是：

堅持每天花一點時間，讓網站變得更好、更完整。

就算只是每天花個 5 分鐘、10 分鐘也很好，相信慢慢累積起來，就會為你帶來很大的回報。

祝你在架設和經營網站的路上，一切順利！

如果你想知道更多有關網站架設的細節，歡迎觀看我用心製作的其他 WordPress 筆記。

WordPress 新手教學 (總整理)

前往免費筆記

參考資料

• Are Blogs Still a Thing in 2025?
• Why EVERYONE Should Have a Personal Website
• Is there any benefit to making a website if I'm not a business?
• W3Techs - Most popular content management systems
• What is Shared Hosting?
• What Is Shared Hosting? The Good, the Bad, and the Affordable
• How to Pick the Best Domain Name For Your Website
• Guide On How To Choose Domain Name & Brand Naming Strategies
• How to Choose the Best Domain Name (14 Tips and Tools)
• Choosing The Right Theme for Your WordPress Site
• WordPress Theme Detector (Including Plugin detection)
• How to choose a theme for your WooCommerce store
• Complete RankMath Tutorial | SEO Tutorial For Beginners
• How to Install Google Analytics With Rank Math SEO
• Score 100/100 With Rank Math Post Tests
• Brevo — The most approachable CRM suite
• Brevo Email Marketing Tutorial for Beginners 2026 - Step by Step
• Authenticate your domain with Brevo (Brevo code, DKIM, DMARC)
• Email Marketing 101: How to Get Started With Email Marketing

製作團隊

總編輯、發佈：諾特斯
文字撰寫、文字編輯、圖片製作、圖片編輯：鹹魚
圖片製作：蚊子