如果你對於現有網站的外觀不是很滿意,再加上佈景主題或編輯器沒有提供相關的設計選項,這時候就需要新增 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 上面然後再點選發佈。最後,因為階段性的任務已經完成,所以可以將外掛刪除,之後如有需要再裝回來即可。


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