您是一位有抱負(fù)的WordPress主題設(shè)計(jì)師嗎，正在尋找在主題中使用CSS的新方法？
幸運(yùn)的是，WordPress會(huì)自動(dòng)添加您可以在主題中使用的CSS類。這些CSS類中的幾個(gè)會(huì)自動(dòng)添加到WordPress網(wǎng)站上每個(gè)頁面的<body>部分。
什么是WordPress Body類？
Body類（body_class）是WordPress函數(shù)，可讓您將CSS類分配給body元素。
HTML正文標(biāo)簽通常從主題的header.php文件開始，該文件會(huì)加載到每個(gè)頁面上。這使您可以動(dòng)態(tài)地找出用戶正在查看的頁面，然后相應(yīng)地添加CSS類。
通常，大多數(shù)入門主題和框架已經(jīng)在HTML body標(biāo)簽內(nèi)包含了body類功能。如果沒有，可以通過修改body標(biāo)簽來添加，如下所示：
<body <?php body_class($class); ?>>WordPress根據(jù)顯示的頁面類型自動(dòng)添加適當(dāng)?shù)念悺?/p>
例如，如果您在存檔頁面上，WordPress將自動(dòng)將存檔類添加到body元素。它幾乎針對每個(gè)頁面都執(zhí)行此操作。
以下是WordPress可能添加的一些常見類示例，具體取決于顯示的頁面：
.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) {}如您所見，通過擁有如此強(qiáng)大的資源，您可以僅使用CSS來完全自定義WordPress頁面。您可以自定義特定的作者個(gè)人資料頁面，基于日期的檔案等。
現(xiàn)在讓我們看一下如何以及何時(shí)使用body類。
何時(shí)使用WordPress body類
首先，您需要確保主題的body元素包含如上所示的body類函數(shù)。如果確實(shí)如此，那么它將自動(dòng)包括上述所有WordPress生成的CSS類。
之后，您還可以將自己的自定義CSS類添加到body元素。您可以在需要時(shí)添加這些類。
例如，如果要更改特定類別下的特定作者的文章外觀。
如何添加自定義body類
WordPress有一個(gè)過濾器，您可以在需要時(shí)使用它來添加自定義body類。在向您展示特定用例場景之前，我們將向您展示如何使用過濾器添加body類，以便每個(gè)人都可以在同一頁面上。
由于body類是特定于主題的，因此您需要將以下代碼添加到主題的functions.php文件中。
function my_class_names($classes) {
// add 'class-name' to the $classes array
$classes[] = 'wpb-class';
// return the $classes array
return $classes;
}
//Now add test class to the filter
add_filter('body_class','my_class_names');上面的代碼會(huì)將“ wpb-class”類添加到網(wǎng)站每個(gè)頁面上的body標(biāo)簽中。
現(xiàn)在，您可以直接在主題樣式表中使用此CSS類。如果您在自己的網(wǎng)站上工作，則還可以使用主題定制器中的自定義CSS功能添加CSS?。
使用WordPress插件添加Body類
如果您不在客戶項(xiàng)目上并且不想編寫代碼，那么此方法對您來說會(huì)更容易。
您需要做的第一件事是安裝并激活Custom Body Class插件。
激活后，您需要訪問“設(shè)置?Custom Body Class”頁面。在這里，您可以配置插件設(shè)置。
您可以選擇要啟用body分類功能的文章類型以及誰可以訪問它。不要忘記單擊“保存更改”按鈕來存儲(chǔ)您的設(shè)置。
接下來，您可以直接編輯WordPress網(wǎng)站上的任何文章或頁面。在文章編輯屏幕上，您會(huì)在右側(cè)列中找到一個(gè)名為“文章類（Post Classes）”的新元框。
單擊以添加您的自定義CSS類。您可以添加多個(gè)由空格分隔的類。
完成后，您只需保存或發(fā)布您的文章即可。現(xiàn)在，該插件會(huì)將您的自定義CSS類添加到該特定文章或頁面的body類。
在Body類上使用條件標(biāo)簽
當(dāng)body_class函數(shù)與條件標(biāo)簽一起使用時(shí)，它才真正發(fā)揮作用。
這些條件標(biāo)簽是true或false數(shù)據(jù)類型，用于檢查WordPress中的條件是true還是false。例如，條件標(biāo)簽is_home檢查當(dāng)前顯示的頁面是否為主頁。
這允許主題開發(fā)人員在將自定義CSS類添加到body_class函數(shù)之前檢查條件是否為true或false。
讓我們看一些使用條件標(biāo)簽將自定義類添加到body類的示例。
假設(shè)您要為具有作者用戶角色的登錄用戶設(shè)置不同的首頁樣式。WordPress自動(dòng)生成.home 和 .logged-in 類時(shí)，它不會(huì)檢測用戶角色或?qū)⑵涮砑訛轭悺?/p>
現(xiàn)在，在這種情況下，您可以將條件標(biāo)記與一些自定義代碼一起使用，以將自定義類動(dòng)態(tài)添加到body類。
為此，您需要將以下代碼添加到主題的functions.php文件中。
function wpb_loggedin_user_role_class($classes) {
// 檢查是否為首頁
if ( is_home() ) {
// 檢查當(dāng)前登錄的用戶角色是否為作者 author
$user = wp_get_current_user();
if ( in_array( 'author', (array) $user->roles ) ) {
//如果是作者角色，添加 author 類
$classes[] = 'author';
// 返回類的數(shù)組
return $classes;
}
} else {
// 如果不是首頁，返回類的數(shù)組
return $classes;
}
}
add_filter('body_class', 'wpb_loggedin_user_role_class');現(xiàn)在，讓我們看另一個(gè)有用的例子。這次，我們將檢查顯示的頁面是否為WordPress草稿的預(yù)覽。
為此，我們將使用條件標(biāo)簽is_preview，然后添加我們的自定義CSS類。
function add_preview_class($classes) {
if ( is_preview() ) {
$classes[] = 'preview-mode';
return $classes;
}
return $classes;
}
add_filter('body_class','add_preview_class');然后，我們將以下CSS添加到主題的樣式表中，以利用我們剛剛添加的新的自定義CSS類。
.preview-mode .site-header:before {
content:'preview mode';
color:#FFF;
background-color:#ff0000;
}這是在我們的演示站點(diǎn)上的樣子：
您可能需要查看可在WordPress中使用的條件標(biāo)簽的完整列表。這將為您的代碼提供一組方便使用的標(biāo)簽。還可以閱讀我們之前的文章《WordPress條件標(biāo)簽（Conditional Tags）》
動(dòng)態(tài)添加自定義body類的其他示例
除了條件標(biāo)簽外，您還可以使用其他技術(shù)從WordPress數(shù)據(jù)庫中獲取信息并為body類創(chuàng)建自定義CSS類。
將分類名稱添加到單個(gè)文章頁面的body類中
假設(shè)您要根據(jù)單個(gè)文章的分類來自定義它們的外觀。您可以使用body類來實(shí)現(xiàn)此目的
首先，您需要在單個(gè)文章頁面上將分類名稱添加為CSS類。為此，將以下代碼添加到主題的functions.php文件中：
// add category nicenames in 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類中為單個(gè)文章頁面添加分別類。然后，您可以根據(jù)需要使用CSS類對其進(jìn)行樣式設(shè)置。
將頁面別名添加到body類
將以下代碼粘貼到主題的functions.php文件中，可以將頁面的slug別名添加到body類：
//Page 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' );添加瀏覽器標(biāo)記到body類
有時(shí)，您可能會(huì)遇到一些問題，其中主題可能需要特定瀏覽器的其他CSS。好在WordPress在加載時(shí)自動(dòng)檢測到瀏覽器，然后將這些信息臨時(shí)存儲(chǔ)為全局變量。您只需要檢查WordPress是否檢測到特定的瀏覽器，然后將其添加為自定義CSS類即可。
只需將以下代碼復(fù)制并粘貼到主題的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 { }如果是一個(gè)很小的內(nèi)邊距（padding）或邊距問題，那么這是修復(fù)它的一種很簡單的方法。
肯定還有更多方案可以使用body_class函數(shù)來避免編寫冗長的代碼行。例如，如果您使用諸如Genesis之類的主題框架，則可以使用它在子主題中添加自定義類。
您可以使用body_class函數(shù)為全寬頁面布局、側(cè)邊欄內(nèi)容、頁眉和頁腳等添加CSS類。
希望本文能幫助您學(xué)習(xí)如何在主題中使用WordPress body類，如果對于這篇文章有什么疑問，可以在下面留言討論。
注：本文內(nèi)容來自 WPBeginner，由 WordPress大學(xué) 翻譯整理。
繼續(xù)閱讀：WordPress添加自定義CSS類名到body標(biāo)簽
