在做WordPress主題開發(fā)的時候，可能需要根據(jù)某些條件對不同的頁面做一些樣式的區(qū)別，實現(xiàn)的方式有很多種，但是一般比較常用的是通過<body>標簽的不同類名來做區(qū)分。如果你還不明白我說的類名，那你可以看下下圖的高亮部分，沒錯，就是這里啦：
如上圖所示，WordPress默認會判斷當前頁面的一些屬性，添加了很多不同的CSS類名到<body>標簽。
如果我們要添加自定義的css類名到<body>標簽，又該如何？
WordPress內(nèi)置了一個鉤子可以過濾網(wǎng)站中<body>標簽的類名：body_class。我們可以通過判斷一些條件，添加自定義的Body類，比如：判斷用戶是否登錄，是手機端還是電腦端，使用的是Chrome瀏覽器還是其他瀏覽器……
根據(jù)用戶是否登錄添加不同的類名
注意：WordPress默認已經(jīng)添加了對用于是否登錄的類名，不需要我們自己再去添加，這里只是舉個例子。
add_filter( 'body_class', 'wpkj_add_body_class' );
function wpkj_add_body_class( $classes ) {
if ( !is_user_logged_in() ) { // 用戶沒有登錄
$classes[] = 'not-logged-in'; // 自定義類名
} else { // 用戶已登錄
$classes[] = 'logged-in'; // 自定義類名
}
return $classes;
}如果用戶是訂閱者角色，添加一個類名
add_filter( 'body_class', 'wpkj_add_body_class' );
function wpkj_add_body_class( $classes ) {
$user = wp_get_current_user();
if ( in_array( 'subscriber', $user->roles ) ) {
$classes[] = 'is_subscriber'; // 自定義類名
}
return $classes;
}通過上面兩個例子，我們應該比較明白如何添加類了吧。你所需要做的就是根據(jù)你的判斷條件去添加即可。
非常有用的類名大全
function wpkj_custom_body_class( $classes )
{
$include = array
(
// 設(shè)備/瀏覽器類 (https://codex.wordpress.org/Global_Variables)
'is-iphone' => $GLOBALS['is_iphone'],
'is-chrome' => $GLOBALS['is_chrome'],
'is-safari' => $GLOBALS['is_safari'],
'is-ns4' => $GLOBALS['is_NS4'],
'is-opera' => $GLOBALS['is_opera'],
'is-mac-ie' => $GLOBALS['is_macIE'],
'is-win-ie' => $GLOBALS['is_winIE'],
'is-gecko' => $GLOBALS['is_gecko'],
'is-lynx' => $GLOBALS['is_lynx'],
'is-ie' => $GLOBALS['is_IE'],
'is-edge' => $GLOBALS['is_edge'],
// WP Query (WordPress默認已包含下面的類名)
'is-archive' => is_archive(),
'is-post_type_archive' => is_post_type_archive(),
'is-attachment' => is_attachment(),
'is-author' => is_author(),
'is-category' => is_category(),
'is-tag' => is_tag(),
'is-tax' => is_tax(),
'is-date' => is_date(),
'is-day' => is_day(),
'is-feed' => is_feed(),
'is-comment-feed' => is_comment_feed(),
'is-front-page' => is_front_page(),
'is-home' => is_home(),
'is-privacy-policy' => is_privacy_policy(),
'is-month' => is_month(),
'is-page' => is_page(),
'is-paged' => is_paged(),
'is-preview' => is_preview(),
'is-robots' => is_robots(),
'is-search' => is_search(),
'is-single' => is_single(),
'is-singular' => is_singular(),
'is-time' => is_time(),
'is-trackback' => is_trackback(),
'is-year' => is_year(),
'is-404' => is_404(),
'is-embed' => is_embed(),
// 手機端
'is-mobile' => wp_is_mobile(),
'is-desktop' => ! wp_is_mobile(),
// Common
'has-blocks' => function_exists( 'has_blocks' ) && has_blocks(),
);
// 側(cè)邊欄
foreach ( $GLOBALS['wp_registered_sidebars'] as $sidebar )
{
$include[ "is-sidebar-{$sidebar['id']}" ] = is_active_sidebar( $sidebar['id'] );
}
// 添加類名
foreach ( $include as $class => $do_include )
{
if ( $do_include ) $classes[ $class ] = $class;
}
// 返回類名
return $classes;
}
add_filter( 'body_class', 'wpkj_custom_body_class' );刪除已經(jīng)包含的類名
既然我們可以通過 body_class 鉤子添加自定義類名，那我們當然也可以用它來刪除已經(jīng)包含的類名。
// 從 body_class 數(shù)組中刪除某個類名，將 class-to-remove 修改為你需要的類名即可
add_filter( 'body_class', 'wpkj_remove_body_class' );
function wpkj_remove_body_class( $classes ) {
if ( isset( $classes['class-to-remove'] ) ) {
unset( $classes['class-to-remove'] );
}
return $classes;
}好了，今天就分享到這里，更多的信息請看官方文檔：https://developer.wordpress.org/reference/hooks/body_class/
聲明：本站所有文章，如無特殊說明或標注，均為本站原創(chuàng)發(fā)布。任何個人或組織，在未征得本站同意時，禁止復制、盜用、采集、發(fā)布本站內(nèi)容到任何網(wǎng)站、書籍等各類媒體平臺。如若本站內(nèi)容侵犯了原著者的合法權(quán)益，可聯(lián)系我們進行處理。
