wordpress中最新的完整站點(diǎn)編輯功能提供為您的站點(diǎn)創(chuàng)建自定義頁面模板。但是，使用在編輯器中創(chuàng)建內(nèi)容并單獨(dú)添加小工具和菜單的傳統(tǒng)方式更方便發(fā)布文章。

通常，您的主題為布局中的所有元素（包括小工具）提供樣式。但是，您可以輕松地將自定義樣式添加到小工具，以使它們對(duì)您的讀者有吸引力。

WordPress中的小工具樣式

據(jù)我們檢查，許多wordpress主題不提供自定義側(cè)邊欄中每個(gè)小工具的選項(xiàng)。特別是，像Kadence、GeneratePress、Astra等輕量級(jí)主題提供了簡(jiǎn)單的側(cè)邊欄小工具，重點(diǎn)是最少使用。幸運(yùn)的是，在Gutenberg小工具區(qū)塊編輯器的幫助下，使用其他樣式自定義小工具很容易。如果您仍在使用舊的Classic Widgets界面，那么您需要在應(yīng)用自定義樣式之前進(jìn)行一些分析。

最新文章小工具示例

讓我們舉個(gè)例子來解釋一下Kadence主題的概念。轉(zhuǎn)到“外觀>小工具”并在側(cè)邊欄區(qū)域添加“最新文章”區(qū)塊。由于最新文章小工具沒有任何標(biāo)題，因此您需要添加標(biāo)題區(qū)塊并將小工具命名為“最新文章”。下面是在側(cè)邊欄中帶有標(biāo)題區(qū)塊的最新文章小工具在Kadence主題上的外觀。

側(cè)邊欄中的最新文章小工具

如您所見，小工具顯示為沒有任何背景顏色和邊框的無序列表。盡管Kadence提供了更改整個(gè)側(cè)邊欄顏色和排版的選項(xiàng)，但無法從主題設(shè)置中為單個(gè)小工具添加樣式。

自定義側(cè)邊欄設(shè)計(jì)設(shè)置

現(xiàn)在，我們將解釋如何將您自己的自定義CSS樣式添加到最新文章小工具。

使用區(qū)塊設(shè)置添加自定義樣式

一些基于文本的區(qū)塊，如古騰堡的最新文章，帶有默認(rèn)顏色選項(xiàng)。

• 首先選擇標(biāo)題和最新文章區(qū)塊，您可以通過按住shift鍵并選擇區(qū)塊來執(zhí)行此操作。
• 您將看到一個(gè)彈出工具欄，然后單擊“更改類型…”。圖標(biāo)在工具欄中顯示為兩個(gè)方塊。
• 選擇“分組”選項(xiàng)將您的標(biāo)題和最新文章區(qū)塊分組為單個(gè)區(qū)塊小工具。

組小工具區(qū)塊

• 現(xiàn)在單擊顯示在右上角附近的齒輪圖標(biāo)以查看區(qū)塊設(shè)置。
• 您將看到許多用于自定義區(qū)塊布局的選項(xiàng)。

側(cè)邊欄中的小工具區(qū)塊設(shè)置

• 單擊“顏色”部分下的“背景”選項(xiàng)，并為您的小工具應(yīng)用背景顏色。您可以根據(jù)需要應(yīng)用純色或漸變色。
• 如果需要，更改字體大小并為您的小工具添加填充。通過單擊“取消鏈接邊”圖標(biāo)，可以為所有四個(gè)邊應(yīng)用單獨(dú)的填充。

添加背景顏色、填充和更改字體大小

• 單擊“更新”按鈕發(fā)布您的小工具并查看其中一篇博客文章以查看樣式化小工具的運(yùn)行情況。

具有自定義樣式的最新文章小工具

將自定義CSS類添加到小工具區(qū)塊

雖然上述方法非常簡(jiǎn)單，但并非所有區(qū)塊都提供背景顏色選項(xiàng)。此外，您可能希望為邊框和邊框半徑添加樣式，這些樣式在可用的有限選項(xiàng)中是不可能的。您可以通過向區(qū)塊中添加自定義CSS類來處理這種情況。

• 您可以對(duì)單個(gè)區(qū)塊執(zhí)行此操作，也可以對(duì)應(yīng)用自定義樣式所需的區(qū)塊進(jìn)行分組。
• 在側(cè)邊欄區(qū)塊設(shè)置上，單擊“高級(jí)”部分。
• 在“Additional CSS class(es)”文本框下添加您的CSS類名稱。例如，在我們的案例中，我們將添加類名作為latestposts。
• 單擊“更新”按鈕以發(fā)布您在小工具區(qū)域中所做的更改。

為小工具區(qū)塊添加額外的CSS類

• 現(xiàn)在，您可以在latestposts類中添加任何自定義CSS樣式來美化您的小工具。
• 讓我們添加以下CSS樣式，以將背景顏色、填充、邊框和邊框半徑添加到最新的文章小工具。

.latestposts {
background: rgb(20 224 20);
padding: 25px;
border: 3px solid rgb(211 211 211);
border-radius: 8px;
}

• 您需要在“外觀 > 自定義 > 附加CSS”部分下添加此代碼，如下所示。確保在添加自定義CSS后發(fā)布網(wǎng)站。

小工具的自定義CSS

