WordPress Body Class 101：主题设计师的提示和技巧
通过我们使用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类。
通过我们使用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类。
