如何輕松地將自定義 CSS 添加到您的 WordPress 網(wǎng)站

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

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

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

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

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

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

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

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

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

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

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

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

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

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

這將啟動(dòng) WordPress 主題定制器界面。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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