新手教學：如何自訂 CSS 修改 WordPress 主題外觀

上週上課時，有學生問我：「老師，WordPress 主題長得好醜，可以自己改嗎？」

我笑著回：「要改不難啦～難的是你想改成什麼樣子！（因為本人美感真的很弱 😅）」

其實很多朋友都有同樣的困擾，下載的主題外觀不是很滿意，但又不想從零寫程式。這時候自訂CSS就能派上用場，快速調整小細節，今天就用一個簡單的範例，分享如何修改標題字體大小與顏色。

WordPress 主題自訂 CSS 操作步驟

第一步：找到要修改的區塊

打開網站，移到想修改的標題上，按右鍵 → 選擇「檢查」。

螢幕下方或右邊會跳出「語法檢查工具」。

在這裡，你會看到控制該區塊的 HTML 和 CSS。

第二步：測試修改 CSS

找到 font-size（字體大小） 的語法。

例如：font-size: 24px;
改成 50px 就能放大字體。

找到 color（字體顏色） 的語法。

例如：color: black;
改成 red 就會變成紅色。

找到 font-style（字體樣式） 的語法。

italic 斜體
oblique 斜體（效果略有不同）

調整後，左邊網頁會即時顯示結果，但這只是「測試修改」，重新整理後會消失。

第三步：複製修改後的語法

h1 {
font-size: 50px;
color: red;
font-style: italic;
}

這段就是等一下要貼進 WordPress 後台的 CSS。

第四步：安裝外掛加入自訂 CSS

進入 WordPress 後台 → 點選「安裝外掛」。
搜尋 WP Add Custom CSS，安裝並啟用。
啟用後，左側選單會出現「WP Add Custom CSS」。
點進去，把剛剛複製的 CSS 貼上去 → 儲存。

第五步：重新整理網站

完成以上步驟後，回到網站按下重新整理，就會看到字體樣式被修改囉！

常用 CSS 屬性補充

字體屬性說明

屬性	說明與範例
font-size	字體大小，例如：`font-size: 20px;`
font-weight	粗細，設為 `bold` 即為粗體
font-style	字體樣式，`italic` / `oblique`
font-family	設定字型，例如：`font-family: "Microsoft JhengHei", sans-serif;`

中文字型常見語法

字型	CSS 語法
細明體	MingLiU
新細明體	PMingLiU
標楷體	DFKai-sb
微軟正黑體	Microsoft JhengHei

若想要更多字型，可以到 Google Fonts 免費下載。

小提醒與建議

CSS 是加法思維：不會破壞主題原始檔案，只是額外加上樣式。

盡量精準選擇區塊：避免修改到不相關的元素。

想要更多彈性：可以學一點 HTML + CSS，這樣遇到特殊需求也能自己解決。

新手推薦懶人法：用外掛快速加 CSS，避免動到主題程式碼。

小結

修改 WordPress 外觀其實一點也不難！只要學會用「檢查」工具找到語法，然後透過外掛新增自訂 CSS，就能輕鬆調整網站樣式。

這篇算是給非工程師的朋友一個簡單的入門方法，希望對大家有幫助。
我自己也還在學習中，就讓我們一起努力吧～

撰文 / 陳建夆