在 WordPress 中添加自定義 CSS 是一種非常實用的方式，可以讓你完全掌控網站的外觀和風格。自定義 CSS 是 WordPress 網站定制中非常靈活和強大的工具，可以幫助你精細地控制網站的視覺效果、布局、用戶體驗，并提升移動端顯示效果。無論你是想調整字體、修改配色，還是優(yōu)化布局，自定義 CSS 都可以幫助你實現這些需求。以下是幾種常見的方法，供你輕松地將自定義 CSS 添加到你的 WordPress 網站。

方法 1：使用 WordPress 自帶的“自定義 CSS”功能

WordPress 提供了一個內置的選項，允許你直接在后臺添加自定義 CSS。這種方法簡單易用，適合初學者，也適合需要做小幅度調整的情況。以下是具體步驟：

1. 進入“自定義”設置
   • 登錄 WordPress 管理面板，導航到 外觀 > 自定義。

2. 選擇“額外 CSS”選項
   • 在左側菜單中找到 額外 CSS，點擊打開。一個輸入框會顯示出來，你可以在其中直接添加 CSS 代碼。

3. 輸入自定義 CSS
   • 在文本框中輸入你的 CSS 代碼。例如：
   • 這里的代碼更改了頁面的背景顏色，并調整了一級標題的顏色和大小。

body { background-color: #f4f4f4; } h1 { color: #333333; font-size: 2.5em; }

4. 實時預覽與發(fā)布
   • WordPress 的自定義功能會實時預覽 CSS 修改效果。確認無誤后，點擊 發(fā)布 按鈕保存更改。

優(yōu)點：
此方法操作簡單，適合小幅度的樣式調整，也不涉及到修改主題文件，因此在主題更新時不會丟失代碼。

適用場景：
對于想要快速、方便地添加少量 CSS 的用戶，特別適合需要小范圍調整網站外觀的情況。

方法 2：使用子主題的 style.css 文件

如果你希望更深入地自定義網站外觀，或者需要大規(guī)模調整，建議使用子主題并在 style.css 文件中添加自定義 CSS。這樣做的好處是即使主題更新，修改的 CSS 代碼也不會丟失。以下是具體步驟：

1. 啟用子主題
   • 為了避免主題更新時覆蓋你的自定義代碼，建議創(chuàng)建并使用子主題。如果還沒有子主題，可以安裝一個，或使用插件（如 Child Theme Configurator）快速生成。
2. 打開 style.css 文件
   • 進入 WordPress 管理后臺，導航到 外觀 > 主題文件編輯器，選擇子主題的 style.css 文件。這是子主題的主要樣式表文件。

3. 添加自定義 CSS
   • 在 style.css 文件底部添加你的自定義 CSS 代碼，例如：
   • 這段代碼為 .custom-header 類設置了背景色和字體顏色，并為 .custom-button 類設計了一個具有圓角的按鈕樣式。

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

4. 保存更改
   • 確認無誤后，點擊 更新文件 以保存你的修改。

注意：
直接修改父主題的 CSS 文件可能會導致主題更新后覆蓋修改，因此不推薦這樣做，使用子主題是更安全的選擇。

適用場景：
適合需要大幅度調整網站樣式的用戶，特別是對于開發(fā)者或高級用戶來說，子主題是一種靈活而安全的自定義方法。

方法 3：使用插件添加自定義 CSS

如果你不想編輯代碼文件，或者不愿使用子主題，借助插件是一個簡單高效的選擇。這種方法適合需要多頁面?zhèn)€性化的用戶。以下是一些流行的插件以及使用步驟：

常用插件：

• Simple Custom CSS and JS：一個輕量的插件，可以添加 CSS 和 JavaScript，操作簡便。
• WPcode：支持為整個網站、特定頁面或特定文章添加自定義 CSS。
• SiteOrigin CSS：提供直觀的可視化編輯器，適合不熟悉 CSS 的用戶。

步驟 1：安裝 WPCode 插件

1. 進入插件庫
   • 登錄 WordPress 后臺，導航到 插件 > 安裝新插件。
2. 搜索 WPCode
   • 在搜索欄輸入“WPCode”，找到 WPCode – Insert Headers and Footers + Custom Code Snippets 插件。

3. 安裝并激活插件
   • 點擊 安裝，然后激活插件。

步驟 2：創(chuàng)建新的 CSS 代碼片段

1. 進入 WPCode 管理頁面
   • 激活插件后，導航到 Code Snippets > Add Snippet。

2. 選擇代碼類型
   • 在 WPCode 提供的代碼片段模板庫中，選擇 Add Your Custom Code (New Snippet) 然后直接選擇 CSS Snippet 模板。

3. 選擇插入位置
   • 在“插入位置”選項下，選擇 Site-Wide Header 或 Site-Wide Footer（推薦添加到 Header），以確保 CSS 代碼能在整個網站加載。

方法 4：通過主題構建器（Elementor、Divi 等）添加自定義 CSS

對于使用 Elementor、Divi 等主題構建器的用戶，這些工具通常自帶 CSS 添加功能，操作更為便捷。

在 Elementor 中添加 CSS

1. 選擇元素并進入“高級”設置
   • 打開 Elementor 頁面編輯器，選擇需要添加 CSS 的元素，進入“高級”選項卡，找到“自定義 CSS”選項（僅 Elementor Pro 提供）。

2. 輸入 CSS 代碼
   • 使用 selector 選擇當前元素，例如：

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

在 Divi 中添加 CSS

1. 進入主題選項
   • 在 WordPress 后臺，進入 Divi > 主題選項 > 自定義 CSS。
2. 輸入 CSS 代碼并保存
   • 輸入自定義 CSS 代碼后，點擊保存即可。

優(yōu)點：
無需離開編輯器即可輕松管理 CSS，特別適合使用高級設計工具的用戶。

適用場景：
對于已使用 Elementor、Divi 等構建器的用戶，此方法方便快捷，不需要插件。

方法 5：通過 FTP 或代碼編輯器直接添加 CSS

如果你有更高的自定義需求，并熟悉 FTP 和代碼編輯工具，可以直接在主題文件中編輯 CSS。這種方法適合開發(fā)人員。

步驟

1. 連接 FTP
   • 使用 FTP 客戶端（如 FileZilla）連接網站服務器。
2. 定位主題文件夾
   • 進入 wp-content/themes/your-child-theme/ 文件夾，找到 style.css 文件。
3. 編輯并上傳
   • 打開 style.css 文件，在合適位置添加自定義 CSS，保存并上傳。

優(yōu)點：
完全掌控文件和代碼，適合高級開發(fā)人員。

適用場景：
需要大量修改樣式的高級用戶，且熟悉 FTP 操作。

常見問題

1. 為什么自定義 CSS 沒有效果？
可能是緩存問題，嘗試清除瀏覽器緩存或網站緩存插件。

2. 如何避免自定義 CSS 在主題更新時丟失？
建議使用子主題或插件保存 CSS，避免更新覆蓋代碼。

聯系我們
教程看不懂？聯系我們?yōu)槟赓M解答！免費助力個人，小企站點！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時間：周一至周五，9:30-18:30，節(jié)假日休息