body_class()向特定分类页、详情页…指定类Class

ACF body_class functions.php wordpress 动态类 静态类

在进行 WordPress 主题开发的时候，通常有一个地方是一定要格外关注的，因为它可以灵活控制不同页面类型、文章类型下面的样式，他就是body_class（主体元素的类名），此函数为 body 元素提供不同的类，通常可以将其添加在 header.php 的 HTML body 标签中。下面的示例展示如何将 body_class 模板标签实现到主题中。

wp-includes/post-template.php

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

<body <?php body_class( 'class-name' ); ?>>     //指定一个类Class，让它在任意一个页面使用

实际的 HTML 输出可能类似于以下内容（主题单元测试的“关于测试”页面）：

[html]
<body class="page page-id-2 page-parent page-template-default login">
[/html]

[html]
<body class="page page-id-2 page-parent page-template-default login class-name">
[/html]

在WordPress主题样式表中，添加适当的样式（Class），当然这些基本是样式名称，除非自行或原主题已经给部分已经设置好，例如：

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

静态类

  • home-template– 模板用于主页时应用的类
  • post-template– 该课程适用于所有岗位
  • page-template– 该类应用于所有页面
  • tag-template– 该类应用于所有标签索引页
  • author-template– 该类应用于所有作者页面
  • private-template– 当激活密码保护访问时，该类适用于所有页面类型

动态类

  • page-{slug}–page-为所有页面添加一个页面标签类
  • tag-{slug}tag-–在所有标签索引页中添加标签页 slug类
  • author-{slug}–author-在所有作者页面中添加一个作者页面标签类

静态类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. */
}

动态类Class（全）（就是类名不固定，跟一个动态参数）

.single-/* sanitize_html_class($post->post_type, $post_id) */

.postid-/* $post_id */

.single-format-/* sanitize_html_class( $post_format ) */

.attachmentid-/* $post_id */

.attachment-/* str_replace( $mime_prefix, '', $mime_type ) */

.post-type-archive-/* sanitize_html_class( $post_type ) */

.author-/* sanitize_html_class( $author->user_nicename, $author->ID ) */

.author-/* $author->ID */

.category-/* $cat_class */

.category-/* $cat->term_id */

.tag-/* $tag_class */

.tag-/* $tag->term_id */

.tax-/* sanitize_html_class( $term->taxonomy ) */

.term-/* $term_class */

.term-/* $term->term_id */

.page-id-/* $page_id */

.parent-pageid-/* $post->post_parent */

.page-template-/* sanitize_html_class( str_replace( array( '.', '/' ), '-', basename( $part, '.php' ) ) ) */

.page-template-/* sanitize_html_class( str_replace( '.', '-', $template_slug ) ) */

.paged-/* $page */

.single-paged-/* $page */

.page-paged-/* $page */

.category-paged-/* $page */

.tag-paged-/* $page */

.date-paged-/* $page */

.author-paged-/* $page */

.search-paged-/* $page */

.post-type-paged-/* $page */

wp-includes/post-template.php(部分)

function body_class( $css_class = '' ) {
	// Separates class names with a single space, collates class names for body element.
	echo 'class="' . esc_attr( implode( ' ', get_body_class( $css_class ) ) ) . '"';
}

wp-includes/post-template.php(全部)

