如何在 WordPress 新增 CSS？方法介紹與工具推薦

如果你對於現有網站的外觀不是很滿意，再加上佈景主題或編輯器沒有提供相關的設計選項，這時候就需要新增 CSS 以符合心目中的期待。

但是你可能不會 CSS 以致於無法將內心的想法化為現實，又或者不知道要在哪裡新增才是最佳化做法？

因此，本篇文章會介紹新增的方法，然後推薦一款免費且實用的外掛，讓你能夠輕易地修改網站上的每一個細節，即使完全不懂 CSS 也沒有關係。

新增 CSS 的方法

在 WordPress 新增 CSS 的方法有很多種，大概有以下幾種方式：

• 附加的 CSS (內建)
• 佈景主題內建
• Blocks CSS (區塊編輯器)
• Elementor Pro (Elementor 編輯器)
• style.css
• 使用程式碼片段外掛：WPCode

我個人最推薦的方式是使用內建的功能，也就是透過附加的 CSS 處理。這樣做的好處是，你不需要另外安裝外掛或者編輯子佈景主題的style.css。

另外一個好處是，你可以即時看到預覽的結果，毋須多按儲存按鈕或者切換畫面，非常直覺與方便。

使用 WordPress 附加的 CSS 新增

新增 CSS 的方式很簡單，兩個步驟即可達成，如下：

步驟一：先來到你想要調整樣式的頁面，然後前往 [自訂] → [附加的 CSS]。

步驟二：接著，在附加的 CSS 輸入語法，不過你需要對 CSS 有一定程度的了解。當你確認樣式套用成功之後，就可以點選發佈的按鈕。

不懂 CSS 也能調整網站外觀嗎？

答案是可以的，透過 SiteOrigin CSS 這款免費的外掛可以讓你在不具備任何 CSS 基礎知識的情況之下，也能夠輕易地調整網站的外觀。

教學開始

步驟一：安裝並啟用 SiteOrigin CSS 之後，前往 [外觀] → [自訂 CSS]。接著，點選眼睛的圖示。

步驟二：先來到你想要修改的頁面，然後點選需要修改的元素，接著再調整它的樣式，像是大小、顏色、框線…等等。確認沒有問題之後，點選勾勾的圖示。

步驟三：當你透過 SiteOrigin CSS 產出語法之後，可以先將其複製並貼在附加的 CSS 上面然後再點選發佈。最後，因為階段性的任務已經完成，所以可以將外掛刪除，之後如有需要再裝回來即可。

你可以試著透過以上的方法調整網站的外觀。更多有關這個外掛的應用我會在付費課程中進一步的說明 (部落格加強篇：標題樣式)，如果你有興趣歡迎一起加入學習。