您是否曾經想更改網站外觀的某些方面，但不知道怎麼做？有一個解決方案——您可以將自定義 CSS（層疊樣式表）新增到您的WordPress網站！
在本文中，我們將討論您需要了解的有關CSS的所有知識以及如何使用它來修改您網站的整體外觀。
- 什麼是CSS？
- 使用區塊編輯器新增自定義CSS類
- 通過外掛新增WordPress自定義CSS
- 使用Theme Customizer新增WordPress自定義CSS
- 使用子主題新增WordPress自定義CSS
- 解決常見的WordPress自定義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允許您設定網站內容的樣式。因此，將自定義CSS新增到WordPress是讓您的網站獨一無二且更引人注目的好方法。
有四種方法可以做到這一點：
- 使用塊編輯器
- 使用外掛
- 使用主題定製器
- 通過子主題對其進行調整
評論留言