如何使用自定義 CSS 自定義您的 WordPress 主題

已發表: 2022-07-06

將自定義 CSS 添加到您的 WordPress 網站有助於改變您網站的外觀。 首先，每個 WordPress 主題都是使用特定的主要語言組件開發的。 其中包括 PHP、HTML、CSS 和 JavaScript。 PHP 用於後端代碼，而 HTML、CSS 和 JavaScript 用於前端。 總之，後三個用於呈現用戶在他或她的瀏覽器中看到的內容。

有時，在使用已安裝的主題設計 WordPress 驅動的站點時，您可能希望更改站點中某些部分或元素的外觀。 您可能還希望擁有與其他主題用戶所擁有的外觀不同的網站。 無論哪種情況，改變網站的外觀都需要 CSS。

對於日常的 WordPress 用戶和開發人員來說，添加自定義 CSS 似乎很容易，但對於第一次使用 Web 開發人員來說，這可能不是一個簡單直接的過程。

在本文中，我們將研究什麼是 CSS 以及可用於將自定義 CSS 添加到您的網站的一些方法。

目錄

什麼是 CSS

如何識別要自定義的 CSS

如何添加自定義 CSS

  • 通過兒童主題
  • 通過 WordPress 定制器
  • 使用第三方插件

CSS 更改不生效的常見原因

結論

什麼是 CSS

CSS代表層疊樣式表。 它是一種網絡語言，用於在您的網站中設置 HTML 元素的樣式。 基本上，您在瀏覽器中看到的網站前端組件是使用 HTML 構建的。 為了給這些元素設置樣式以向用戶提供正確的視覺顯示，您需要為此使用 CSS。 因此，CSS 與 HTML 一起工作，以便在前端正確呈現元素。

在我們的 staxwp.com 網站中可以看到 CSS 的示例應用程序。 在首頁，我們有一個標題，其中的一些文本被突出顯示，如下所示：

CSS 用於改變突出顯示文本的顏色，這就是為什麼顯示看起來與文本的其餘部分不同的原因。

這只是 CSS 可以應用於不同元素的眾多方式之一。 您還可以使用 CSS 來更改鏈接的顏色、文本的字體大小、為各種元素添加輪廓以及更多屬性。

在大多數遵循 WordPress 編碼標準的 WordPress 主題中，主題 CSS 代碼存儲在 style.css 文件中。 該文件位於主題文件的根目錄中。

如何識別要自定義的 CSS

為了識別要自定義的 CSS，您需要首先識別需要應用樣式的元素或內容。 假設我們希望在此處更改產品頁面中的按鈕文本顏色，或者更改下面圖示按鈕中的文本：

為此，您需要使用開發人員工具。 我們建議您使用 Google Chrome 或 Firefox 等瀏覽器，以便您輕鬆正確地使用這些工具。 在我們的例子中，我們將使用 Google Chrome 瀏覽器。

為了使用這些工具，您需要先“檢查元素”。 要為我們的按鈕文本實現這一點，請右鍵單擊按鈕元素中的一個文本並選擇“檢查”選項。 下面是一個示例截圖：

然後將呈現帶有許多選項卡的開發工具面板。

在屏幕截圖中，您會注意到在第一個視圖中呈現了兩個選項卡。 這些是“元素”和“樣式”。 在其他瀏覽器中，這些名稱可能不同。

如果您正確檢查了元素，您將在“元素”選項卡中看到我們想要更改其文本屬性的按鈕文本。

因為在我們的例子中，我們只對改變按鈕的文本顏色屬性感興趣，我們可以執行以下操作：

1. 單擊下圖所示的“新樣式規則”圖標：

單擊它後，將呈現檢查器樣式表。 在這種情況下，將生成按鈕的 CSS 類，如下所示。

因此，在這種情況下，我們的實際代碼將是：

 .stx-btn-text { }

現在，要更改按鈕文本的顏色，我們需要添加顏色代碼。 為此，我們將使用 color 屬性，為其指定顏色並將其添加到我們的原始代碼中。 這將是：

 color: #ff0000;

在上述情況下，#ff0000 是我們打算使用的顏色代碼。 您可以設置您喜歡的任何其他顏色代碼。

