WordPress Body Class 101:主题设计师的技巧和窍门
您是一位有抱负的 WordPress 主题设计师，正在寻找在您的主题中使用 CSS 的新方法吗?
幸运的是，WordPress 会自动添加您可以在主题中使用的 CSS 类.其中一些 CSS 类会自动添加到 WordPress 站点上每个页面的 <body> 部分.
在本文中，我们将通过提示和技巧来解释 WordPress body 类，以帮助有抱负的主题设计师在他们的项目中使用它们.
这是您将在本文中学到的内容的快速概述.
- 什么是 WordPress 正文类?
- 何时使用 body 类
- 如何添加自定义主体类
- 如何使用插件添加 body 类
- 使用条件标签添加自定义主体类
- 动态添加自定义主体类的更多示例
- 检测用户浏览器并添加浏览器特定的主体类
什么是 WordPress Body Class?
Body 类 (body_class) 是一个 WordPress 函数，它允许您将 CSS 类分配给 body 元素.
HTML body 标签通常以主题的 header.php 文件开头，该文件会加载到每个页面上.这允许您动态地找出用户正在查看的页面，然后相应地添加 CSS 类.
通常大多数入门主题和框架已经在 HTML body 标签中包含了 body 类函数.但是，如果您的主题没有它，那么您可以通过像这样修改 body 标签来添加它:
<body <?php body_class($class); ?>>
根据显示的页面类型，WordPress 会自动添加相应的类.
例如，如果您在存档页面上，WordPress 会自动将存档类添加到 body 元素.它几乎对每一页都这样做.
相关:了解 WordPress 在幕后的工作原理(信息图)
以下是 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 页面.您可以自定义特定的作者个人资料页面、基于日期的档案等.
话虽如此，现在让我们来看看您将如何以及何时使用 body 类.
何时使用 WordPress Body Class
首先，您需要确保您的主题的 body 元素包含如上所示的 body 类函数.如果是，那么它将自动包含上面提到的所有 WordPress 生成的 CSS 类.
之后，您还可以将自己的自定义 CSS 类添加到 body 元素.您可以在需要时添加这些类.
例如，如果您想更改特定作者在特定类别下提交的文章的外观.
如何添加自定义正文类
WordPress 有一个过滤器，您可以在需要时使用它来添加自定义主体类.在向您展示特定用例场景之前，我们将向您展示如何使用过滤器添加正文类，以便每个人都可以在同一页面上.
由于主体类是特定于主题的，您需要将以下代码添加到主题的 functions.php 文件中.
function my_class_names($classes) {
//add 'class-name' to the $classes array
$classes[] = 'wpb-class';
//return the $classes array
return $classes;
}
//Now add test class to the filter
add_filter('body_class','my_class_names');
上面的代码将在您网站的每个页面上的 body 标签中添加一个类"wpb-class".这还不错，对吧?
现在您可以直接在主题的样式表中使用这个 CSS 类.如果您在自己的网站上工作，那么您还可以使用主题定制器中的自定义 CSS 功能添加 CSS.
使用 WordPress 插件添加正文类
如果你不是在做客户项目并且不想写代码，那么这种方法对你来说会更容易.
您需要做的第一件事是安装并激活自定义车身类插件.有关更多详细信息，请参阅有关如何安装 WordPress 插件的分步指南.
激活后，您需要访问设置»自定义正文类页面.从这里您可以配置插件设置.
您可以选择要启用正文类功能的帖子类型以及可以访问它的人.不要忘记点击保存更改按钮来存储您的设置.
接下来，您可以前往编辑 WordPress 网站上的任何帖子或页面.在帖子编辑屏幕上，您会在标有"帖子类别"的右侧栏中找到一个新的元框.
单击以添加您的自定义 CSS 类.您可以添加由空格分隔的多个类.
完成后，您可以简单地保存或发布您的帖子.该插件现在会将您的自定义 CSS 类添加到该特定帖子或页面的正文类中.
在 Body 类中使用条件标签
body_class 函数的真正强大之处在于它与条件标签一起使用时.
这些条件标签是真或假数据类型，用于检查 WordPress 中的条件是真还是假.例如，条件标签 is_home 检查当前显示的页面是否为主页.
这允许主题开发人员在向 body_class 函数添加自定义 CSS 类之前检查条件是真还是假.
我们来看一些使用条件标签向 body 类添加自定义类的示例.
假设您想为具有作者用户角色的登录用户设置不同的主页样式.虽然 WordPress 会自动生成 .home 和 .logged-in 类，但它不会检测用户角色或将其添加为类.
现在，这是一个场景，您可以使用带有一些自定义代码的条件标签来动态地将自定义类添加到正文类.
为此，您需要将以下代码添加到主题的 functions.php 文件中.
function wpb_loggedin_user_role_class($classes) {
//let's check if it is homepage
if ( is_home() ) {
//Now let's check if the logged in user has author user role.
$user = wp_get_current_user();
if ( in_array( 'author', (array) $user->roles ) ) {
//The user has the "author" role
//Add user role to the body class
$classes[] = 'author';
//Return the classes array
return $classes;
}
} else {
//if it is not homepage, then just return default classes
return $classes;
}
}
add_filter('body_class', 'wpb_loggedin_user_role_class');
现在，让我们看另一个有用的例子.这次我们将检查显示的页面是否是 WordPress 草稿的预览.
为此，我们将使用条件标签 is_preview，然后添加我们的自定义 CSS 类.
function add_preview_class($classes) {
if ( is_preview() ) {
$classes[] = 'preview-mode';
return $classes;
}
return $classes;
}
add_filter('body_class','add_preview_class');
现在，我们将以下 CSS 添加到我们主题的样式表中，以利用我们刚刚添加的新自定义 CSS 类.
.preview-mode.site-header:before {
content:'preview mode';
color:#FFF;
background-color:#ff0000;
}
这就是它在我们的演示网站上的样子:
您可能想查看可在 WordPress 中使用的完整条件标签列表.这将为您的代码提供一组方便的随时可用的标签.
动态添加自定义正文类的其他示例
除了条件标签之外，您还可以使用其他技术从 WordPress 数据库中获取信息并为正文类创建自定义 CSS 类.
将类别名称添加到单个帖子页面的正文类
假设您想根据提交的类别自定义单个帖子的外观.您可以使用 body 类来实现这一点
首先，您需要在单个帖子页面上添加类别名称作为 CSS 类.为此，请将以下代码添加到主题的 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 类来设置样式.
向 body 类添加页面 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' );
浏览器检测和浏览器特定的正文类
有时您可能会遇到一些问题，即您的主题可能需要针对特定浏览器的额外 CSS.
现在好消息是 WordPress 会在加载时自动检测浏览器，然后将此信息临时存储为全局变量.
您只需要检查 WordPress 是否检测到特定浏览器，然后将其添加为自定义 CSS 类.
只需将以下代码复制并粘贴到您主题的 functions.php 文件中:
function wpb_browser_body_class($classes) {
global $is_iphone, $is_chrome, $is_safari, $is_NS4, $is_opera, $is_macIE, $is_winIE, $is_gecko, $is_lynx, $is_IE, $is_edge;
if ($is_iphone) $classes[] ='iphone-safari';
elseif ($is_chrome) $classes[] ='google-chrome';
elseif ($is_safari) $classes[] ='safari';
elseif ($is_NS4) $classes[] ='netscape';
elseif ($is_opera) $classes[] ='opera';
elseif ($is_macIE) $classes[] ='mac-ie';
elseif ($is_winIE) $classes[] ='windows-ie';
elseif ($is_gecko) $classes[] ='firefox';
elseif ($is_lynx) $classes[] ='lynx';
elseif ($is_IE) $classes[] ='internet-explorer';
elseif ($is_edge) $classes[] ='ms-edge';
else $classes[] = 'unknown';
return $classes;
}
add_filter('body_class','wpb_browser_body_class');
然后您可以使用以下类:
.ms-edge.navigation {some item goes here}
如果它是一个小的填充或边距问题，那么这是一个相当简单的修复方法.
肯定还有更多场景使用 body_class 函数可以让您免于编写冗长的代码行.例如，如果您使用像 Genesis 这样的主题框架，那么您可以使用它在您的子主题中添加自定义类.
您可以使用 body_class 函数为全角页面布局、侧边栏内容、页眉和页脚等添加 CSS 类.
我们希望本文能帮助您了解如何在您的主题中使用 WordPress 正文类.您可能还想查看我们关于如何为每个 WordPress 帖子设置不同样式的文章，以及我们对最佳 WordPress 页面构建器插件的比较.
