WPressize Me 自動生成的 CSS 速查表
您是否在尋找一個 WordPress 自動生成的 CSS 速查表？在大多數佈景主題中，WordPress 會自動為不同的元素添加一些 CSS 類別。這些默認的 CSS 類別可以用於在 WordPress 主題中設計這些元素。
在本文中，我們將向您展示 WordPress 自動生成的 CSS 速查表，並討論如何輕鬆找到 CSS 類別以及如何在需要時添加自訂 CSS 類別。
為什麼要學習 WordPress 自動生成的 CSS？
WordPress 會自動生成並添加默認的 CSS 類別到您網站上的不同元素。然後， WordPress 主題開發人員可以使用這些 CSS 類別為所有 WordPress 站點的常見區域進行設計。這些區域包括內容區域、側邊欄、小工具、導航菜單等。
了解這些 CSS 類別非常有用，無論您是學習 WordPress 主題開發還是僅僅嘗試為您自己網站創建子主題。如果您不希望學習 CSS 來修改主題樣式或創建自訂主題，可以使用例如 SeedProd 這樣的拖放建站器。
默認的 Body 類別樣式
HTML 中的 body 標籤包含任何網頁的整體佈局結構，在任何 WordPress 主題設計中都非常重要。WordPress 向 body 區域添加了幾個 CSS 類別，主題設計師可以使用這些類別來設計 body 容器。
// 當網站使用從右到左的語言時添加，例如阿拉伯語、希伯來語
.rtl {}
// 當顯示首頁時添加
.home {}
// 當顯示博客頁面時添加
.blog {}
…
// 當顯示封閉搜索頁面時添加，包含頁碼。
.search-paged-(page number) {}
默認的文章樣式類別
就像 body 元素一樣，WordPress 也會為文章元素添加動態類別。此元素通常是主題模板中的
// 為單篇文章添加帶 ID 的類別
.post-(ID) {}
。…
.tag-(slug) {}
默認的導航菜單類別
WordPress 還會為導航菜單添加 CSS 類別。以下是默認情況下添加到導航菜單的類別。
// 當前頁面類別
.current_page_item {}
…
.menu-item-home {}
默認的 WordPress 小工具類別
小工具是用來在 WordPress 主題中顯示非內容區塊的簡便方法。它們通常顯示在專用的小工具區域或側邊欄中。WordPress 向傳統小工具添加了以下類別。
.widget {}
…
.textwidget .p {}
默認的評論表單類別
評論是許多 WordPress 網站上的交互中心。設計它們可以讓用戶獲得更乾淨、更具吸引力的體驗。WordPress 添加了以下默認的 CSS 類別來幫助主題開發人員設計評論區域。
/*評論輸出*/
.commentlist .reply {}
…
.form-submit
找到 WordPress 塊類別
WordPress 塊編輯器會動態生成塊的 CSS 類別。要找到這些 CSS 類別，您需要將該特定塊添加到帖文或頁面中。然後，單擊預覽按鈕以查看塊的效果。
在預覽標籤中，將鼠標移至剛添加的塊並右鍵單擊以選擇檢查工具。
在開發者控制台中，您將看到由該塊生成的 HTML。在這裡，您可以看到塊添加的 CSS 類別。您可以使用這些 CSS 類別在您的 WordPress 主題中設計畫廊塊。
在 WordPress 中添加自訂的 CSS 類別
默認的 WordPress CSS 類別非常全面。然而，其主要目的是為主題開發人員提供統一的框架。對於您的個人網站，您可能需要為一些無法找到默認 CSS 類別來定向的區域添加自訂 CSS。
同樣，有時您可能只希望在特定帖子或頁面上做出小的更改，而不應用於整個主題。幸運的是，WordPress 提供了幾種簡便的方法來在不同區域添加 CSS 類別。
在塊編輯器中向塊添加自訂的 CSS 類別
如果您希望快速向特定文章或頁面添加自訂 CSS 類別，最簡單的方法是使用塊編輯器。只需編輯文章或頁面，然後選擇您要添加自訂 CSS 類別的塊。在塊設置下，點擊“高級”面板並添加您的 CSS 類別名稱。
別忘了點擊“更新”按鈕來保存您的更改。
您現在可以使用此類別來添加自訂的 CSS 代碼，該代碼將僅影響此特定塊在此特定文章或頁面中。
在 WordPress 導航菜單中
您還可以將自訂 CSS 添加到 WordPress 導航菜單項中。假設您希望將一個菜單項目轉換為按鈕，那麼此方法非常方便。
只需轉到“外觀 » 菜單”頁面，並點擊屏幕右上角的“顯示選項”按鈕。
從這裡，您需要勾選“CSS 類別”選項旁邊的框。
接下來，向下滾動並點擊以展開您希望添加自訂 CSS 類別的菜單項目。您會注意到一個標記為“CSS 類別”的字段。繼續並在此處添加您的自訂 CSS 類別。
別忘了點擊“保存菜單”按鈕來存儲您的更改。
您現在可以使用此自訂 CSS 類別來不同地設計該特定菜單項目。
額外: 輕鬆設計 WordPress 主題而無需編寫 CSS 代碼
學習使用自訂 CSS 為您的 WordPress 主題進行設計是一項非常有用的技能。然而，某些用戶可能只想要一個不需要編寫任何 CSS 代碼的解決方案來設計他們的 WordPress 主題。
為此，您需要 SeedProd。它是市場上最好的 WordPress 頁面構建工具，允許您輕鬆創建自訂主題而不需要編寫任何代碼。
SeedProd 附帶隨時可用的主題，您可以用作起點。您還可以通過手動創建模板從頭開始創建主題。
然後，您可以使用直觀的拖放站點構建介面編輯您的自訂主題。只需將塊放到您的設計中即可創建自己的佈局。
您還可以通過簡單的點擊輕鬆更改任何項目。您可以使用自己顏色、背景、字體等。
更多詳情，請參閱我們的逐步教程，了解如何輕鬆創建無需編寫任何代碼的自訂 WordPress 主題。
我們希望這篇文章能幫助您找到默認的 WordPress 自動生成的 CSS 速查表。您可能還想參閱我們的指南來修復最常見的 WordPress 錯誤或查看我們的專家比較最佳的小型企業即時聊天軟體選擇。
如果您喜歡這篇文章，請訂閱我們的 YouTube 頻道以獲取 WordPress 視頻教程。您也可以在 Twitter 和 Facebook 上找到我們。