我們的最終代碼現在將是：

 .stx-btn-text { color: #ff0000; }

2. 或者，在檢查元素時，您可以使用渲染元素的第一個代碼或用於樣式化元素的代碼，用於樣式化目的。 下面是此代碼的說明：

在代碼中，添加顏色屬性和顏色代碼，並刪除其中指定的其他屬性，因為在我們的例子中，我們不需要覆蓋它們：

 color: #ff0000;

最終代碼現在將顯示為：

 .stx-btn-wrapper .stx-btn .stx-btn-content-wrapper .stx-btn-text { color: #ff0000; }

上述任何一種方法都可用於識別和確定要自定義或添加的 CSS。

指定代碼後，您可能會注意到顏色更改生效，但這要等到頁面刷新後才會生效。 因此，我們需要保存 CSS，以便 CSS 始終生效。 現在，這將我們帶到了下一步。

如何添加自定義 CSS

現在我們已經研究瞭如何識別和提出自定義 CSS。 我們現在需要一種在我們的網站中添加和保存 CSS 的方法。

我們可以使用多種方法將自定義 CSS 添加到我們的網站。 這些包括：

  1. 通過兒童主題
  2. 通過 WordPress 定制器
  3. 使用第三方插件

通過兒童主題

子主題使您能夠自定義父主題，從而消除在主題更新期間丟失自定義的可能性。 有關子主題以及如何設置它們的更多詳細信息，您可以在此處查看子主題主題：子主題。

子主題包含一個 style.css 文件。 這是您可以添加自定義 CSS 的文件。 要訪問它，這可以通過使用 FTP 軟件（如 Filezilla）通過 FTP 訪問您的站點文件來實現。 或者，您可以從外觀 > 主題文件編輯器訪問它，然後從主題下拉列表中選擇您的子主題，如下圖所示：

識別 style.css 文件後，將自定義代碼添加到文件的最後一行並保存更改。 在我們的例子中，我們將在第 12 行添加代碼，如下所示：

通過 WordPress 定制器

通過 WordPress 定制器添加自定義 CSS 是另一個值得考慮的好選擇。 在此方法中，您將需要：

導航到 WordPress 儀表板中的外觀 > 自定義部分。

在下一個屏幕上，菜單、小部件等許多選項將根據您的主題呈現在左側面板上。 向下滾動，直到找到“附加 CSS”選項。

單擊“附加 CSS”部分後，您將有一個代碼輸入部分，您可以在其中添加自定義 CSS。 現在將您的自定義 CSS 添加到該部分：

添加 CSS 代碼後，您可以將其保存為草稿以供稍後發布或立即發布。

同樣重要的是要注意本節提供驗證和代碼語法突出顯示。 因此，如果您的代碼中有任何錯誤，則在添加它時，您將對此進行一些突出顯示。

使用第三方插件

在插件的幫助下添加自定義 CSS 是另一個考慮因素。 如果您稍後碰巧切換主題並且您希望在新主題中也使用添加的 CSS，這實際上更適用。

有許多第三方插件可用於在您的 WordPress 網站中添加自定義 CSS。 在這裡，我們將至少介紹其中三個插件，您可以選擇在您的網站中使用其中任何一個。

自定義 CSS 專業版

Custom CSS Pro 插件為需要在其網站中添加自定義 CSS 的用戶提供了一個易於使用的界面和實時編輯體驗。

安裝插件後，您可以通過訪問 WordPress 儀表板中的“設置”>“自定義 CSS 專業版”部分來繼續添加自定義 CSS。

在提供的實時編輯器中，您可以添加自定義 CSS 並保存更改。 下面是一個示例：

網站起源 CSS

SiteOrigin CSS 插件提供強大的 CSS 編輯功能。 該插件的一個關鍵補充是它使您能夠識別可用於將自定義 CSS 應用於元素的選擇器。

安裝並激活插件後，您需要導航到外觀 > 自定義 CSS 部分，如下圖所示：

接下來，在自定義 CSS 編輯器中添加您的自定義 CSS，如下所示：

如果您還想使用可視化編輯器，則需要單擊下面突出顯示的眼睛圖標：

簡單的自定義 CSS

Simple Custom CSS 插件是一個輕量級且易於使用的插件，使網站管理員能夠將自定義 CSS 添加到他們的網站。

安裝插件後，您需要導航到外觀 > 自定義 CSS 部分。

接下來，在呈現的編輯器中，添加您的自定義 CSS。 下面是一個示例說明：

完成後，單擊“更新自定義 CSS”按鈕保存更改。

CSS 更改不生效的常見原因

在某些情況下，您在網站中添加的自定義 CSS 可能並不總是生效。 這可能是由多種原因引起的，其中包括：

1.緩存

如果您安裝了緩存插件，這可能會導致在您的站點中緩存各種資產。 因此，在保存自定義 CSS 或禁用可能正在使用的緩存插件後清除站點緩存至關重要。

如果您的託管服務提供商提供對服務器緩存的支持，有時您可能還會在服務器級別進行緩存。 在這種情況下，重要的是讓您的主機為您禁用緩存，或者如果提供了此選項，請從您的主機面板執行此操作。

2.語法錯誤

CSS 語法錯誤通常是您的 CSS 代碼中的錯誤。 例如，它可能是缺少冒號、分號，甚至是不正確的屬性拼寫。

檢查您的 CSS 代碼是否沒有此類錯誤非常重要。 您可以使用 CSS 驗證器（例如 CSS 驗證服務）來執行 CSS 驗證。

3. CSS 特殊性

如果您有針對同一元素的 CSS 規則，CSS 特異性基本上決定了哪個 CSS 優先。

例如，在我們的例子中，如果我們有兩個 CSS 代碼來改變按鈕的顏色，其中一個代碼使用 ID 來指定樣式，另一個使用一個類。 

 #stx-btn-text { color: #000000; }
 .stx-btn-wrapper .stx-btn .stx-btn-content-wrapper .stx-btn-text { color: #ff0000; }

將使用帶有 ID 選擇器的 CSS 代碼。 這是因為 ID 選擇器比類具有更高的特異性。 在上述情況下，將應用的顏色為黑色 (#000000)。

但是，您可以在屬性值之後使用 !important 規則來覆蓋 CSS 特異性。 例如，在我們這裡的例子中，如果我們將 !important 規則應用於具有類的代碼，那麼將應用該 CSS 代碼，在這種情況下，顏色將為紅色 (#ff0000)。

 .stx-btn-wrapper .stx-btn .stx-btn-content-wrapper .stx-btn-text { color: #ff0000 !important; }

但是，應該謹慎使用 !important 規則（僅在真正需要時）。 造成這種情況的原因之一是，如果在多個實例中將規則應用於一個元素，則在應用樣式時可能會造成混亂，並且可能很難調試問題。

結論

了解如何在 WordPress 網站中識別和添加自定義 CSS 對網站所有者非常有幫助。 這樣做的優點之一是減少了設計網站所需的時間。 此外，它還有助於消除將開發人員外包來進行次要 CSS 定制的需要。

我們確實希望本指南在添加自定義 CSS 時能提供有用的信息。 您可以在此處了解有關 CSS 的更多信息。 如果您有任何建議、問題或意見，請隨時在下方的評論部分提出。