- ·上一篇文章:wordpress微拍web app正在开发中…
- ·下一篇文章:禁用wordpress自动裁剪多种大小图片,保留一种大小
WordPress 中 body_class 函数详解
body_class 函数是什么?用来做什么?
有一定前端开发经验的人,往往会在 body 标签上加上一些类,变成类似下面这样:
1 <span class="token tag"><span class="token punctuation"><</span>body <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span>"home"</span><span class="token punctuation">></span></span>.....<span class="token tag"><span class="token punctuation"></</span>body<span class="token punctuation">></span></span>
因为同一个网站中,很多页面的结构是相同的,但是有时某个相同结构(.header)的样式却要求不同。这样如果使用相同的结构,就没法修改样式,如果再新建结构,就相当于重做了一个页面,增加工作量。这时,也可以在 body 标签上加上一个页面对应的类(blog),之后对于这样一个与其他页面不同样式的需求,就可以使用下面语句来实现:
1 <span class="token selector">.blog .header</span><span class="token punctuation">{</span>.....<span class="token punctuation">}</span>
body_class 这个函数就是用来给 body 标签添加类的函数。
body_class 函数如何使用?
body_class 函数的使用方法非常简单,只需要用下面语句替换掉原来的 body 标签即可:
1 <span class="token operator"><</span>body <span class="token deliminator"><?php</span> body_class<span class="token punctuation">(</span><span class="token variable">$class</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token deliminator">?></span><span class="token operator">></span>
其中有一个参数 class ,它可以是一个字符串或者是数组,数组里的内容会以空格为分割,插入到 body 标签中的 class 属性中。
body_class 函数会输出什么类?
既然它会自动的输出类让前端方便进行控制,那么了解这个函数的输出规则就非常有必要了,下面针对不同类型的页面介绍一下它的输出规则:
首页(Front Page)
这里的首页,就是打开你的博客看到的第一个页面,这个页面是可以在 WordPress 后台进行设置的,可以选择显示文章列表或者是一个静态的页面(Page)。
任意的首页都包含
1 | home |
类。
- 如果网站首页显示文章列表,那么输出:1home blog
这两个类。
- 如果网站首页显示静态页面,将会输出:1home page
类。
博客文章索引页面
博客文章索引页面都包含
1 | blog |
类。
- 如果博客文章页面显示在首页,将会输出:1home blog
类。
- 如果博客文章显示在某个指定的静态页面中,将会输出:1page blog
类。
文章页面(Single Post)
所有的文章都会输出:
1 | single postid-{ID} |
这两个类(ID 为当前文章唯一的 ID )。
- 普通的文章页面输出:1single-post
类
- 自定义文章类型的文章页面输出:1single-{posttype}
类
- 如果支持文章格式的话:
- 指定了文章格式的文章会输出:1single-format-{format}
- 如果当前文章没有指定文章格式:1single-format-standard
- 指定了文章格式的文章会输出:
- 对于附件页面(attachment pages)会输出:1attachment single-attachment attachmentid-{ID} attachment-mime-type
存档页面(Archives)
存档页面都有
1 | archive |
类。
- 日期(Date)存档索引页面输出:1date
- 自定义文章类型的存档索引页面输出:1post-type-archive post-type-archive-{posttype}
- 作者存档页面输出:1archive author author-{user_nickname}
- 标签存档页面输出:1archive tag tag-{slug}
- 分类存档页面输出:1archive category category-{slug}
- 自定义分类(Taxonomy)存档页面输出:1tax-{taxonomy} term-{term} term-{ID}
- 自定义文章格式存档页面输出:1tax-{post_format} term-post-format-{format} term-{ID}
页面(Page)
所有静态页面都输出
1 | page |
和
1 | page-id-{ID} |
类。
页面层次中:
- 父级页面输出:1page-parent
- 子级页面输出:1page-child parent-pageid-{ID}
自定义页面模版中:
- 应用了页面模版的页面会输出:1page-template page-template-{directory}{filename}_php
- 没有指定页面模版的页面会输出:1page-template-default
搜索页面
搜索结果页面都有
1 | search |
类。
- 带有结果的搜索页面:1search-results
- 没有结果的搜索页面:1search-no-results
分页页面或者多页码的页面
分页页面通常是指文章索引页面底部的翻页。
此外文章内也有分页页面。一个页面或者文章太长的时候,通常会截断成多个子页面,通过翻页查看下一部份内容。对于所有带有页码的页面,都包含 paged 类。当前页面处于某个带有页码页面的第二页之后的页面,会输出 paged 和 paged-{n} 类。
- 文章带页码页面:1single-paged-{n}
- 静态页面带页码:1page-paged-{n}
- 分类存档索引页面:1category-paged-{n}
- 标签存档索引页面:1tag-paged-{n}
- 日期存档索引页面:1date-paged-{n}
- 作者存档索引页面:1author-paged-{n}
- 搜索结果页面:1search-paged-{n}
- 自定义文章类型索引页面:1post-type-paged-{n}
404 错误页面
错误页面输出
1 | error404 |
类。
登陆
当用户登陆 WordPress 之后,会在所有页面输出
1 | logged-in |
类。
文字方向
如果文字的方向设置为了 “右向左” 就会输出
1 | rtl |
类。
自定义背景
如果使用了自定义背景功能来显示背景图片或者颜色,会输出
1 | custom-background |
类。
超级管理员工具条
如果管理员工具条在顶部出现了,会输出:
1 | admin-bar no-customize-support |
类。
介绍完了 body_class 函数根据当前页面自动输出类的规则之后,我们来介绍一下如何自定义输出的类。
自定义 body_class 函数输出的类
在前面的使用中已经提到了这个函数的唯一的参数,传递进去值就会输出相应的参数,这里不再赘述。下面介绍一下通过条件判断和过滤器自定义输出类。
通过使用 body_class filter 来实现,大体框架如下:
1
2
3
4
5 add_filter<span class="token punctuation">(</span><span class="token string">'body_class'</span><span class="token punctuation">,</span><span class="token string">'wpjam_class_names'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> wpjam_class_names<span class="token punctuation">(</span><span class="token variable">$classes</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token variable">$classes</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'class-name'</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token variable">$classes</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
上例中,我们为 classes 这个数组变量增加了一个新键值 “class-name” 并返回给 body_class filter ,即可实现在所有页面中输出 “class-name” 这个类。
但是这样自定义是完全没有什么价值的,我们往往希望通过更详细的判断语句来判断出某些特定的页面,然后增加相应的类。这样,就需要 WordPress 强大的条件判断标签了。这里推荐一下 我爱水煮鱼 博客翻译编写的 WordPress 条件判断标签及其使用方法。下面就来试一下:
1
2
3
4
5
6 add_filter<span class="token punctuation">(</span><span class="token string">'body_class'</span><span class="token punctuation">,</span><span class="token string">'wpjam_class_names'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> wpjam_class_names<span class="token punctuation">(</span><span class="token variable">$classes</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span> is_page<span class="token punctuation">(</span> <span class="token string">'some-page'</span> <span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token variable">$classes</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'some-page'</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token variable">$classes</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
上面例子很简单,使用 is_page 判断标签判断当前页面的 slug 是否为 some-page ,如果是,就为当前页面的 body 标签增加 some-page 类。当然,因为默认输出的已经比较详细了,所以这个例子只作为抛砖引玉之用。
需要注意一点,WordPress 系统在不断的升级,可能会对本文中的输出类的规则有所变更,如果你发现某个规则是错误的,请以实际输出为准。
总之 body_class 差不多就这么些事情,使用它可以方便前端工作,提高灵活性。所以,为了你的主题更具有扩展性,务必要在 body 标签中加入这个函数哦!
WordPress 中 body_class 函数详解