当前浏览:首页 / WordPress函数 / body_class()

body_class( string|string[] $class = '' )

显示body元素的类名

body

class


参数

$class

(string|string[]) (可选) 要添加到类列表中的以空格分隔的字符串或类名数组。

默认值: ''


说明

该函数为body元素提供了不同的类,通常可以添加到header.php的HTML body标签。

基本用法

下面的示例演示如何将body_class模板标签添加到主题中。

<body <?php body_class(); ?>>

实际的HTML输出可能类似于以下内容:

<body class="page page-id-2 page-parent page-template-default logged-in">

在WordPress主题样式表中,添加适当的样式,例如:

.page {
	/* styles for all posts within the page class */
}
.page-id-2 {
	/* styles for only page ID number 2 */
}
.logged-in {
	/* styles for all pageviews when the user is logged in */
}


源码

查看源码 官方文档


更新日志

版本描述
2.8.0开始引入

用户贡献的笔记

  • 贡献者:Drew Jaynes

    添加更多类

    默认情况下,只有上述类。

    要添加更多类,可以添加模板标签的参数。例如,要将一个类添加到上面使用的同一模板中,请执行以下操作:

    <body <?php body_class( 'class-name' ); ?>>
    

    结果将是:

    <body class="page page-id-2 page-parent page-template-default logged-in class-name">
    
  • 贡献者:Drew Jaynes

    通过过滤器添加新类

    您可以通过body_class过滤钩子来添加额外的body类。

    要将以下内容添加到WordPress主题functions.php文件,更改my_class_names和class-name以满足您的需要:

    // Add specific CSS class by filter.
    
    add_filter( 'body_class', function( $classes ) {
    	return array_merge( $classes, array( 'class-name' ) );
    } );
    
  • 贡献者:Sam KentJoe Westcott

    下面是一个将body类添加到特定页面模板的解决方案:

    add_filter( 'body_class', 'custom_class' );
    function custom_class( $classes ) {
    	if ( is_page_template( 'page-example.php' ) ) {
            $classes[] = 'example';
        }
    	return $classes;
    }

    前端结果:

    <body class="page page-id-7 page-template page-template-page-example page-template-page-example-php example">
  • 贡献者:maijabrazen

    上面关于如何通过过滤器删除内联类的示例不正确<下面是正确的方法:

    add_filter('body_class', function (array $classes) {
        if (in_array('class-to-remove', $classes)) {
          unset( $classes[array_search('class-to-remove', $classes)] );
        }
      return $classes;
    });
  • 贡献者:Mahesh Waghmare

    #函数body_class()添加一些静态类取决于页面、文章、存档、博客、搜索、404等。添加到所有默认静态类的列表

    .rtl {
    	/* # Checks if current locale is RTL (Right To Left script). */
    }
    
    .home {
    	/* # Depends on the site’s “Front page displays” Reading Settings ‘show_on_front’ and ‘page_on_front’. n If you set a static page for the front page of your site, this function will return true when viewing that page. */
    }
    
    .blog {
    	/* # Add if blog view homepage, otherwise false. */
    }
    
    .archive {
    	/* For # Month, Year, Category, Author, Post Type archive */
    }
    
    .date {
    	/* # For date archive */
    }
    
    .search {
    	/* # For search */
    }
    
    .search-results {
    	/* # If found posts in search result */
    }
    
    .search-no-results {
    	/* # If NOT found any posts in search result */
    }
    
    .paged {
    	/* # On paged result and not for the first page */
    }
    
    .attachment {
    	/* # On attachment page */
    }
    
    .error404 {
    	/* # On 404 page */
    }
    
    .single {
    	/* # Add for any post type, except {attachments} and {pages} */
    }
    
    .single-format-standard {
    	/* # standard post format */
    }
    
    .post-type-archive {
    	/* # post type archive page */
    }
    
    .author {
    	/* # author page */
    }
    
    .category {
    	/* # category page */
    }
    
    .tag {
    	/* # Tags page */
    }
    	
    .page {
    	/* # existing single page */
    }
    
    .page-parent {
    	/* # Parent page only */
    }
    
    .page-child {
    	/* # Child page only */
    }
    
    .page-template {
    	/* # Page templates only */
    }
    
    .page-template-default {
    	/* # Default page templates only */
    }
    
    .logged-in {
    	/* # Logged in user */
    }
    
    .admin-bar {
    	/* # Only in admin bar */
    }
    
    .no-customize-support {
    	/* # Only in admin bar */
    }
    
    .custom-background {
    	/* # If theme support 'custom-background' or get_background_image() */
    }
    
    .wp-custom-logo {
    	/* # If the site has a custom logo. */
    }

    #函数body_class()还添加了一些动态类,如下所示:

    .rtl {
    	/* # Checks if current locale is RTL (Right To Left script). */
    }
    
    .home {
    	/* # Depends on the site’s “Front page displays” Reading Settings ‘show_on_front’ and ‘page_on_front’. n If you set a static page for the front page of your site, this function will return true when viewing that page. */
    }
    
    .blog {
    	/* # Add if blog view homepage, otherwise false. */
    }
    
    .archive {
    	/* For # Month, Year, Category, Author, Post Type archive */
    }
    
    .date {
    	/* # For date archive */
    }
    
    .search {
    	/* # For search */
    }
    
    .search-results {
    	/* # If found posts in search result */
    }
    
    .search-no-results {
    	/* # If NOT found any posts in search result */
    }
    
    .paged {
    	/* # On paged result and not for the first page */
    }
    
    .attachment {
    	/* # On attachment page */
    }
    
    .error404 {
    	/* # On 404 page */
    }
    
    .single {
    	/* # Add for any post type, except {attachments} and {pages} */
    }
    
    .single-format-standard {
    	/* # standard post format */
    }
    
    .post-type-archive {
    	/* # post type archive page */
    }
    
    .author {
    	/* # author page */
    }
    
    .category {
    	/* # category page */
    }
    
    .tag {
    	/* # Tags page */
    }
    	
    .page {
    	/* # existing single page */
    }
    
    .page-parent {
    	/* # Parent page only */
    }
    
    .page-child {
    	/* # Child page only */
    }
    
    .page-template {
    	/* # Page templates only */
    }
    
    .page-template-default {
    	/* # Default page templates only */
    }
    
    .logged-in {
    	/* # Logged in user */
    }
    
    .admin-bar {
    	/* # Only in admin bar */
    }
    
    .no-customize-support {
    	/* # Only in admin bar */
    }
    
    .custom-background {
    	/* # If theme support 'custom-background' or get_background_image() */
    }
    
    .wp-custom-logo {
    	/* # If the site has a custom logo. */
    }

    您可以在函数get_body_class()中检查所有这些

  • 贡献者:Antonio Sanchez

    要删除body_class函数的类,必须执行以下操作:

    add_filter( 'body_class', function( $classes ) {
    	foreach($classes as $key => $class) {
    		if( $class == "class-to-remove" ){
    			unset($classes[$key]);
    		}
    	}
    	return $classes;
    }, 1000);

    上述其他函数不起作用,因为它们忽略了数组$classes的键,并且没有所需的优先级。

  • 贡献者:mahd1

    示例:将新类添加到body

    function wp_body_classes( $classes ) {
        $classes[] = 'class-name';
         
        return $classes;
    }
    add_filter( 'body_class','wp_body_classes' );
  • 贡献者:scott.hepler

    这是此函数使用的get_page_template_slug中的内容,请务必记住:

    如果模板存储在主题的子目录(或父主题的子主题的子目录)中,wp_postemta的值是文件夹和文件名,例如:

    my-templates/my-custom-template.php

  • 贡献者:akaygaur
    // Add Body Class to your custom template
    
    add_filter( 'body_class', 'wpdocs_sp_body_class' );
    function wpdocs_sp_body_class( $classes ) {
    	$templates = array( 'custom-template-1.php', 'custom-template-2.php', 'custom-template-3.php' ); // add your custom template in array
    
    	if ( is_page_template( $templates ) ) { 
    		$classes[] = 'your-custom-class'; // add your class here
    	}
    
    	return $classes;
    }
    
    
  • 贡献者:gecko_guy

    在整个站点中添加一个自定义body类,以及仅在需要时通过有条件地针对页面slug添加其他类。

    在本例中,网站使用前端注册、登录和密码重置表单,因此目标是仅在这些页面上修改表单样式:

    add_filter( 'body_class', function( $classes ) {
        if ( is_page( 'login' ) ) {
          $classes[] = 'login wtv-form';
        } else {
          if ( is_page( 'register' ) ) {
            $classes[] = 'register wtv-form';
        } else {
          if ( is_page( 'password-reset' ) ) {
            $classes[] = 'reset wtv-form';
          }
        }
      }
      return array_merge( $classes, array( 'custom' ) );
    } );
  • 贡献者:m3lvin

    添加maijabrazen.示例,如果要从body类中删除作者id。如果希望删除作者名,请使用user_nicename

    add_filter('body_class', function (array $classes) {
    $author = 'author-'.get_the_author_meta('ID') ;
        if (in_array($author, $classes)) {
          unset( $classes[array_search($author, $classes)] );
        }
      return $classes;
    });
  • 贡献者:Drew Jaynes

    通过过滤器删除类

    通过取消设置$classes数组中的键来删除现有的body类。

    // Removes a class from the body_class array.
    
    add_filter( 'body_class', function( $classes ) {
    	if ( isset( $classes['class-to-remove'] ) ) {
    		unset( $classes['class-to-remove'] );
    	}
    	return $classes;
    } );
    
  • 贡献者:Rinku Y
    <body <?php body_class(); ?>>