驅動數位行銷

協助中小企業提升網站在搜尋結果頁上的能見度,以便獲取更多流量進而增加成交機率。


PRO 達人網
Shopping Cart

購物車內沒有任何商品。

加入 WordPress 學習交流社團

為什麼要加入本社團?好處如下:

  1. 問題解答
  2. 免費教學
  3. 好用工具推薦
  4. 最新資訊
  5. 秘訣分享
  6. 100+參考指引
立即加入
快速、安全及穩定的主機空間能提升網站 SEO 排名與使用者體驗

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

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

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

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

新增 CSS 的方法

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

  1. 附加的 CSS
  2. 佈景主題內建
  3. Blocks CSS
  4. Elementor Pro
  5. style.css
  6. 使用程式碼片段外掛:WPCode / FluentSnippets / ASE Pro

我推薦新增 CSS 的方式為「使用程式碼片段外掛」,好處是方便管理與安全。

使用 WordPress 附加的 CSS 新增

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

步驟
前往附加的 CSS

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

使用 WordPress 新增附加的 CSS
步驟
新增 CSS

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

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

答案是可以的,SiteOrigin CSS 這款免費的外掛可以讓你在不具備任何 CSS 基礎知識的情況之下,輕易調整網站的外觀。當然,熟悉 CSS 在操作上會更得心應手,推薦從 Learn CSS 這們免費課程開始學習。

教學開始

步驟
使用 SiteOrigin CSS 外掛

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

步驟
調整網站外觀

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

步驟
複製並貼上 CSS 語法

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

你可以試著透過以上的方法調整網站的外觀。更多關於這款外掛的應用我會在全方位學 WordPress – 從架站到整合行銷 2.0 付費課程中進一步說明,如果你有興趣歡迎一起加入學習。

加入 Facebook 社團
瀏覽次數: 424
全方位學 Wordpress – 從架站到整合行銷 2.0
  • 講師 24 小時內親自回覆問題,安心有保障
  • 優先推薦免費工具,幫你省荷包
  • 只推自己正在用的付費工具,不會為了傭金讓你繞遠路,真實誠懇
  • 注重效能,畢竟這會影響使用者體驗與 SEO 排名
  • 數 10 種學習資料,非常豐富
  • N 個獨家資源
  • 定期分享最新資訊
  • 300+參考指引
  • 內容 & 範本資料庫 (獨創)
  • AI 驅動,有效提高工作效率
開啟目錄