function get_body_class( $css_class = '' ) {
	global $wp_query;

	$classes = array();

	if ( is_rtl() ) {
		$classes[] = 'rtl';
	}

	if ( is_front_page() ) {
		$classes[] = 'home';
	}
	if ( is_home() ) {
		$classes[] = 'blog';
	}
	if ( is_privacy_policy() ) {
		$classes[] = 'privacy-policy';
	}
	if ( is_archive() ) {
		$classes[] = 'archive';
	}
	if ( is_date() ) {
		$classes[] = 'date';
	}
	if ( is_search() ) {
		$classes[] = 'search';
		$classes[] = $wp_query->posts ? 'search-results' : 'search-no-results';
	}
	if ( is_paged() ) {
		$classes[] = 'paged';
	}
	if ( is_attachment() ) {
		$classes[] = 'attachment';
	}
	if ( is_404() ) {
		$classes[] = 'error404';
	}

	if ( is_singular() ) {
		$post      = $wp_query->get_queried_object();
		$post_id   = $post->ID;
		$post_type = $post->post_type;

		if ( is_page_template() ) {
			$classes[] = "{$post_type}-template";

			$template_slug  = get_page_template_slug( $post_id );
			$template_parts = explode( '/', $template_slug );

			foreach ( $template_parts as $part ) {
				$classes[] = "{$post_type}-template-" . sanitize_html_class( str_replace( array( '.', '/' ), '-', basename( $part, '.php' ) ) );
			}
			$classes[] = "{$post_type}-template-" . sanitize_html_class( str_replace( '.', '-', $template_slug ) );
		} else {
			$classes[] = "{$post_type}-template-default";
		}

		if ( is_single() ) {
			$classes[] = 'single';
			if ( isset( $post->post_type ) ) {
				$classes[] = 'single-' . sanitize_html_class( $post->post_type, $post_id );
				$classes[] = 'postid-' . $post_id;

				// Post Format.
				if ( post_type_supports( $post->post_type, 'post-formats' ) ) {
					$post_format = get_post_format( $post->ID );

					if ( $post_format && ! is_wp_error( $post_format ) ) {
						$classes[] = 'single-format-' . sanitize_html_class( $post_format );
					} else {
						$classes[] = 'single-format-standard';
					}
				}
			}
		}

		if ( is_attachment() ) {
			$mime_type   = get_post_mime_type( $post_id );
			$mime_prefix = array( 'application/', 'image/', 'text/', 'audio/', 'video/', 'music/' );
			$classes[]   = 'attachmentid-' . $post_id;
			$classes[]   = 'attachment-' . str_replace( $mime_prefix, '', $mime_type );
		} elseif ( is_page() ) {
			$classes[] = 'page';
			$classes[] = 'page-id-' . $post_id;

			if ( get_pages(
				array(
					'parent' => $post_id,
					'number' => 1,
				)
			) ) {
				$classes[] = 'page-parent';
			}

			if ( $post->post_parent ) {
				$classes[] = 'page-child';
				$classes[] = 'parent-pageid-' . $post->post_parent;
			}
		}
	} elseif ( is_archive() ) {
		if ( is_post_type_archive() ) {
			$classes[] = 'post-type-archive';
			$post_type = get_query_var( 'post_type' );
			if ( is_array( $post_type ) ) {
				$post_type = reset( $post_type );
			}
			$classes[] = 'post-type-archive-' . sanitize_html_class( $post_type );
		} elseif ( is_author() ) {
			$author    = $wp_query->get_queried_object();
			$classes[] = 'author';
			if ( isset( $author->user_nicename ) ) {
				$classes[] = 'author-' . sanitize_html_class( $author->user_nicename, $author->ID );
				$classes[] = 'author-' . $author->ID;
			}
		} elseif ( is_category() ) {
			$cat       = $wp_query->get_queried_object();
			$classes[] = 'category';
			if ( isset( $cat->term_id ) ) {
				$cat_class = sanitize_html_class( $cat->slug, $cat->term_id );
				if ( is_numeric( $cat_class ) || ! trim( $cat_class, '-' ) ) {
					$cat_class = $cat->term_id;
				}

				$classes[] = 'category-' . $cat_class;
				$classes[] = 'category-' . $cat->term_id;
			}
		} elseif ( is_tag() ) {
			$tag       = $wp_query->get_queried_object();
			$classes[] = 'tag';
			if ( isset( $tag->term_id ) ) {
				$tag_class = sanitize_html_class( $tag->slug, $tag->term_id );
				if ( is_numeric( $tag_class ) || ! trim( $tag_class, '-' ) ) {
					$tag_class = $tag->term_id;
				}

				$classes[] = 'tag-' . $tag_class;
				$classes[] = 'tag-' . $tag->term_id;
			}
		} elseif ( is_tax() ) {
			$term = $wp_query->get_queried_object();
			if ( isset( $term->term_id ) ) {
				$term_class = sanitize_html_class( $term->slug, $term->term_id );
				if ( is_numeric( $term_class ) || ! trim( $term_class, '-' ) ) {
					$term_class = $term->term_id;
				}

				$classes[] = 'tax-' . sanitize_html_class( $term->taxonomy );
				$classes[] = 'term-' . $term_class;
				$classes[] = 'term-' . $term->term_id;
			}
		}
	}

	if ( is_user_logged_in() ) {
		$classes[] = 'logged-in';
	}

	if ( is_admin_bar_showing() ) {
		$classes[] = 'admin-bar';
		$classes[] = 'no-customize-support';
	}

	if ( current_theme_supports( 'custom-background' )
		&& ( get_background_color() !== get_theme_support( 'custom-background', 'default-color' ) || get_background_image() ) ) {
		$classes[] = 'custom-background';
	}

	if ( has_custom_logo() ) {
		$classes[] = 'wp-custom-logo';
	}

	if ( current_theme_supports( 'responsive-embeds' ) ) {
		$classes[] = 'wp-embed-responsive';
	}

	$page = $wp_query->get( 'page' );

	if ( ! $page || $page < 2 ) {
		$page = $wp_query->get( 'paged' );
	}

	if ( $page && $page > 1 && ! is_404() ) {
		$classes[] = 'paged-' . $page;

		if ( is_single() ) {
			$classes[] = 'single-paged-' . $page;
		} elseif ( is_page() ) {
			$classes[] = 'page-paged-' . $page;
		} elseif ( is_category() ) {
			$classes[] = 'category-paged-' . $page;
		} elseif ( is_tag() ) {
			$classes[] = 'tag-paged-' . $page;
		} elseif ( is_date() ) {
			$classes[] = 'date-paged-' . $page;
		} elseif ( is_author() ) {
			$classes[] = 'author-paged-' . $page;
		} elseif ( is_search() ) {
			$classes[] = 'search-paged-' . $page;
		} elseif ( is_post_type_archive() ) {
			$classes[] = 'post-type-paged-' . $page;
		}
	}

	if ( ! empty( $css_class ) ) {
		if ( ! is_array( $css_class ) ) {
			$css_class = preg_split( '#\s+#', $css_class );
		}
		$classes = array_merge( $classes, $css_class );
	} else {
		// Ensure that we always coerce class to being an array.
		$css_class = array();
	}

	$classes = array_map( 'esc_attr', $classes );

	/**
	 * Filters the list of CSS body class names for the current post or page.
	 *
	 * @since 2.8.0
	 *
	 * @param string[] $classes   An array of body class names.
	 * @param string[] $css_class An array of additional class names added to the body.
	 */
	$classes = apply_filters( 'body_class', $classes, $css_class );

	return array_unique( $classes );
}

