WordPress中最新的完整站點編輯功能提供為您的站點建立自定義頁面模板。但是，使用在編輯器中建立內容並單獨新增小工具和選單的傳統方式更方便釋出文章。
通常，您的主題為佈局中的所有元素（包括小工具）提供樣式。但是，您可以輕鬆地將自定義樣式新增到小工具，以使它們對您的讀者有吸引力。
WordPress中的小工具樣式
據我們檢查，許多WordPress主題不提供自定義側邊欄中每個小工具的選項。特別是，像Kadence、GeneratePress、Astra等輕量級主題提供了簡單的側邊欄小工具，重點是最少使用。幸運的是，在Gutenberg小工具區塊編輯器的幫助下，使用其他樣式自定義小工具很容易。如果您仍在使用舊的Classic Widgets介面，那麼您需要在應用自定義樣式之前進行一些分析。
最新文章小工具示例
讓我們舉個例子來解釋一下Kadence主題的概念。轉到“外觀>小工具”並在側邊欄區域新增“最新文章”區塊。由於最新文章小工具沒有任何標題，因此您需要新增標題區塊並將小工具命名為“最新文章”。下面是在側邊欄中帶有標題區塊的最新文章小工具在Kadence主題上的外觀。
側邊欄中的最新文章小工具
如您所見，小工具顯示為沒有任何背景顏色和邊框的無序列表。儘管Kadence提供了更改整個側邊欄顏色和排版的選項，但無法從主題設定中為單個小工具新增樣式。
自定義側邊欄設計設定
現在，我們將解釋如何將您自己的自定義CSS樣式新增到最新文章小工具。
使用區塊設定新增自定義樣式
一些基於文字的區塊，如古騰堡的最新文章，帶有預設顏色選項。
- 首先選擇標題和最新文章區塊，您可以通過按住shift鍵並選擇區塊來執行此操作。
- 您將看到一個彈出工具欄，然後單擊“更改型別…”。圖示在工具欄中顯示為兩個方塊。
- 選擇“分組”選項將您的標題和最新文章區塊分組為單個區塊小工具。
組小工具區塊
- 現在單擊顯示在右上角附近的齒輪圖示以檢視區塊設定。
- 您將看到許多用於自定義區塊佈局的選項。
側邊欄中的小工具區塊設定
- 單擊“顏色”部分下的“背景”選項，併為您的小工具應用背景顏色。您可以根據需要應用純色或漸變色。
- 如果需要，更改字型大小併為您的小工具新增填充。通過單擊“取消連結邊”圖示，可以為所有四個邊應用單獨的填充。
新增背景顏色、填充和更改字型大小
- 單擊“更新”按鈕釋出您的小工具並檢視其中一篇部落格文章以檢視樣式化小工具的執行情況。
具有自定義樣式的最新文章小工具
將自定義CSS類新增到小工具區塊
雖然上述方法非常簡單，但並非所有區塊都提供背景顏色選項。此外，您可能希望為邊框和邊框半徑新增樣式，這些樣式在可用的有限選項中是不可能的。您可以通過向區塊中新增自定義CSS類來處理這種情況。
- 您可以對單個區塊執行此操作，也可以對應用自定義樣式所需的區塊進行分組。
- 在側邊欄區塊設定上，單擊“高階”部分。
- 在“Additional CSS class(es)”文字框下新增您的CSS類名稱。例如，在我們的案例中，我們將新增類名作為latestposts。
- 單擊“更新”按鈕以釋出您在小工具區域中所做的更改。
為小工具區塊新增額外的CSS類
- 現在，您可以在latestposts類中新增任何自定義CSS樣式來美化您的小工具。
- 讓我們新增以下CSS樣式，以將背景顏色、填充、邊框和邊框半徑新增到最新的文章小工具。
.latestposts {
background: rgb(20 224 20);
padding: 25px;
border: 3px solid rgb(211 211 211);
border-radius: 8px;
}
- 您需要在“外觀 > 自定義 > 附加CSS”部分下新增此程式碼，如下所示。確保在新增自定義CSS後釋出網站。
小工具的自定義CSS
現在檢視您網站的頁面，您將看到側欄中的最新文章小工具將出現在您的所有自定義樣式中。您可以使用此方法新增任何自定義樣式，並確保使用不同的顏色來匹配您網站的佈局。
具有自定義CSS樣式的小工具
注意：確保為分組區塊選擇“Group”選項，而不是“Widget Group”選項。雖然您可以將自定義CSS類新增到小工具組，但它似乎並不像我們測試的那樣工作。此外，像影象這樣的一些區塊提供“樣式”設定來應用圓角或方角，而無需新增額外的CSS類。
將影象更改為圓形樣式
在經典編輯器中為小工具新增樣式
不幸的是，如果您使用的是經典小工具編輯器螢幕，您沒有任何用於新增自定義樣式的設定。您需要分析原始碼以找到CSS並在定製器中新增樣式。
- 轉到“外觀>小工具”部分，新增“最近的文章”小工具。提供標題為“最新文章”，然後單擊“儲存”按鈕。我們將在這裡解釋“最近的文章”小工具，這是經典小工具編輯器螢幕上可用的小工具。
經典編輯器中的最近文章小工具
- 已釋出站點上的外觀與使用古騰堡區塊完全一樣。
- 右鍵單擊小工具標題並選擇“檢查”選項（這是使用Google Chrome瀏覽器，該選項在某些瀏覽器中可能顯示為“檢查元素”）。
檢查小工具元素
- 這將在瀏覽器中開啟開發者控制檯，顯示連結到所選小工具標題的CSS類。由於我們必須自定義包括標題和列表內容的整個小工具，將滑鼠懸停在控制檯中的元素上併為小工具找到正確的CSS類。在此示例中，您可以看到一個<section>的id為”recent-posts-2″，類為”widget widget_recent_entries”。
查詢小工具的CSS類
- 類小工具用於所有側邊欄小工具，因此您可以使用id為”recent-posts-2″ 或”widget_recent_entries”類來新增自定義樣式。
- 讓我們使用上面示例中使用的相同CSS樣式。因此，在“外觀 > 自定義 > 附加CSS”部分下新增程式碼。確保在使用id時使用 #，在使用class時使用點。但是隻新增一個程式碼而不是兩者，因為id和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類的定製器中如下所示。
經典小工具的自定義樣式
- 釋出的文章將顯示最近釋出的帶有自定義樣式的小工具，如下所示，您可以在開發者控制檯中看到您新增的自定義樣式。
在原始碼中檢視自定義樣式
請記住，您的CSS類可能不同，您必須找到正確的CSS的id或類。如果您在側邊欄中重新排列小工具的順序，請確保重新檢查CSS類並在需要時以自定義樣式更改它。
使用外掛新增自定義小工具樣式
最後一個選項是使用外掛來設定小工具的樣式。如果您使用的是經典小工具編輯器，請嘗試使用Widget Options外掛。這將為每個小工具新增自定義選項，如下圖所示。單擊齒輪圖示並新增您的自定義CSS類或ID。之後，您可以在定製器部分新增您的樣式，如上所述。
使用小工具選項外掛新增自定義CSS類
由於預設情況下相同的過程適用於Gutenberg區塊編輯器，因此您不需要額外的外掛。事實上，Widget Options外掛也僅在您從外掛的設定頁面禁用Gutenberg小工具區塊編輯器時才起作用。
小結
Gutenberg小工具塊編輯器是向WordPress站點中的小工具新增自定義樣式的最佳選擇。您可以根據需要使用預設塊設定或將自定義CSS類新增到每個小工具區塊。與經典編輯器的唯一區別是您需要手動查詢要新增自定義樣式的小工具的CSS類。在這兩個編輯器中，您的CSS樣式應該進入自定義器部分，如上所述。當您想要新增其他樣式時，只需轉到“其他CSS”部分並將您的程式碼附加到現有樣式。或者，您可以使用外掛為小工具新增自定義樣式。
評論留言