如何在 WordPress 中添加自定義 CSS

許多 WordPress 使用者希望自訂網站外觀，但直接修改主題可能帶來風險。本文將詳細介紹 WordPress 自定義 CSS 的方法，教你如何安全修改樣式，不影響主題更新，並兼顧響應式設計，讓你的網站既美觀又穩定。閱讀下去，你將掌握簡單有效的自定義 CSS 技巧。

如何在 WordPress 添加自定義 CSS

很多人建好 WordPress 網站之後，會發現主題提供的樣式選項根本不夠用。想改個標題顏色、調整按鈕大小，翻遍了設定介面都找不到對應選項。這時候，學會添加自定義 CSS 就變得非常實際。

WordPress 內建了一個相當方便的入口，就在「外觀」→「自定義」→「額外 CSS」。只要把 CSS 代碼貼進去，儲存後立即生效，不需要動任何主題檔案。對於初學者來說，這是最安全、最直接的方法。

基本操作步驟

• 登入 WordPress 後台，點選左側「外觀」→「自定義」
• 在左側面板最底部找到「額外 CSS」選項
• 將你的 CSS 代碼貼入文字框
• 右側預覽區域會即時顯示效果
• 確認效果後點選「發佈」儲存

舉個常見例子，想把所有段落文字改成深灰色，只需要輸入 p { color: #333333; }，幾秒鐘就能看到效果。這種即時預覽功能很有用，讓你不用盲目猜測改動後的結果。

不過這個內建方式有個限制：部分區塊編輯器（Gutenberg）的主題在新版本中，「額外 CSS」的入口位置可能略有不同，有些移到了「樣式」選項下。如果找不到，試試在自定義面板搜尋「CSS」就能定位。

避免主題更新覆蓋自定義 CSS 的最佳方法

這是很多人踩過的坑。直接修改主題的 style.css 檔案，改完之後主題一更新，所有修改全部消失。如果你花了幾個小時調整樣式，更新後全部歸零，那感覺真的很崩潰。

解決方法其實很清晰，核心原則就是：永遠不要直接修改主題原始檔案。

三種安全保存自定義 CSS 的方式

• 使用 WordPress 內建「額外 CSS」：樣式儲存在資料庫，與主題檔案分離，更新主題不受影響
• 建立子主題（Child Theme）：進階方法，在子主題的 style.css 添加修改，父主題更新不影響子主題設定
• 使用專屬 CSS 插件：同樣儲存在資料庫，即使換主題部分樣式仍可保留

子主題的做法對新手來說門檻稍高一點，但如果你打算長期維護一個網站，這是值得花時間學的技能。基本上就是建一個新資料夾，寫一個簡單的 functions.php 和 style.css，告訴 WordPress 這個主題繼承自哪個父主題，之後所有修改都在子主題裡進行。

香港有不少小型企業主自己管理 WordPress 網站，很多人圖方便直接改主題檔案，結果隔幾個月主題自動更新後，網站樣式大亂，才急忙找人修復。建議一開始就養成好習慣，省去後患。

使用插件輕鬆添加自定義 CSS

如果你覺得子主題太複雜，又想要比內建「額外 CSS」更多功能，插件是個實用的中間選項。現在市面上有幾款評價穩定的 CSS 插件，各有適合的使用情境。

SiteOrigin CSS 有個特別方便的功能：你可以直接在前台點選頁面上的元素，插件會自動識別該元素的 CSS 選擇器，不需要自己去找。對於不太確定「怎麼選中那個元素」的初學者，這省了很多摸索時間。

選插件的時候，建議留意最後更新日期，以及是否與你目前的 WordPress 版本相容。一個兩年沒更新的插件，用起來風險較高，即使評分再高也要謹慎。

學習 CSS 修改網站樣式的基本技巧

不需要成為前端工程師，也能用 CSS 做出實用的修改。掌握幾個核心概念，已經足夠應付大多數日常需求。

瀏覽器開發者工具是你最好的學習工具

在 Chrome 或 Firefox 按下 F12，開發者工具就會打開。切換到「Elements」分頁，把滑鼠移到頁面上任何元素，右側會顯示該元素目前套用的所有 CSS 屬性。你可以直接在這裡修改數值，即時看到效果——這個功能完全免費，卻是學 CSS 最快的方式之一。

幾個常用且實用的 CSS 修改範例

• 改變標題顏色：h2 { color: #e74c3c; }
• 調整段落字體大小：p { font-size: 18px; line-height: 1.8; }
• 為按鈕加圓角：.wp-block-button__link { border-radius: 30px; }
• 設定內容最大寬度：.entry-content { max-width: 780px; margin: 0 auto; }
• 隱藏某個特定元素：.site-footer .widget-area { display: none; }

常見錯誤是寫了 CSS 但沒有效果，這通常是「選擇器權重」的問題。主題的 CSS 可能用了更高權重的選擇器覆蓋了你的設定。遇到這種情況，臨時的解法是在屬性後加上 !important，例如 color: red !important;，但要避免過度使用，否則後期維護會很亂。

如何實現響應式設計與多裝置兼容

香港人使用手機瀏覽網站的比例相當高，很多人在 MTR 上或休息時間習慣用手機查資料。如果你的網站在手機上顯示混亂，訪客很可能直接離開。

響應式 CSS 的核心工具是「媒體查詢（Media Query）」，簡單說就是告訴瀏覽器：「如果螢幕寬度小於某個數值，就套用這組樣式。」

基本媒體查詢語法結構

• 手機版（768px 以下）：@media (max-width: 768px) { ... }
• 平板版（768px 至 1024px）：@media (min-width: 768px) and (max-width: 1024px) { ... }
• 桌面版（1024px 以上）：@media (min-width: 1024px) { ... }

實際例子：網站側邊欄在桌面版顯示正常，但手機版就擠成一團。可以用媒體查詢在小螢幕上將側邊欄隱藏，或改為全寬顯示。修改後，記得用 Chrome 開發者工具的「裝置模式」模擬不同螢幕尺寸，確認各個斷點的顯示效果都符合預期。

另一個常被忽略的細節是圖片響應式處理。加上 img { max-width: 100%; height: auto; } 這行代碼，可以確保圖片不會超出容器範圍，在手機上自動縮放。這是一行很基礎但非常有效的設定。

提升 WordPress 網站外觀的 CSS 小技巧

有幾個不算複雜、但效果明顯的 CSS 技巧，很適合用來快速提升網站質感。

讓網站看起來更精緻的實用設定

• 加入過渡動畫：a { transition: color 0.3s ease; } 讓連結顏色變換更順滑，不那麼生硬
• 卡片陰影效果：.wp-block-group { box-shadow: 0 2px 12px rgba(0,0,0,0.08); border-radius: 8px; padding: 24px; }
• 自定義滾動條顏色：在 Chrome 可用 ::-webkit-scrollbar 相關屬性調整
• 文字選取顏色：::selection { background: #f39c12; color: white; } 選取文字時顯示品牌色

這些細節單獨看起來微不足道，但組合起來確實讓網站整體感覺更有設計感。很多訪客說不清楚為什麼某個網站「看起來比較專業」，往往就是這些細節在起作用。

有一點要注意：CSS 效果要克制，不是加越多越好。動畫太多、陰影太重，反而讓頁面顯得雜亂。原則是每個效果都要有明確目的，而不是為了「好看」而加。

初學者學習 WordPress 自定義 CSS 的步驟

如果你完全沒有 CSS 基礎，也不必感到壓力。學習曲線其實沒想像中陡。從最小的改動開始，每次只改一個地方，觀察效果，慢慢累積理解。

建議的學習路徑

• 第一階段：在 WordPress「額外 CSS」試著修改字體顏色和大小，感受 CSS 如何運作
• 第二階段：學會用瀏覽器開發者工具找元素的選擇器，解決「不知道怎麼選中它」的問題
• 第三階段：了解 CSS 盒模型（margin、padding、border）的概念，這是控制排版的基礎
• 第四階段：學習媒體查詢，讓修改能適應不同裝置
• 第五階段：考慮建立子主題，養成規範的管理習慣

免費學習資源方面，MDN Web Docs 有非常完整的 CSS 文件，雖然是英文，但每個屬性都有清楚的範例。W3Schools 的教程更易讀，適合完全入門的人。YouTube 上也有不少繁體中文的 CSS 入門課，搜尋「CSS 教學」或「WordPress CSS 自定義」能找到實用的影片。

遇到問題時，把錯誤的 CSS 代碼貼到 Google 搜尋，通常能找到有相同問題的人和解答。Stack Overflow 和 WordPress 官方論壇都是很好的求助平台，香港的 WordPress 用戶社群在 Facebook 上也有幾個活躍的群組，遇到問題可以直接發問。

學 CSS 最快的方式就是實際動手做。與其反覆看教程，不如直接在自己的網站上試，遇到問題就解決，這樣進步最快。建議在正式網站旁邊建一個測試站，或使用本地開發環境（如 Local by Flywheel），讓你可以放心嘗試各種修改，不用擔心影響真實網站。

如果你還沒開始動手，不妨現在就登入 WordPress 後台，打開「額外 CSS」，試著改一行代碼看看效果。先從小改動建立信心，再逐步嘗試更複雜的樣式調整。遇到不確定的地方，把問題拆細一點，一步一步測試，你會發現 CSS 沒有想像中困難，而且帶來的效果相當直接。