wordpress汉化技巧_WordPress Body Class 101：主题设计师的技巧与窍门-CSDN博客

本文详细介绍了WordPress中Body Class的功能与应用，包括如何利用Body Class进行页面样式定制，添加自定义Body Class，以及在不同场景下如何有效运用Body Class进行页面布局和样式调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

wordpress汉化技巧

Through out our experience of using WordPress, we have found that often theme designers overthink a certain functionality. They are looking for crazy WordPress filters and hooks to accomplish a task when all they need is some simple CSS. WordPress by default generates a lot of CSS classes. (WordPress CSS Cheat Sheet). One of these CSS classes area ia the body class styles. In this article, we will explain the WordPress body class 101 along with sharing some useful tips and tricks for beginning theme designers.

通过使用WordPress的经验，我们发现主题设计人员经常会过分考虑某些功能。他们正在寻找疯狂的WordPress过滤器和挂钩来完成一项任务，而他们所需要的只是一些简单CSS。 WordPress默认情况下会生成许多CSS类。 ( WordPress CSS备忘单 )。这些CSS类之一是body类的样式。在本文中，我们将解释WordPress主体类101，并为初学者主题设计师分享一些有用的提示和技巧。

什么是WordPress身体课程？ (What is WordPress Body Class?)

Body Class (body_class) is a WordPress function that gives the body element different classes, so theme authors can style their sites effectively with CSS. HTML body tag is present in mostly your header.php file which loads on every page. When coding a theme, you can attach the body_class function to your body element like so:

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

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

By adding this little element, you give yourself the flexibility of easily modifying the look of each page by using CSS. Depending on the type of page being loaded, WordPress automatically adds the appropriate class. For example, if you are on an archive page, WordPress will automatically add archive class to the body element if you choose to use it. It does that for just about every page. Here are some examples of common classes that WordPress might add:

通过添加此小元素，您将获得使用CSS轻松修改每个页面外观的灵活性。根据加载页面的类型，WordPress会自动添加适当的类。例如，如果您在存档页面上，如果您选择使用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) {}

As you can see, by having such a powerful resource at hand, you can entirely customize your WordPress page by using just CSS. You can customize specific author profile pages, date based archives etc. So how and when would you use this?

如您所见，通过拥有如此强大的资源，您可以仅使用CSS来完全自定义WordPress页面。您可以自定义特定的作者个人资料页面，基于日期的存档等。那么，您将如何以及何时使用它？

如何使用WordPress Body Class (How to use WordPress Body Class)

In most cases, WordPress body class is the simple solution that theme designers often ignore. Yes, this includes us as well. About a year ago, we needed to style a WordPress menu item that was only on a specific page. We decided to dig deep to find a filter to add a special navigation class to the menu items which would be added using conditional statement. For example, if it is a single page, then add the class “Blog” to the menu items. After spending all the time in figuring out all that and writing a post about it, one of our users pointed out that we could’ve easily done that with existing body class like so:

在大多数情况下，WordPress主体类是主题设计人员经常忽略的简单解决方案。是的，这也包括我们。大约一年前，我们需要设置仅在特定页面上的WordPress菜单项的样式。我们决定深入研究以找到一个过滤器，以向菜单项添加一个特殊的导航类，该类将使用条件语句添加。例如，如果它是单个页面，则将“博客”类添加到菜单项。在花了所有时间弄清楚所有内容并写了一篇文章之后，我们的一位用户指出，我们可以很容易地使用现有的body类来做到这一点，例如：

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

Notice: how it uses the .single body class that is added in all single post pages.

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

Boy didn’t we feel stupid after that. Ever since then, we have made a note to see if things can be done with the body class first before digging deeper.

男孩之后，我们没有感到愚蠢。从那时起，我们便做了笔记，以了解在深入研究之前是否可以首先使用Body类进行操作。

To give you another example. Once a user approached us asking for a way to change the logo image on their website based on the category page. Most theme designs including his was loading the logo using a CSS (#header .logo). We suggested how about using the .category-slug body class to change his logo like so:

再举一个例子。一旦用户联系我们，我们便要求根据类别页面更改其网站上徽标图像的方法。包括他在内的大多数主题设计都是使用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;}

This new theme designer had the same ah-hah moment that we had. Hopefully now you are getting a hang of how you can utilize body class in your theme designs. But wait, this gets even more powerful because there is a way for you to add custom body classes using a filter. Let’s take a look at how to do that.

