每月僅需 600 元起便能享有快速、安全及穩定的主機空間

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

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

/ 閱讀時間 4 分鐘 

最後更新時間 : 2023 年 2 月 11 日

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

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

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

新增 CSS 的方法

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

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

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

使用 WordPress 附加的 CSS 新增

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

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

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

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

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

教學開始

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

使用 SiteOrigin CSS 新增 CSS

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

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

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

這篇文章對您是否有幫助?

0 / 5

Your page rank:

不滿意現有網站的速度嗎?😥

我們提供的 WordPress 網站代管服務能讓你的網站快如閃電,進而提升使用者體驗與 SEO 排名。

全方位學 WordPress – 從架站到整合行銷 2.0

這是一門 WordPress 架站與 SEO 行銷課程,學完後便能擁有更全面的架站技能並且透過課程所教的行銷操作手法與資源,讓你的網站獲得更多曝光的機會,進而帶來收益。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *


購物車

聯絡我們

請填寫以下表單,我們將盡速與您聯繫

聯絡資訊
需求確認


驅動

關於我們

驅動數位行銷成立於 2019 年,提供個人或企業在網路上的各種行銷解決方案,主要的服務項目包含:網頁設計、網站代管以及搜尋引擎最佳化。與其他網頁設計公司不同之處在於,我們是以獲得更多流量、名單、銷售與轉介紹為導向。

PRO 360 專家檔案