博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
WordPress的body_class()函数详解
阅读量:6696 次
发布时间:2019-06-25

本文共 2060 字,大约阅读时间需要 6 分钟。

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的完整列表:

rtlhomeblogarchivedatesearchpagedattachmenterror404single postid-(id)attachmentid-(id)attachment-(mime-type)authorauthor-(user_nicename)categorycategory-(slug)tagtag-(slug)pagepage-parentpage-child parent-pageid-(id)page-template page-template-(template file name)search-resultssearch-no-resultslogged-inpaged-(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()放到<body>标签里。它通常在header.php文件里。

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

>

  

3. 使用动态Body Class

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

除了html元素外,标签包围着其他所有的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系统。

 

4. 新增body_class()的class

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

首先,最简单的方法是通过自定义Class函数调用

body_class()

>

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

第二,困难但更灵活的方式是,利用Wordpress的过滤器,增加新的body class。在这种情况下,我们将使用

get_body_class()

函数中的body_class过滤器。如果你不清楚过滤器如何运行,我将会在不久后写一篇文章。在此之前,看看你是否能够赶上来,非常容易。

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

  则输出结果在body_class()的基础上新增zdy_class

转载地址:http://llpoo.baihongyu.com/

你可能感兴趣的文章
(UML两个汇总)九种图。
查看>>
android 安装应用程序apk安装不了
查看>>
买面包和IoC
查看>>
Filter基金会
查看>>
spring+websocket综合(springMVC+spring+MyBatis这是SSM框架和websocket集成技术)
查看>>
android js调试
查看>>
在Linux中创建静态库.a和动态库.so
查看>>
jQuery表格排序总成-tablesorter
查看>>
java 后台开发关键词解释
查看>>
Spring web应用最大的败笔
查看>>
转置位矩阵
查看>>
XAMPP on Mac 组态 Virual Host
查看>>
一个奇怪的注意事项TNS-12545 TNS-12560 TNS-00515
查看>>
Struts2_2_第一Struts2应用
查看>>
SQLite/嵌入式数据库
查看>>
【iOS7一些总结】9、与列表显示(在):列表显示UITableView
查看>>
scp
查看>>
MINA2 源代码学习--源代码结构梳理
查看>>
JSON数组分配输出每个li
查看>>
主机Window不能访问该虚拟机Linux Samba文件服务提供了一个文件夹
查看>>