自訂 CSS 可讓您控制 WordPress 網站的樣式，讓您調整從字型、顏色到佈局的一切。以下是如何使用不同方法在 WordPress 中加入自訂 CSS 的指南，以滿足您的需求。

方法 1：使用 WordPress 內建的自訂 CSS 功能

WordPress 內建了一個選項，可以直接在儀表板中加入自訂 CSS。它非常適合微小的調整，對初學者也很友善。

1. 存取自訂工具
   • 登入後前往 外觀 > 自訂.

2. 選擇 "額外 CSS
   • 在左側欄中，按一下 額外的 CSS.此時會出現一個文字方塊，您可以在此輸入 CSS 代碼。

3. 新增自訂 CSS
   • 輸入您的代碼。例如

4. 預覽與發佈
   • 您會看到變更的即時預覽。滿意後，按一下 發表.

最適合:調整簡單，不需要編輯主題檔案。

方法 2：使用子主題的 Style.css 檔案

最好使用子主題的 style.css 檔案進行更重要的變更。如此一來，即使主題更新後，您的編輯也能保持安全。

1. 啟用子主題
   • 如果您仍需要開始使用，請建立或安裝子主題。外掛程式如 兒童主題配置器 簡化。

2. 存取 Style.css 檔案
   • 在 外觀 > 主題檔案編輯器，選擇您的子主題的 style.css 檔案。

3. 新增您的 CSS
   • 在 底部 的檔案。範例：

.custom-header { background-color: #2c3e50; color: #ffffff; }
.custom-button { background-color: #e74c3c; color: #ffffff; padding：10px 20px; border-radius: 5px; } .

4. 儲存變更
   • 按一下 更新檔案 來保存。

最適合:較大的風格變更，在更新後應該會持續存在。

方法 3：使用外掛程式新增自訂 CSS

如果您不想編輯檔案或子主題，外掛程式可以處理自訂 CSS。這對於管理跨多個頁面的 CSS 非常有用。

• 簡單的自訂 CSS 和 JS:輕量且容易新增 CSS 與 JavaScript。
• WPCode:在整個網站或每個頁面加入 CSS。
• SiteOrigin CSS:適合初學者的視覺編輯器。

使用 WPCode 的範例：

1. 安裝 WPCode
   • 前往 外掛程式 > 新增 外掛程式, 搜尋 WPCode、安裝和啟動。

2. 建立一個 新 CSS 摘要
   • 前往 程式碼片段 > 新增片段.選擇 CSS 摘要.

3. 選擇位置
   • 若要 CSS 適用於整個網站，請選擇 全站標題.

最適合:不需碰觸主題檔案，即可輕鬆管理 CSS。

方法 4：透過 Page Builders (Elementor、Divi) 新增自訂 CSS

像 Elementor 和 Divi 之類的頁面建立工具通常內建 CSS 選項，讓管理樣式變得簡單。

在 Elementor 中：

1. 選擇元素和存取 進階 設定
   • 在 Elementor 中，選取一個元素，前往 進階 設定，並找到 自訂 CSS (Elementor Pro).

2. 輸入 CSS 代碼
   • 使用 selector 關鍵字來定位元素。範例：

selector { background-color: #333; color: #fff; }

在 Divi：

1. 前往主題選項
   • 導覽到 Divi > 主題選項 > 自訂 CSS.

2. 輸入並儲存 CSS 代碼
   • 新增自訂 CSS 並儲存。

最適合 那些已經在使用頁面建構器且可以輕鬆存取自訂 CSS 的人。

方法 5：透過 FTP 或程式碼編輯器直接新增 CSS

如果您熟悉 FTP 並想要完全控制，您可以直接在伺服器上編輯 CSS 檔案。

步驟：

1. 透過 FTP 連線
   • 使用 FTP 用戶端（如 FileZilla）連接到您的網站。
2. 導覽至主題資料夾
   • 前往 wp-content/themes/your-child-theme/，開啟 style.css。

3. 編輯與上傳
   • 新增自訂 CSS、儲存並上傳。

最適合:需要完全控制的進階使用者。

常見問題

1.為什麼我的自訂 CSS 無法運作？

清除瀏覽器 快取 或任何網站快取外掛程式，因為快取可能會阻擋更新。

2.如何防止 CSS 在更新時遺失？

使用 兒童主題 或外掛儲存 CSS，而不是修改父主題的檔案。