php body class,WordPress 设置页面中Body元素的样式类 body_class | IT工程师的生活足迹...

WordPress 的 body_class()函数，这个函数根据不同的页面类型为 body 标签生成 class 选择器，从而让设计人员可以各方便灵活的控制不同页面中的各个元素。

一、body_class 函数生成的样式类

body_class() 函数在 WordPress2.7 几乎和 post_class() 有同样的运行方式，唯一不同的是 class 生成的名称。 body_class() 函数生成的 class 大多是根据你的访问者在网站的位置。

1.1、首页中 body 的样式

如果访问者在你的博客首页，函数和类 可能会产生如下所示：

1.2、专题页面中 body 的样式

如果你在某个专题，body标签看起来可能是这样：

1.3、文字页面中 body 的样式

如果你正在浏览一个页面，body_class()会生成这样：

从本质上讲，body_class() 会生成基于内容的动态CSS class，以及在什么情况下浏览。

例如，如果你是注册用户，且已经登录，body_class()会在body标签生成一个登录class。

二、WordPress 网站页面分类和 body 样式类

WordPress 网站大体页面分类和页面的body标签类

is_rtl

rtl

right to left

is_front_page

home

首页

is_home

blog

home 页

is_archive

archive

存档页

is_date

date

日期页

is_search

search

搜索页

is_paged

paged

单独页

is_attachment

attachment

附件页

is_404

error404

404页面

is_singular

—

—

is_page_template

—

—

is_single

single

—

is_page

page

—

is_author

author

作者

is_category

category

分类

is_tag

tag

标签

is_tax

—

is_user_logged_in

logged-in

—-

is_admin_bar_showing

admin-bar,no-customize-support

—

三、将 body_class 应用到网站中

3.1、body_class 函数的使用

假设你正在使用 WordPress2.8 以上的版本，通常 body_class() 放到 标签里面。它通常在 header.php 文件里。

当你找到标签的位置后，请把它更改为：

3.2、自定义对 body_class 添加样式类:直接设置

在某些情况下，你想要添加自己的 Class 到 body_class() 里。最简单的方式，是对 body_class 函数传入样式类参数。

这样就可以自定义添加新的样式类。入参可以是字符串，使用空格分隔多个样式类；也可以是数组。

3.3、自定义对 body_class 添加样式类:通过过滤器实现

这种方法困难但更灵活；利用 WordPress 的过滤器，增加新的 body class。在这种情况下，我们将使用 get_body_class() 函数中的 body_class 过滤器。

add_filter(’body_class’,'my_body_classes’);

function my_body_classes($classes) {

// add 'zdy_class' to the $classes array

$classes[] = 'zdy_class';

// return the $classes array

return $classes;

}

?>

如此输出结果在 body_class() 的基础上新增 zdy_class。

四、body_class 和默认样式的牵连

4.1、背景说明

我们主题左边有一个

，右边有一个

，他们都在一个960px宽

里。

content div为600px宽，sidebar div为360px宽。

4.2、问题说明

但是，当浏览单独的帖子页面，我让我的主题不显示sidebar。

现在，我们只剩下一个content div。不幸的是，container div为960px宽，而我们的content div却只有600px宽。

我们难道用一个大空白区填充我们的工具栏？该如何解决呢？使用body class这将很简单。

4.3、解决方法

我们只需要针对

在帖子页的情况进行定义。

在CSS里为：.single #content{ width: 960px; }

通过这样做，在帖子页面，content div为960px宽。我们正在增加一个简单有选择性的CSS系统。