歡迎參考我們的 WordPress 網站代管服務,快速與穩定的環境 = 更多潛在的獲利

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

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

/ 閱讀時間 4 分鐘 

如果你對於現有網站的外觀不是很滿意,再加上佈景主題或編輯器沒有提供相關的設計選項,這時候就需要新增 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:

想要學習如何開始部落格嗎?

如果你想要開始建立部落格並學習如何經營與瞭解獲利模式,可以參考:如何開始部落格?從架設、經營到獲利一次搞定(2022最新)

加入「全方位學 WordPress - 從架站到整合行銷」2.0 課程等候名單

我正在改版「全方位學 WordPress - 從架站到整合行銷 2.0」這門課程,適合那些想學習更進階的 WordPress 技術與 SEO 內容行銷的人。歡迎加入課程等候名單,等改版完成後會發送通知。

留言

發佈留言必須填寫的電子郵件地址不會公開。

驅動

關於我們

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

PRO 360 專家檔案