这个新的主题设计师拥有与我们同样的时刻。希望现在您掌握了如何在主题设计中利用身体类的知识。但是，等等，它变得更加强大，因为您可以使用过滤器添加自定义主体类。让我们看看如何做到这一点。

如何添加自定义正文类 (How to Add Custom Body Classes)

WordPress has a filter that you can utilize to add custom body classes when needed. We will show you how to add a body class using the filter before showing you the specific use case scenario just so everyone can be on the same page.

WordPress有一个过滤器，您可以根据需要添加自定义主体类。在向您展示特定用例场景之前，我们将向您展示如何使用过滤器添加主体类，以便每个人都可以在同一页面上。

Because body classes are theme specific, you would need to write a custom function in your functions.php file like so:

因为主体类是特定于主题的，所以您需要在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');

The above code will add a class “test-class-name” to the body tag on every page on your website. That’s not so bad right? The real power of this function is in the conditional tags. You can say add XYZ class only on single pages etc. Let’s take this example and apply it to real use-case scenario.

上面的代码会将“ test-class-name”类添加到网站每个页面上的body标记中。还不错吧？该功能的真正功能在于条件标签中。您可以说仅在单个页面等上添加XYZ类。让我们以这个示例为例，并将其应用于实际用例场景。

将类别类别添加到单个帖子页面 (Add Category Class to Single Post Pages)

Lets say you want to customize the single post pages of each category. Depending on the type of customization, you can use body classes for it. To keep things simple, lets say you want to change the background color of the page based on the category of single posts. You can do so by adding category classes to your single post page views. Paste the following function in your theme’s functions.php file:

假设您要自定义每个类别的单个帖子页面。根据定制的类型，您可以为其使用主体类。为简单起见，假设您要根据单个帖子的类别更改页面的背景颜色。您可以通过将类别类添加到单个帖子页面视图中来实现。将以下函数粘贴到主题的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');

The code above will add the category class in your body class for single post pages. You can then use css classes to style it as you wish.

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

在WordPress主题的主体类中添加页面标签 (Add Page Slug in Body Class of your WordPress Themes)

Paste the following code in your theme’s functions.php file:

将以下代码粘贴到主题的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' );

Read our article on page slug in body class that will explain why we needed this.

请阅读我们在body类上的slug页上的文章，其中将解释为什么我们需要这样做。

浏览器检测和浏览器特定的身体类别 (Browser Detection and Browser Specific Body Classes)

Sometimes you may need to have special CSS styles for everything to work right in certain browsers (HINT: Internet Explorer). Well Nathan Rice suggested a very cool solution that adds browser specific classes to body class based on the browser the user is visiting the site from.

有时您可能需要特殊CSS样式才能使所有功能在某些浏览器中正常工作(提示：Internet Explorer)。内森·赖斯 ( Nathan Rice)提出了一个非常酷的解决方案，该解决方案基于用户从中访问站点的浏览器，将特定于浏览器的类添加到主体类中。

All you have to do is paste the following code in your functions.php file:

您所要做的就是将以下代码粘贴到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;
}
?>

You can then use classes like:

然后，您可以使用类似的类：

.ie .navigation {some item goes here}

If it is a small padding or margin issue, this is a fairly fast way of fixing it.

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

更多用例： (More Use Cases:)

We can probably list a lot more uses cases, but we won’t otherwise this article will get out of hand. The whole point of it was to help new theme developers understand the basics of WordPress body class and it’s advantages. The use cases are limited to your imagination. We have seen commercial theme developers (Genesis) use body classes to offer various layout options. For example Full Page Layout, Sidebar Content, Content Sidebar etc. Doing so, the user can easily switch the layout of their page without worrying out the look issues because it’s already taken care for with CSS.0

我们可能会列出更多用例，但否则我们将不会失去控制。这样做的全部目的是帮助新主题开发人员了解WordPress主体类的基础及其优势。用例仅限于您的想象力。我们已经看到商业主题开发人员(Genesis)使用主体类来提供各种布局选项。例如，Full Page Layout，Sidebar Content，Content Sidebar等。这样做，用户可以轻松切换页面布局，而不必担心外观问题，因为CSS.0已经对其进行了处理。

We have seen some developers adding HTTP requests to load CSS files for various color schemes that they offer. In a lot of cases, the changes are very minor as well. There is no point in having 3 stylesheets being loaded when one can do the job. Just use body class for that.

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

Hopefully, you found this article useful. We would be happy to hear your thoughts on Body Class, and how you have used it in the past or plan to do so in the future.

希望您发现本文很有用。我们很高兴听到您对Body Class的想法，以及您过去如何使用它或将来打算使用它。