通过我们使用WordPress的经验，我们发现主题设计师经常过度使用某种功能。当他们需要的只是一些简单的CSS时，他们正在寻找疯狂的WordPress过滤器和钩子来完成任务。 WordPress默认生成很多CSS类。 （WordPress CSS备忘单）。其中一个CSS类区域是body类样式。在本文中，我们将解释WordPress体类101以及为初学主题设计者分享一些有用的提示和技巧。

什么是WordPress Body Class？

Body Class（body_class）是一个WordPress函数，它为body元素提供不同的类，因此主题作者可以使用CSS有效地设置其网站的样式。 HTML body标签主要存在于header.php文件中，该文件在每个页面上加载。编码主题时，可以将body_class函数附加到body元素，如下所示：

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

通过添加这个小元素，您可以灵活地使用CSS轻松修改每个页面的外观。根据所加载页面的类型，WordPress会自动添加相应的类。例如，如果您在存档页面上，如果您选择使用它，WordPress将自动将存档类添加到body元素。几乎每一页都能做到这一点。以下是WordPress可能添加的常见类的一些示例：

.rtl {}
.home {}
.blog {}
.archive {}
.date {}
.search {}
.paged {}
.attachment {}
.error404 {}
.single postid-(id) {}
.attachmentid-(id) {}
.attachment-(mime-type) {}
.author {}
.author-(user_nicename) {}
.category {}
.category-(slug) {}
.tag {}
.tag-(slug) {}
.page-parent {}
.page-child parent-pageid-(id) {}
.page-template page-template-(template file name) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(page number) {}
.single-paged-(page number) {}
.page-paged-(page number) {}
.category-paged-(page number) {}
.tag-paged-(page number) {}
.date-paged-(page number) {}
.author-paged-(page number) {}
.search-paged-(page number) {}

正如您所看到的，通过拥有如此强大的资源，您可以使用CSS完全自定义WordPress页面。您可以自定义特定的作者配置文件页面，基于日期的存档等。那么您将如何以及何时使用它？

如何使用WordPress Body Class

在大多数情况下，WordPress body类是主题设计者经常忽略的简单解决方案。是的，这也包括我们。大约一年前，我们需要设置仅在特定页面上设置WordPress菜单项的样式。我们决定深入挖掘以找到一个过滤器，为菜单项添加一个特殊的导航类，这些菜单项将使用条件语句添加。例如，如果它是单个页面，则将“Blog”类添加到菜单项。我花了很多时间搞清楚所有这些并写一篇关于它的帖子，我们的一位用户指出我们可以很容易地用现有的体类来完成它，如下所示：

.single #navigation .leftmenublog div{display: inline-block !important;}

注意：它如何使用在所有单个帖子页面中添加的.single body类。

那之后男孩不觉得我觉得很蠢。从那时起，我们已经做了一个注释，看看在深入挖掘之前，是否可以先用身体类完成任务。

给你另一个例子。一旦用户找到我们，想要一种基于类别页面更改其网站上的徽标图像的方法。包括他在内的大多数主题设计都是使用CSS（#header .logo）加载徽标。我们建议如何使用.category–slug body类来改变他的徽标：

.category-advice #header .logo{background: url(images/logo-advice.png) no-repeat !important;}
.category-health #header .logo{background: url(images/logo-health.png) no-repeat !important;}

这位新主题设计师和我们一样有着相同的时刻。希望现在您已经掌握了如何在主题设计中利用身体类。但是等等，这会变得更加强大，因为有一种方法可以使用过滤器添加自定义主体类。我们来看看如何做到这一点。

如何添加自定义正文类

WordPress有一个过滤器，您可以使用它在需要时添加自定义正文类。我们将向您展示如何使用过滤器添加一个body类，然后再向您展示特定的用例场景，以便每个人都可以在同一页面上。

因为body类是特定于主题的，所以你需要在functions.php文件中编写一个自定义函数，如下所示：

function my_class_names($classes) {
	// add "class-name" to the $classes array
	$classes[] = "test-class-name";
	// return the $classes array
	return $classes;
}

//Now add test class to the filter
add_filter("body_class","my_class_names");

上面的代码将在您网站的每个页面上的body标签中添加一个“test-class-name”类。那不是那么糟糕吧？该函数的真正强大之处在于条件标记。您可以说只在单页等上添加XYZ类。让我们以此为例，将其应用于实际用例场景。

将类别类添加到单个帖子页面

假设您要自定义每个类别的单个帖子页面。根据自定义的类型，您可以为其使用正文类。为了简单起见，我们假设您要根据单个帖子的类别更改页面的背景颜色。您可以通过向单个帖子页面视图添加类别类来实现此目的。将以下函数粘贴到主题的functions.php文件中：

// add category nicenames in body class
function category_id_class($classes) {
	global $post;
	foreach((get_the_category($post->ID)) as $category)
		$classes[] = $category->category_nicename;
	return $classes;
}

add_filter("body_class", "category_id_class");

上面的代码将在您的正文类中为单个帖子页面添加类别类。然后，您可以根据需要使用css类来设置样式。

在WordPress主题的Body Class中添加Page Slug

将以下代码粘贴到主题的functions.php文件中：

//Page Slug Body Class
function add_slug_body_class( $classes ) {
global $post;
if ( isset( $post ) ) {
$classes[] = $post->post_type . "-" . $post->post_name;
}
return $classes;
}
add_filter( "body_class", "add_slug_body_class" );

阅读我们在body类页面slug上的文章，它将解释我们为什么需要它。

浏览器检测和浏览器特定的正文类

有时您可能需要特殊的CSS样式才能在某些浏览器中正常工作（HINT：Internet Explorer）。 Nathan Rice提出了一个非常酷的解决方案，它根据用户访问该网站的浏览器向body类添加特定于浏览器的类。

您所要做的就是将以下代码粘贴到functions.php文件中：

<?php
add_filter("body_class","browser_body_class");
function browser_body_class($classes) {
	global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

	if($is_lynx) $classes[] = "lynx";
	elseif($is_gecko) $classes[] = "gecko";
	elseif($is_opera) $classes[] = "opera";
	elseif($is_NS4) $classes[] = "ns4";
	elseif($is_safari) $classes[] = "safari";
	elseif($is_chrome) $classes[] = "chrome";
	elseif($is_IE) $classes[] = "ie";
	else $classes[] = "unknown";

	if($is_iphone) $classes[] = "iphone";
	return $classes;
}
?>

然后，您可以使用以下类：

.ie .navigation {some item goes here}

如果它是一个小的填充或边距问题，这是一种相当快速的修复方法。

更多用例：

我们可能会列出更多用例，但我们不会这样做，否则这篇文章就会失控。它的重点是帮助新主题开发人员理解WordPress体类的基础知识及其优点。用例仅限于您的想象力。我们已经看到商业主题开发人员（Genesis）使用body类来提供各种布局选项。例如，全页面布局，补充工具栏内容，内容边栏等。这样，用户可以轻松切换页面布局而不必担心外观问题，因为已经使用CSS.0进行了处理

我们已经看到一些开发人员添加HTTP请求来加载他们提供的各种配色方案的CSS文件。在很多情况下，变化也很小。当一个人可以完成工作时，没有必要加载3个样式表。只需使用body类。

评论被关闭。