您想添加自定義 css 來更改網(wǎng)站的外觀嗎？

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

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

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

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

立即學(xué)習(xí)“前端免費學(xué)習(xí)筆記（深入）”；

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

您現(xiàn)在可以查看您的 WordPress 網(wǎng)站以查看自定義 CSS 的運行情況。

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

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

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

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

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

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

現(xiàn)在繼續(xù)在“附加 CSS”區(qū)域下輸入您的 CSS 代碼。

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

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

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

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

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

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

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

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

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