WordPress2.8 body_class()函数

原文:WordPress 2.8 and the body_class() Function
翻译:Epile
首发于译言

2月7日,在我随意浏览Wordpress的主干代码时,发现wp-includes/post-template.php里面有一个非常酷的新功能。

从Wordpress2.8开始,主题将能够使用body_class()函数在开放<body>标签代替特殊class(location-specific classes),通常位于大多数主题的header.php文件。

为什么它是重要的?因为它开创了只用CSS就能够改变几乎一切的外观。

在我们进入body_class()函数应用之前,让我们先了解一些技术细节。

body_class()生成什么?

body_class()函数在Wordpress2.7几乎和post_class()有同样的运行方式,唯一不同的是class的生成。body_class()函数生成的class大多是根据你的访问者在网站的位置。例如,如果访问者在你的博客首页,但你没有设置一个静态主页,函数和类可能会产生如下所示:

<body class=”home blog”>

注意,这些是两个不同的class,你可以选择任何一个。

然而,如果你在某个帖子,body标签看起来可能是这样:

<body class=”single postid-64″>

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

<body class=”page page-id-3 parent-page-id-0 page-template-default”>

从本质上讲,body_class()会生成基于内容的动态CSS class,以及在什么情况下浏览。例如,如果你是注册用户,且已经登录,body_class()会在body标签生成一个登录class。

以下为可用的body class的完整列表:

  • 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
  • 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)

如何为自己的主题添加body_class()

这实际上是一件容易的事情。假设你正在使用Wordpress2.8,所有你需要做的就是增加一个新的模板标记。你需要找到这些模板文件生成开放<body>标签的位置,它通常在header.php文件里。

当你找到<body>标签的位置后,请把它更改为:

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

保存文件并上传到服务器,你就大功告成了。

使用动态Body Class

现在我们有了body class,有什么大不了呢?我将会解释:

除了HTML元素外,<body>标签包围着其他所有的HTML代码。因此,body class允许我们对网页任何元素进行修改,具体到当前页面。

也许通过实例更容易理解。

我们主题左边有一个<div id=”content”>,右边有一个<div id=”sidebar”>,他们都在一个960px宽<div id=”container”>里。content div为600px宽,sidebar div为360px宽。但是,当浏览单独的帖子页面,我让我的主题不显示sidebar。现在,我们只剩下一个content div。不幸的是,container div为960px宽,而我们的content div却只有600px宽。

我们难道用一个大空白区填充我们的工具栏?该如何解决呢?使用body class这将很简单。我们只需要针对<div id=”content”>在帖子页的情况进行定义。在CSS里为:

.single #content{
width: 960px;
}

通过这样做,在帖子页面,content div为960px宽。

我们正在增加一个简单有选择性的CSS系统。

新增body_class()的class

在某些情况下,你将要添加自己的Class到body_class()里。如果你发现自己处在这种情况下,这些有些方法可以做到这一点。

首先,最简单的方法是通过自定义Class函数调用body_class()。例如:

<body <?php body_class(‘my-class’); ?>>

通过这样做,我们现在告诉body_class()函数增加my-class的输出。

第二,困难但更灵活的方式是,利用Wordpress的过滤器,增加新的body class。在这种情况下,我们将使用get_body_class()函数中的body_class过滤器。如果你不清楚过滤器如何运行,我将会在不久后写一篇文章。在此之前,看看你是否能够赶上来,非常容易。

这是增加使用过滤器增加class的例子:

add_filter(‘body_class’,'my_body_classes’);
function my_body_classes($classes, $class) {
// add ‘my-class’ to the $classes array
$classes[] = ‘my-class’;
// return the $classes array
return $classes;
}
?>

通过使用这个方法,我们允许在第一种方法中无法使用自己的条件以及其他很酷的事情。

延伸阅读

如果你想知道更多关于body_class()函数的信息,以下为一些我推荐的资源:

您可能还对以下内容感兴趣

目前有6条评论 Add your own

  1. 粥小卜 说道:

    你突然总是写这么专业的东东我有点不适应~~~

  2. 粥小卜 说道:

    ……那你可以写跑步的时候看到几个美女这类的东西 哈哈哈哈

  3. 粥小卜 说道:

    你也河蟹了~~~ 没更新

  4. bolo 说道:

    这个新鲜,学习了

  5. [...] 原文:WordPress 2.8 and the body_class() Function翻译:Epile译文来自:http://epile.cn/blog/html/wordpress-2-8-and-the-body_class-function.html [...]

我有话说..