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

在本文中，我們將討論您需要了解的有關(guān)CSS的所有知識(shí)以及如何使用它來修改您網(wǎng)站的整體外觀。

• 什么是CSS？
• 使用區(qū)塊編輯器添加自定義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語(yǔ)法拼寫錯(cuò)誤
  • CSS寫法沖突
  • 想改但無處下牙

什么是CSS？

CSS是一種樣式表語(yǔ)言，可以修改網(wǎng)站基本結(jié)構(gòu)的外觀，用HTML編寫。CSS允許您將不同的屬性（例如顏色、大小、布局和顯示）分配給HTML標(biāo)記。

您也可以定制某些wordpress主題的默認(rèn)外觀。因此，如果您想創(chuàng)建您想要的設(shè)計(jì)和外觀，您可以將自定義CSS添加到您的WordPress網(wǎng)站。

使用區(qū)塊編輯器添加自定義CSS類

WordPress 5.9更新為網(wǎng)站定制帶來了一些變化。其中之一是自定義CSS的實(shí)現(xiàn)。

新的全站點(diǎn)編輯方法依賴于全局樣式和基于每個(gè)塊的設(shè)計(jì)，從而減少了對(duì)CSS和大量編碼的需求。

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

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

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

頁(yè)。證明-類{ 文本對(duì)齊：對(duì)齊；}

完成后單擊更新文件。

現(xiàn)在通過導(dǎo)航到外觀->?Site Editor打開站點(diǎn)編輯器。單擊屏幕右上角的“設(shè)置”按鈕，選擇要自定義的區(qū)塊并打開其設(shè)置。

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

在添加justify-class類后，段落區(qū)塊中的文本將被對(duì)齊。

您可以將多個(gè)CSS類添加到一個(gè)區(qū)塊中，方法是用空格分隔它們。

通過插件添加WordPress自定義CSS

為WordPress實(shí)現(xiàn)自定義CSS的更簡(jiǎn)單方法之一是使用插件。有很多可供選擇，所以讓我們概述一下最受歡迎的，看看它們是如何工作的。我們?cè)诒局改现惺褂玫乃泄ぞ叨伎梢酝ㄟ^插件輕松安裝 -> WordPress儀表盤的添加新部分。

Simple Custom CSS

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

WP Add Custom CSS

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

SiteOrigin CSS

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

Simple Custom CSS and JS

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

使用Theme Customizer添加WordPress自定義CSS

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

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

另一種選擇是創(chuàng)建一個(gè)WordPress子主題——它允許您修改父主題，而不會(huì)破壞您的實(shí)時(shí)站點(diǎn)。

如果你還不確定你想做什么，你可以先在子主題上測(cè)試你的自定義CSS。這樣，您就可以隨心所欲地進(jìn)行實(shí)驗(yàn)。

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

有時(shí)，在向WordPress添加自定義CSS時(shí)，您可能會(huì)遇到一些小問題。讓我們快速概述一些最常見的問題，看看我們?nèi)绾谓鉀Q它們。

更改CSS不起效

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

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

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

最后但并非最不重要的一點(diǎn)是，一些網(wǎng)絡(luò)托管服務(wù)提供商，提供服務(wù)器端內(nèi)置緩存，以幫助您的WordPress網(wǎng)站更好地運(yùn)行。您可以從服務(wù)器提供的緩存管理器禁用它。

CSS語(yǔ)法拼寫錯(cuò)誤

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

CSS寫法沖突

有時(shí)使用WordPress自定義CSS可能會(huì)有些過火。通過向選擇器添加兩個(gè)或多個(gè)引用，可能會(huì)導(dǎo)致沖突。

在現(xiàn)有樣式表之上調(diào)用新樣式表時(shí)，這種情況很常見。如果您嘗試更改H2標(biāo)題但沒有發(fā)生任何事情，請(qǐng)仔細(xì)檢查樣式表中的現(xiàn)有條目。

想改但無處下牙

雖然這不是一個(gè)真正的問題，但很多時(shí)候最困難的部分是弄清楚你想在WordPress中應(yīng)用什么自定義CSS。這可能會(huì)引起巨大的頭痛，因?yàn)槟仨毧紤]很多元素。

這里有一些資源可以幫助你產(chǎn)生一些新的想法：

• 終極CSS備忘單
• BitDegree的CSS基礎(chǔ)知識(shí)
• Codeademy的CSS教程
• W3Schools的CSS教程

小結(jié)

CSS允許您設(shè)置網(wǎng)站內(nèi)容的樣式。因此，將自定義CSS添加到WordPress是讓您的網(wǎng)站獨(dú)一無二且更引人注目的好方法。

有四種方法可以做到這一點(diǎn)：

• 使用塊編輯器
• 使用插件
• 使用主題定制器
• 通過子主題對(duì)其進(jìn)行調(diào)整