您是否曾經想更改網站外觀的某些方面，但不知道怎么做？有一個解決方案——您可以將自定義 CSS（層疊樣式表）添加到您的WordPress網站！

在本文中，我們將討論您需要了解的有關CSS的所有知識以及如何使用它來修改您網站的整體外觀。

• 什么是CSS？
• 使用區塊編輯器添加自定義CSS類
• 通過插件添加WordPress自定義CSS
  • Simple Custom CSS
  • WP Add Custom CSS
  • SiteOrigin CSS
  • Simple Custom CSS and JS
• 使用Theme Customizer添加WordPress自定義CSS
• 使用子主題添加WordPress自定義CSS
• 解決常見的WordPress自定義CSS問題
  • 更改CSS不起效
  • CSS語法拼寫錯誤
  • CSS寫法沖突
  • 想改但無處下牙

什么是CSS？

CSS是一種樣式表語言，可以修改網站基本結構的外觀，用HTML編寫。CSS允許您將不同的屬性（例如顏色、大小、布局和顯示）分配給HTML標記。

您也可以定制某些WordPress主題的默認外觀。因此，如果您想創建您想要的設計和外觀，您可以將自定義CSS添加到您的WordPress網站。

使用區塊編輯器添加自定義CSS類

WordPress 5.9更新為網站定制帶來了一些變化。其中之一是自定義CSS的實現。

新的全站點編輯方法依賴于全局樣式和基于每個塊的設計，從而減少了對CSS和大量編碼的需求。

但是，仍然可以向任何WordPress區塊添加自定義CSS類。

首先，通過導航到Tools -> Theme File Editor在樣式表中定義CSS類。選擇活動主題并打開Stylesheet主題文件以編輯style.css文件。

使用文本編輯器添加CSS類和代碼。例如，讓我們添加一個justify-class類來對齊文本。

頁。證明-類{ 文本對齊：對齊；}

完成后單擊更新文件。

現在通過導航到外觀-> Site Editor打開站點編輯器。單擊屏幕右上角的“設置”按鈕，選擇要自定義的區塊并打開其設置。

打開Advanced下拉菜單并在底部找到**Additional CSS class(es)**部分。在文本字段中插入CSS類。

在添加justify-class類后，段落區塊中的文本將被對齊。
您可以將多個CSS類添加到一個區塊中，方法是用空格分隔它們。

通過插件添加WordPress自定義CSS

為WordPress實現自定義CSS的更簡單方法之一是使用插件。有很多可供選擇，所以讓我們概述一下最受歡迎的，看看它們是如何工作的。我們在本指南中使用的所有工具都可以通過插件輕松安裝 -> WordPress儀表盤的添加新部分。

Simple Custom CSS

社區中最受歡迎的WordPress自定義CSS插件之一，Simple Custom CSS可讓您實現自己的樣式或覆蓋當前主題的CSS。即使您更改主題，您在此處設置的值也會保留。一旦激活，該工具將通過外觀 -> 自定義CSS部分可用。使用它非常簡單——只需在編輯器中輸入您需要的任何值并保存更改！如果您想查看更改，您需要做的就是刷新您的網站。

WP Add Custom CSS

WP Add Custom CSS是另一個很棒的工具，您可以使用它來實現WordPress自定義CSS。安裝后，它將出現在儀表板自己的專用部分中。通過它，您可以將CSS應用到整個網站。方便的部分是您還將在每篇文章下都有一個CSS編輯器。因此，如果需要，您可以為各個文章應用不同的CSS規則。就像以前的插件一樣，所有更改都可以通過刷新瀏覽器來查看。

SiteOrigin CSS

SiteOrigin CSS是一個用戶友好的交互式工具，用于添加WordPress自定義CSS。安裝后，該工具將在外觀 -> 自定義CSS部分中可用。此插件具有方便的編輯器界面，您可以在其中選擇站點的任何部分和使用內置工具或手動添加代碼對其進行編輯。

Simple Custom CSS and JS

與早期條目相比，Simple Custom CSS ad JS具有一些額外的功能。其中之一是添加自定義JavaScript條目的能力。安裝插件后，它將顯示在儀表板下的單獨部分中。在那里，您將能夠創建自定義CSS條目，類似于創建WordPress文章的方式。為了測試它，我們將H1標簽更改為更加豐富多彩。

使用Theme Customizer添加WordPress自定義CSS

無論您使用什么WordPress主題，您都可以使用內置的主題定制器調整CSS。導航到儀表板的外觀 -> 自定義部分，向下滾動到頁面底部，然后單擊Additional CSS。這將打開一個內置工具，允許您添加任何CSS代碼。它易于使用，可讓您查看網站的移動和平板電腦版本。恭喜！您現在知道如何在沒有任何插件的情況下在WordPress中應用自定義CSS。

使用子主題添加WordPress自定義CSS

另一種選擇是創建一個WordPress子主題——它允許您修改父主題，而不會破壞您的實時站點。

如果你還不確定你想做什么，你可以先在子主題上測試你的自定義CSS。這樣，您就可以隨心所欲地進行實驗。

解決常見的WordPress自定義CSS問題

有時，在向WordPress添加自定義CSS時，您可能會遇到一些小問題。讓我們快速概述一些最常見的問題，看看我們如何解決它們。

更改CSS不起效

由于緩存，WordPress自定義CSS可能無法顯示。

如果您使用任何緩存插件，則很有可能會緩存一些資源并從臨時存儲中交付，以提高速度并降低資源使用率。只需清除您的WordPress緩存，或暫時禁用此類插件。

確保事先清除瀏覽器緩存以查看您應用的新更改——尤其是在啟用緩存的情況下。

最后但并非最不重要的一點是，一些網絡托管服務提供商，提供服務器端內置緩存，以幫助您的WordPress網站更好地運行。您可以從服務器提供的緩存管理器禁用它。

CSS語法拼寫錯誤

拼寫錯誤很容易被忽視，并且經常會阻止WordPress自定義CSS正確顯示。如果您沒有看到任何更改出現并且您確定它沒有緩存，那么使用CSS驗證器會非常有用。只需粘貼您的CSS并運行該工具。它會顯示任何錯誤或拼寫錯誤，甚至指出哪一行有它們。

CSS寫法沖突

有時使用WordPress自定義CSS可能會有些過火。通過向選擇器添加兩個或多個引用，可能會導致沖突。

在現有樣式表之上調用新樣式表時，這種情況很常見。如果您嘗試更改H2標題但沒有發生任何事情，請仔細檢查樣式表中的現有條目。

想改但無處下牙

雖然這不是一個真正的問題，但很多時候最困難的部分是弄清楚你想在WordPress中應用什么自定義CSS。這可能會引起巨大的頭痛，因為您必須考慮很多元素。

這里有一些資源可以幫助你產生一些新的想法：

• 終極CSS備忘單
• BitDegree的CSS基礎知識
• Codeademy的CSS教程
• W3Schools的CSS教程

小結

CSS允許您設置網站內容的樣式。因此，將自定義CSS添加到WordPress是讓您的網站獨一無二且更引人注目的好方法。

有四種方法可以做到這一點：

• 使用塊編輯器
• 使用插件
• 使用主題定制器
• 通過子主題對其進行調整