現(xiàn)在查看您網(wǎng)站的頁面，您將看到側(cè)欄中的最新文章小工具將出現(xiàn)在您的所有自定義樣式中。您可以使用此方法添加任何自定義樣式，并確保使用不同的顏色來匹配您網(wǎng)站的布局。

具有自定義CSS樣式的小工具

注意：確保為分組區(qū)塊選擇“Group”選項(xiàng)，而不是“Widget Group”選項(xiàng)。雖然您可以將自定義CSS類添加到小工具組，但它似乎并不像我們測(cè)試的那樣工作。此外，像圖像這樣的一些區(qū)塊提供“樣式”設(shè)置來應(yīng)用圓角或方角，而無需添加額外的CSS類。

將圖像更改為圓形樣式

在經(jīng)典編輯器中為小工具添加樣式

不幸的是，如果您使用的是經(jīng)典小工具編輯器屏幕，您沒有任何用于添加自定義樣式的設(shè)置。您需要分析源代碼以找到CSS并在定制器中添加樣式。

• 轉(zhuǎn)到“外觀>小工具”部分，添加“最近的文章”小工具。提供標(biāo)題為“最新文章”，然后單擊“保存”按鈕。我們將在這里解釋“最近的文章”小工具，這是經(jīng)典小工具編輯器屏幕上可用的小工具。

經(jīng)典編輯器中的最近文章小工具

• 已發(fā)布站點(diǎn)上的外觀與使用古騰堡區(qū)塊完全一樣。
• 右鍵單擊小工具標(biāo)題并選擇“檢查”選項(xiàng)（這是使用Google Chrome瀏覽器，該選項(xiàng)在某些瀏覽器中可能顯示為“檢查元素”）。

檢查小工具元素

• 這將在瀏覽器中打開開發(fā)者控制臺(tái)，顯示鏈接到所選小工具標(biāo)題的CSS類。由于我們必須自定義包括標(biāo)題和列表內(nèi)容的整個(gè)小工具，將鼠標(biāo)懸停在控制臺(tái)中的元素上并為小工具找到正確的CSS類。在此示例中，您可以看到一個(gè)
  的id為”recent-posts-2″，類為”widget widget_recent_entries”。

查找小工具的CSS類

• 類小工具用于所有側(cè)邊欄小工具，因此您可以使用id為”recent-posts-2″ 或”widget_recent_entries”類來添加自定義樣式。
• 讓我們使用上面示例中使用的相同CSS樣式。因此，在“外觀 > 自定義 > 附加CSS”部分下添加代碼。確保在使用id時(shí)使用 #，在使用class時(shí)使用點(diǎn)。但是只添加一個(gè)代碼而不是兩者，因?yàn)閕d和class都附加到相同的。

#recent-posts-2 {
background: rgb(20 224 20);
padding: 25px;
border: 3px solid rgb(211 211 211);
border-radius: 8px;
}

.widget_recent_entries {
background: rgb(20 224 20);
padding: 25px;
border: 3px solid rgb(211 211 211);
border-radius: 8px;
}

• 它在帶有CSS .widget_recent_entries類的定制器中如下所示。

經(jīng)典小工具的自定義樣式

• 發(fā)布的文章將顯示最近發(fā)布的帶有自定義樣式的小工具，如下所示，您可以在開發(fā)者控制臺(tái)中看到您添加的自定義樣式。

在源代碼中查看自定義樣式

請(qǐng)記住，您的CSS類可能不同，您必須找到正確的CSS的id或類。如果您在側(cè)邊欄中重新排列小工具的順序，請(qǐng)確保重新檢查CSS類并在需要時(shí)以自定義樣式更改它。

使用插件添加自定義小工具樣式

最后一個(gè)選項(xiàng)是使用插件來設(shè)置小工具的樣式。如果您使用的是經(jīng)典小工具編輯器，請(qǐng)嘗試使用Widget Options插件。這將為每個(gè)小工具添加自定義選項(xiàng)，如下圖所示。單擊齒輪圖標(biāo)并添加您的自定義CSS類或ID。之后，您可以在定制器部分添加您的樣式，如上所述。

使用小工具選項(xiàng)插件添加自定義CSS類

由于默認(rèn)情況下相同的過程適用于Gutenberg區(qū)塊編輯器，因此您不需要額外的插件。事實(shí)上，Widget Options插件也僅在您從插件的設(shè)置頁面禁用Gutenberg小工具區(qū)塊編輯器時(shí)才起作用。

小結(jié)

Gutenberg小工具塊編輯器是向WordPress站點(diǎn)中的小工具添加自定義樣式的最佳選擇。您可以根據(jù)需要使用默認(rèn)塊設(shè)置或?qū)⒆远xCSS類添加到每個(gè)小工具區(qū)塊。與經(jīng)典編輯器的唯一區(qū)別是您需要手動(dòng)查找要添加自定義樣式的小工具的CSS類。在這兩個(gè)編輯器中，您的CSS樣式應(yīng)該進(jìn)入自定義器部分，如上所述。當(dāng)您想要添加其他樣式時(shí)，只需轉(zhuǎn)到“其他CSS”部分并將您的代碼附加到現(xiàn)有樣式?；蛘?，您可以使用插件為小工具添加自定義樣式。