body_class() - 显示body元素的类名 - WordPress函数

参数

$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 */
}

使用	描述
esc_attr()	转义HTML属性
get_body_class()	检索body元素的类名数组

被使用	描述
WP_REST_Widget_Types_Controller::render_legacy_widget_preview_iframe()

源码

查看源码官方文档

更新日志

版本	描述
2.8.0	开始引入

使用示例

示例1
添加更多类

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

要添加更多类，可以添加模板标签的参数。例如，要将一个类添加到上面使用的同一模板中，请执行以下操作：
```
<body <?php body_class( 'class-name' ); ?>>
```
结果将是：
```
<body class="page page-id-2 page-parent page-template-default logged-in class-name">
```
示例2
通过过滤器添加新类

您可以通过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' ) );
} );
```

示例3

下面是一个将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">

示例4

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

add_filter('body_class', function (array $classes) {
    if (in_array('class-to-remove', $classes)) {
      unset( $classes[array_search('class-to-remove', $classes)] );
    }
  return $classes;
});

示例5

#函数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()中检查所有这些

示例6

要删除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的键，并且没有所需的优先级。

示例7

示例：将新类添加到body。

function wp_body_classes( $classes ) {
    $classes[] = 'class-name';
     
    return $classes;
}
add_filter( 'body_class','wp_body_classes' );

示例8
这是此函数使用的get_page_template_slug中的内容，请务必记住：

如果模板存储在主题的子目录（或父主题的子主题的子目录）中，wp_postemta的值是文件夹和文件名，例如：

my-templates/my-custom-template.php

示例9

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

示例10

在整个站点中添加一个自定义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' ) );
} );

示例11

添加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;
});

示例12

通过过滤器删除类

通过取消设置$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;
} );

示例13
```
<body <?php body_class(); ?>>
```

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

body

class

参数

说明

相关

源码

更新日志

使用示例