您想添加自定義 css 來更改網站的外觀嗎？

添加自定義 css 可幫助您更改網站的布局和外觀，這是通過默認選項無法實現的。對于大多數初學者來說，使用 FTP 太令人困惑了，但是還有其他方法可以添加自定義 CSS。

在本文中，我們將向您展示如何輕松地將自定義 CSS 添加到您的 wordpress 網站，而無需編輯任何主題文件。

為什么要在 WordPress 中添加自定義 CSS？

CSS 是 Cascading Style Sheets 的縮寫，是一種幫助您設計WordPress 網站樣式的語言。CSS 和 html 結合在一起，因為 CSS 用于設置不同 HTML 元素的樣式，例如顏色、大小、布局和顯示。

立即學習“前端免費學習筆記（深入）”；

添加自定義 CSS 有助于自定義網站的設計和外觀，這是通過默認選項無法實現的。它為您提供了更多控制權，您可以通過幾行代碼輕松更改WordPress 主題。

例如，假設您想要更改每個帖子的背景顏色，而不是在整個網站上使用相同的顏色。通過添加自定義 CSS 代碼，您可以個性化特定帖子或頁面的背景。

同樣，您可以使用其他 CSS 更改電子商務商店中產品類別的樣式和外觀。

也就是說，讓我們看一下向 WordPress 網站添加自定義 CSS 的不同方法。您可以點擊下面的鏈接跳轉到您感興趣的任何部分：

• 方法 1：使用主題定制器添加自定義 CSS
• 方法 2：使用 WPCode 插件添加自定義 CSS
• 方法 3：使用完整站點編輯器 (FSE) 添加額外的 CSS
• 使用自定義 CSS 插件與在主題中添加 CSS

方法 1：使用主題定制器添加自定義 CSS

從 WordPress 4.7 開始，用戶現在可以直接從 WordPress 管理區域添加自定義 CSS。這非常簡單，您將能夠立即通過實時預覽看到您的更改。

首先，您需要從 WordPress 儀表板轉到外觀 ? 自定義頁面。

這將啟動 WordPress 主題定制器界面。

您將在左側窗格中看到站點的實時預覽，并帶有一堆選項。單擊左側面板中的“其他 CSS”選項卡。

該選項卡將滑動以顯示一個簡單的框，您可以在其中添加自定義 CSS。添加有效的 CSS 規則后，您將能夠在網站的實時預覽窗格中看到它的應用。

您可以繼續添加自定義 CSS 代碼，直到您對其在網站上的外觀感到滿意為止。

完成后，不要忘記單擊頂部的“發布”按鈕。

注意：您使用主題定制器添加的任何自定義 CSS 僅適用于該特定主題。如果您想將其與其他主題一起使用，則需要使用相同的方法將其復制并粘貼到新主題中。

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

第一種方法僅允許您保存當前活動主題的自定義 CSS。如果更改主題，則可能需要將自定義 CSS 復制并粘貼到新主題。

如果您希望無論使用哪個WordPress 主題都應用自定義 CSS ，那么此方法適合您。

WPCode是市場上最好的自定義代碼片段插件，擁有超過 100 萬用戶。它可以輕松地在 WordPress 中添加自定義代碼，并具有內置代碼片段庫、條件邏輯、轉換像素等功能。

您需要做的第一件事是安裝并激活免費的WPCode插件。如果您需要幫助，請參閱我們有關如何安裝 WordPress 插件的指南。

激活后，只需從 WordPress 管理儀表板轉到代碼片段 ? + 添加新內容即可。

然后，將鼠標懸停在代碼片段庫中的“添加自定義代碼（新片段）”選項上，然后單擊“使用片段”按鈕。

接下來，在頁面頂部為自定義 CSS 代碼段添加標題。這可以是任何可以幫助您識別代碼的內容。

之后，將自定義 CSS 寫下或粘貼到“代碼預覽”框中，并通過從下拉菜單中選擇“CSS 片段”選項來設置“代碼類型”。

然后，如果您想在整個 WordPress 網站上執行代碼，請向下滾動到“插入”部分并選擇“自動插入”方法。

如果您只想在某些頁面或帖子上執行代碼，您可以選擇“短代碼”方法。

現在，您需要返回頁面頂部并將開關切換到“活動”，然后單擊“保存片段”按鈕。

您現在可以查看您的 WordPress 網站以查看自定義 CSS 的運行情況。

方法 3：使用完整站點編輯器 (FSE) 添加額外的 CSS

在 WordPress 中添加自定義 CSS 的另一種方法是使用完整站點編輯器 (FSE)。借助 FSE，您可以使用 WordPress 塊編輯器編輯整個網站的布局和設計，就像編輯博客文章或頁面一樣。

請注意，完整的站點編輯器僅適用于選定的主題。有關更多詳細信息，您可以參閱我們關于最佳 WordPress 全站編輯主題的文章。

使用插件添加 CSS 會更容易一些。也就是說，如果您不想使用插件，那么我們將向您展示如何訪問定制器，即使它在您的管理菜單中不再可用。

您所需要做的就是登錄您的 WordPress 管理員。

然后，只需將下面的 URL 復制并粘貼到您的瀏覽器中，并將“example.com”替換為您自己網站的域名。

現在繼續在“附加 CSS”區域下輸入您的 CSS 代碼。

添加代碼后，只需單擊“發布”按鈕即可。

使用自定義 CSS 插件與在主題中添加 CSS

上述所有方法均推薦給初學者。高級用戶還可以將自定義 CSS 直接添加到他們的主題中。

但是，不建議將自定義 CSS 片段添加到父主題中。如果您不小心更新主題而不保存自定義更改，您的 CSS 更改將會丟失。

最好的方法是使用子主題。然而，許多初學者不想創建子主題。除了添加自定義 CSS 之外，初學者通常不知道如何使用該子主題。

使用自定義 CSS 插件可以讓您獨立于主題存儲自定義 CSS。這樣，您可以輕松切換主題，并且您的自定義 CSS 仍然存在。

將自定義 CSS 添加到 WordPress 網站的另一個好方法是使用CSS Hero插件。這個出色的插件允許您編輯 WordPress 網站上的幾乎所有 CSS 樣式，而無需編寫任何代碼。

您還可以使用SeedProd插件添加自定義 CSS。SeedProd 是一個拖放網站構建器，可讓您為 WordPress 網站創建自定義 WordPress 主題和登陸頁面。您可以輕松編輯全局 CSS 設置，無需任何代碼。

我們希望本文有助于將自定義 CSS 添加到您的 WordPress 網站。您可能還想查看我們關于如何選擇最佳網頁設計軟件以及最佳 WordPress 拖放頁面構建器插件的指南。