WordPress添加自定义CSS类名到body标签

在做WordPress主题开发的时候,可能需要根据某些条件对不同的页面做一些样式的区别,实现的方式有很多种,但是一般比较常用的是通过<body>标签的不同类名来做区分。如果你还不明白我说的类名,那你可以看下下图的高亮部分,没错,就是这里啦:

如上图所示,WordPress默认会判断当前页面的一些属性,添加了很多不同的CSS类名到<body>标签。

如果我们要添加自定义的css类名到<body>标签,又该如何?

WordPress内置了一个钩子可以过滤网站中<body>标签的类名:body_class。我们可以通过判断一些条件,添加自定义的Body类,比如:判断用户是否登录,是手机端还是电脑端,使用的是Chrome浏览器还是其他浏览器……

根据用户是否登录添加不同的类名

注意:WordPress默认已经添加了对用于是否登录的类名,不需要我们自己再去添加,这里只是举个例子。

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;
}

通过上面两个例子,我们应该比较明白如何添加类了吧。你所需要做的就是根据你的判断条件去添加即可。

非常有用的类名大全

function wpkj_custom_body_class( $classes )
{   
    $include = array
    (
        // 设备/浏览器类 (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(),
    );
 
    // 侧边栏
    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' );

删除已经包含的类名

既然我们可以通过 body_class 钩子添加自定义类名,那我们当然也可以用它来删除已经包含的类名。

// 从 body_class 数组中删除某个类名,将 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/

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
欢迎关注我们的微信公众号:WPDAXUE

倡萌

一个文科IT宅男,喜欢折腾WordPress和被它折腾 ^_^

暂无评论

发表评论