什麼是 WordPress Body Class？
Body Class（body_class）是 WordPress 的一個函數，允許您為 body 元素分配 CSS 類別。HTML body 標籤通常在主題的 header.php 文件中開始，每個頁面都會加載它。這使您能夠動態地確定用戶正在查看哪些頁面，然後根據需要添加 CSS 類別。
通常，大多數啟動主題和框架已經在 HTML body 標籤內包含 body class 函數。但是，如果您的主題沒有，您可以通過如下修改 body 標籤來添加它：
<body <?php body_class($class); ?>>根據顯示的頁面類型，WordPress 會自動添加相應的類別。例如，如果您在存檔頁面上，WordPress會自動添加 archive 類到 body 元素。這幾乎適用於每個頁面。以下是一些根據顯示頁面所添加的常見類別示例：
.rtl {}
.home {}
.blog {}
.archive {}
.date {}
.search {}
.paged {}
.attachment {}
.error404 {}
.single postid-(id) {}
.attachmentid-(id) {}
.attachment-(mime-type) {}
.author {}
.author-(user_nicename) {}
.category {}
.category-(slug) {}
.tag {}
.tag-(slug) {}
.page-parent {}
.page-child parent-pageid-(id) {}
.page-template page-template-(template file name) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(page number) {}
.single-paged-(page number) {}
.page-paged-(page number) {}
.category-paged-(page number) {}
.tag-paged-(page number) {}
.date-paged-(page number) {}
.author-paged-(page number) {}
.search-paged-(page number) {}如您所見，擁有這樣一個強大的資源，您可以僅通過使用CSS來完全自定義您的WordPress頁面。您可以自定義特定的作者簡介頁面、基於日期的存檔頁面等。
何時使用WordPress Body Class
首先，您需要確保您的主題的body元素包含如上所述的body class函數。如果它包含，那麼它將自動包括所有上述的WordPress生成的CSS類別。
之後，您還將能夠添加您自己的自定義CSS類別到body元素中。您可以在需要的時候添加這些類別。例如，如果您希望更改特定作者的文章在特定分類下的顯示。
如何添加自定義Body Class
WordPress有一個過濾器，您可以使用它在需要時添加自定義body class。在展示具體的使用案例之前，我們將展示如何使用過濾器添加body class，這樣每個人都可以在同一頁面上。
function my_class_names($classes) {
// 將 'class-name' 添加到 $classes 陣列
$classes[] = 'wpb-class';
// 返回 $classes 陣列
return $classes;
}
//現在將測試類添加到過濾器中
add_filter('body_class','my_class_names');上面的代碼將在網站的每個頁面上添加一個類 “wpb-class” 到 body 標籤中。
我們推薦使用 WPCode 插件來添加這段代碼，這是市場上最好的代碼片段插件。它使在WordPress中添加自定義代碼變得安全且容易，無需編輯主題的functions.php文件。首先，您需要安裝並激活免費的WPCode插件。如果需要說明，請參見我們關於如何安裝WordPress插件的指南。
插件激活後，從WordPress儀表板轉到 Code Snippets » Add Snippet。然後，找到 ‘Add Your Custom Code (New Snippet)’ 選項，點擊其下的 ‘Use snippet’ 按鈕。
接下來，為您的片段添加標題，然後將上面的代碼粘貼到 ‘Code Preview’ 框中。您還需要從右側的下拉菜單中選擇 ‘PHP Snippet’ 作為代碼類型。
之後，將開關從 ‘Inactive’ 切換到 ‘Active’，並點擊 ‘Save Snippet’ 按鈕。
使用WordPress插件添加Body Class
如果您不是在進行客戶項目，並且不想編寫代碼，那麼這種方法會更容易一些。首先，您需要安裝並激活 Custom Body Class 插件。詳情參見我們的逐步指南—如何安裝WordPress插件。激活後，您需要訪問 Settings » Custom Body Class 頁面。在這裡您可以配置插件設置。
您可以選擇希望啟用body class功能的文章類型，以及誰可以訪問它。不要忘記點擊 ‘Save Changes’ 按鈕來保存您的設置。接下來，您可以前往編輯WordPress網站上的任何帖子或頁面。在帖子編輯屏幕上，您會在右側欄找到一個新元框標籤為 ‘Post Classes’。
點擊添加您的自定義CSS類別。您可以用空格分隔來添加多個類別。完成後，您可以簡單地保存或發布您的帖子。插件現在將為特定的帖子或頁面添加您的自定義CSS類別到body class。
使用條件標籤與Body Class
body_class函數的真正威力在於它與條件標籤一起使用時。這些條件標籤是true或false數據類型，用於檢查某個條件在WordPress中是否為真。例如，條件標籤is_home檢查當前頁面是否為首頁。這允許主題開發人員在添加自定義CSS類到body_class函數之前，檢查某個條件是否為真。
讓我們看一些使用條件標籤來向body class添加自定義類別的示例。
舉個例子
假設您希望為具有作者用戶角色的登錄用戶以不同方式樣式化您的首頁。而WordPress自動生成了.home和.logged-in類別，但它不會檢測用戶角色或將其作為類別添加。這是您可以使用條件標籤和一些自定義代碼來動態添加自定義類別到body class的場景。以下是添加到主題的 functions.php 文件或代碼片段插件中的代碼：
function wpb_loggedin_user_role_class($classes) {
// 檢查是否為首頁
if ( is_home() ) {
// 現在檢查登錄用戶是否具有作者用戶角色。
$user = wp_get_current_user();
if ( in_array('author', (array) $user->roles)) {
//用戶具有“作者”角色
//將用戶角色添加到body class
$classes[] = 'author';
//返回類別數組
return $classes;
}} else {
//如果不是首頁，則只返回默認類別
return $classes;
}}
//添加過濾器
add_filter('body_class', 'wpb_loggedin_user_role_class');現在，我們來看另一個有用的例子。這次我們將檢查顯示的頁面是否為WordPress草稿的預覽。為此，我們將使用條件標籤 is_preview，然後添加我們的自定義CSS類別。
function add_preview_class($classes) {
if ( is_preview() ) {
$classes[] = 'preview-mode';
return $classes;
}}
add_filter('body_class','add_preview_class');現在，我們將以下CSS添加到我們主題的樣式表中，以利用我們剛剛添加的新的自定義CSS類別。
.preview-mode .site-header:before {
content:'preview mode';
color:#FFF;
background-color:#ff0000;
}這就是我們演示站中的效果。
你可能想看看完整的WordPress條件標籤清單。這將給您一套便於使用的標籤來編寫代碼。
動態添加自定義Body Class的其他示例
將分類名稱添加到單篇文章頁面的Body Class中
假設您希望根據文章所屬的分類自定義單篇文章的外觀。您可以使用body class來實現。首先，您需要在單篇文章頁面上添加分類名稱作為CSS類別。為此，請將以下代碼添加到主題的 functions.php 文件或代碼片段插件中：
//在body class中添加分類友好名稱
function category_id_class($classes) {
global $post;
foreach((get_the_category($post->ID)) as $category)
$classes[] = $category->category_nicename;
return $classes;
}
//添加過濾器
add_filter('body_class', 'category_id_class');以上代碼將在您的單篇文章頁面中的body class中添加分類類別。您可以根據需要使用CSS類別來樣式化它。
添加頁面Slug到Body Class
將以下代碼粘貼到您主題的 functions.php 文件或代碼片段插件中：
//頁面Slug Body Class
function add_slug_body_class( $classes ) {
global $post;
if ( isset( $post ) ) {
$classes[] = $post->post_type . '-' . $post->post_name;
} return $classes;
}
//添加過濾器
add_filter('body_class', 'add_slug_body_class');再次推薦使用WPCode代碼片段插件在WordPress中添加此代碼，這樣您就不必擔心破壞您的網站。首先，安裝並激活免費的WPCode插件。如果需要幫助，請參閱如何安裝WordPress插件的指南。激活後，從WordPress儀表板轉到 Code Snippets » Add Snippet，然後點擊 ‘Use snippet’ 按鈕，即可在 ‘Add Your Custom Code (New Snippet)’ 選項下。接下來，將上面的代碼粘貼到‘Code Preview’框中，並從下拉菜單中選擇‘PHP Snippet’ 作為代碼類型。最後，將開關從‘Inactive’切換到‘Active’，然後點擊‘Save Snippet’按鈕。
瀏覽器檢測與瀏覽器特定的Body Class
有時您可能會遇到主題需要為特定瀏覽器添加額外的CSS的問題。好消息是，WordPress會在加載時自動檢測瀏覽器，並將此信息臨時存儲為一個全局變量。您只需檢查WordPress是否檢測到特定的瀏覽器，然後將其作為自定義CSS類別添加。只需將以下代碼粘貼到主題的 functions.php 文件或代碼片段插件中：
function wpb_browser_body_class($classes) {
global $is_iphone, $is_chrome, $is_safari, $is_NS4, $is_opera, $is_macIE, $is_winIE, $is_gecko, $is_lynx, $is_IE, $is_edge;
if ($is_iphone) $classes[] = 'iphone-safari';
elseif ($is_chrome) $classes[] = 'google-chrome';
elseif ($is_safari) $classes[] = 'safari';
elseif ($is_NS4) $classes[] = 'netscape';
elseif ($is_opera) $classes[] = 'opera';
elseif ($is_macIE) $classes[] = 'mac-ie';
elseif ($is_winIE) $classes[] = 'windows-ie';
elseif ($is_gecko) $classes[] = 'firefox';
elseif ($is_lynx) $classes[] = 'lynx';
elseif ($is_IE) $classes[] = 'internet-explorer';
elseif ($is_edge) $classes[] = 'ms-edge';
else $classes[] = 'unknown';
return $classes;
}
//添加過濾器
add_filter('body_class','wpb_browser_body_class');您然後可以使用類別如：
.ms-edge .navigation {某些項目在這裡}如果是一個小的填充或邊距問題，那麼這是一個相當簡單的解決方法。
還有許多其他場景，使用body_class函數可以讓您免於編寫冗長的代碼。例如，如果您使用的是像Genesis這樣的主題框架，您可以在子主題中使用它來添加自定義類別。
您可以使用body_class函數為全寬頁面佈局、側邊欄內容、頁首和頁尾等添加CSS類別。
WordPress主題設計專家指南
尋找更多的教程嗎？查看我們關於 WordPress 主題設計的其他指南：如何將視差效果添加到任何 WordPress 主題，如何編輯 WordPress 的頁腳（四種方法），如何在您的 WordPress 博客中添加飄雪效果，如何在不丟失自定義設置的情況下更新WordPress主題，如何在WordPress中獲取網站設計反饋。
我們希望這篇文章能幫助您了解如何在主題中使用WordPress body class。您可能還會希望查看我們有關如何不同樣式化每個WordPress帖子，以及我們的最佳WordPress頁面構建器插件的比較。
如果您喜歡這篇文章，請訂閱我們的YouTube頻道以觀看WordPress視頻教程。您也可以在Twitter和Facebook上找到我們。
