wordpress的body_class()函数,顾名思义,这个函数根据不同的页面类型为body标签生成class选择器,从而让设计人员可 以各方便灵活的控制不同页面中的各个元素。本文对这一函数进行了详细的解析,包括该函数生成了些什么,所包含的属性值有哪些,以及如何使用和如何新增 class选择器等等。
1、body_class()生成什么?
body_class()函数在Wordpress2.7几乎和post_class()有同样的运行方式,唯一不同的是class生成的名称。 body_class()函数生成的class大多是根据你的访问者在网站的位置。例如,如果访问者在你的博客首页,但你没有设置一个静态主页,函数和类 可能会产生如下所示:
生成了两个class类
如果你在某个帖子,body标签看起来可能是这样:
如果你正在浏览一个页面,body_class()会生成这样:
从本质上讲,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)
2. 如何添加body_class()
假设你正在使用Wordpress2.8以上的版本,通常body_class()放到
标签里。它通常在header.php文件里。当你找到标签的位置后,请把它更改为:
3. 使用动态Body Class
现在我们有了body class,有什么大不了呢?我将会解释:
除了html元素外,标签包围着其他所有的HTML代码。因此,body class允许我们对网页任何元素进行修改,具体到当前页面。
也许通过实例更容易理解:
我们主题左边有一个