smartbi提示正在加载_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元素，如下所示：

通过添加这个小元素，您可以灵活地使用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) {}

如何使用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' );

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

有时您可能需要特殊的CSS样式才能在某些浏览器中正常工作(HINT：Internet Explorer)。好吧弥敦道赖斯提出了一个非常酷的解决方案，基于用户正在访问从网站浏览器上增加了浏览器的具体类体类。

您所要做的就是将以下代码粘贴到functions.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类。