案例

我使用 ACF 自定义了产品分类，分类别设置是”product-category“。

当指定某几个分类列表页和该分类列表页的详情页，向body_class添加dark类。

通过获取当前自定义分类的 term 对象并检查其 ID 来实现这个功能。如何获取文章类型名？如下图：

文章类型名
//自定义分类使用（通过tag_ID）(成功)
//自定义分类详情页使用
function add_dark_class_to_body($classes) {if (is_tax('product-category')) {    $term = get_queried_object();    if ($term && in_array($term->term_id, array(13, 14, 15, 16, 17))) {  // 替换 1, 2, 3 为你的分类 ID        $classes[] = 'dark';    }}
// if (is_singular('product')) {//     $terms = get_the_terms(get_the_ID(), 'product-category');//     if ($terms) {//         foreach ($terms as $term) {//             if (in_array($term->term_id, array(13, 14, 15, 16, 17))) { // 替换 1, 2, 3 为你的分类 ID//                 $classes[] = 'dark';//                 break;//             }//         }//     }// }return $classes;

}
add_filter('body_class', 'add_dark_class_to_body');

在这段代码中：

  1. 第一部分代码与之前相同，检查当前页面是否是指定的自定义分类法页面，如果是，则判断其 ID 是否在指定列表中，如果在，则添加 dark 类。
  2. 第二部分代码检查当前页面是否是指定的自定义文章类型的单个文章页面（详情页）。将 'product' 替换为你的自定义文章类型名称。
  3. get_the_terms(get_the_ID(), 'product-category') 获取当前文章所属的所有分类项，将 'product-category' 替换为你的自定义分类法名称。
  4. 如果当前文章所属的任何分类项的 ID 在指定列表中，则添加 dark 类。

将此代码添加到你的主题的 functions.php 文件中，保存并刷新页面，即可在指定自定义分类项及其详情页中看到 dark 类被添加到 <body> 标签中。

代码作用成功，如下截图所示：

与示例无关，提供3个参考代码：


function add_dark_class_to_body($classes) {    //默认系统分类使用（未测试） if (is_category(array('csafety-couplings', 'disc-pack-couplings', 'flexible-gear-couplings', 'metal-bellows-couplings'))) {     $classes[] = 'dark'; }
   //自定义分类使用（实现有问题，不能识别） if (is_tax('your_custom_taxonomy', array('csafety-couplings', 'disc-pack-couplings', 'flexible-gear-couplings', 'metal-bellows-couplings'))) {     $classes[] = 'dark'; }
// 获取当前页面的模板文件名$template_file = basename(get_page_template());// 如果当前页面的模板文件是 "custom-page.php"，则添加 "dark" 类if ($template_file == 'index-industrial-couplings-tmp.php') {    $classes[] = 'dark';}
return $classes;
 }
add_filter('body_class', 'add_dark_class_to_body');
用途描述
is_privacy_policy()wp-includes/query.php确定查询是否针对隐私政策页面。
is_rtl()wp-includes/l10n.php确定当前语言环境是否是从右到左 (RTL)。
is_category()wp-includes/query.php确定查询是否针对现有的类别存档页面。
is_tag（）wp-includes/query.php确定查询是否针对现有的标签存档页面。
is_tax() wp-includes/query.php确定查询是否针对现有的自定义分类存档页面。
is_archive()wp-includes/query.php确定查询是否针对现有的存档页面。
is_post_type_archive（）wp-includes/query.php确定查询是否针对现有的帖子类型存档页面。
get_query_var()wp-includes/query.php检索WP_Query类中查询变量的值。
is_admin_bar_showing（）wp-includes/admin-bar.php确定是否应该显示管理栏。
is_page()wp-includes/query.php确定查询是否针对现有的单个页面。
is_page_template()wp-includes/post-template.php确定当前帖子是否使用页面模板。
get_page_template_slug()wp-includes/post-template.php获取给定帖子的特定模板文件名。
get_pages()wp-includes/post.php检索页面数组（或分层帖子类型项目）。
post_type_supports()wp-includes/post.php检查帖子类型对给定功能的支持。
get post_mime_type()wp-includes/post.php根据 ID 检索附件的 MIME 类型。
get_post_format()wp-includes/post-formats.php检索帖子的格式 slug
is_author()wp-includes/query.php确定查询是否针对现有的作者档案页面。
is_attachment()wp-includes/query.php确定查询是否针对现有的附件页面。
has_custom_logo（）wp-includes/general-template.php确定站点是否有自定义徽标。
is_paged()wp-includes/query.php确定查询是否针对分页结果而不是第一页。
get_background_color()wp-includes/theme.php检索自定义背景颜色的值。
get_theme_support()wp-includes/theme.php获取注册该支持时传递的主题支持参数。
get_background_image()wp-includes/theme.php检索自定义背景的背景图像。
sanitize_html_class（）wp-includes/formatting.php清理 HTML 类名以确保其仅包含有效字符。
WP_Query::get_queried_object()wp-includes/class-wp-query.php检索当前查询的对象。
WP_Query::get()wp-includes/class-wp-query.php检索查询变量的值。
is_search()wp-includes/query.php确定查询是否为搜索。
is_404()wp-includes/query.php确定查询是否导致 404（不返回任何结果）。
is_singular()wp-includes/query.php确定查询是否针对任何帖子类型（帖子、附件、页面、自定义帖子类型）的现有单个帖子。
is_single()wp-includes/query.php确定查询是否针对现有的单个帖子。
is_front_page()wp-includes/query.php确定查询是否针对网站首页。
is_home()wp-includes/query.php确定查询是否针对博客主页。
is_date()wp-includes/query.php确定查询是否针对现有日期档案。
apply_filters()wp-includes/plugin.php调用已添加到过滤器挂钩的回调函数。
is_user_logged_in()wp-includes/pluggable.php确定当前访问者是否是登录用户。
current_theme_supports()wp-includes/theme.php检查主题对给定功能的支持。
is_wp_error（）wp-includes/load.php检查给定的变量是否是 WordPress 错误。

相关文章

滚动至顶部
扫描微信二维码联系我们 关闭