wordpress的body_class()函数,顾名思义,这个函数根据不同的页面类型为body标签生成class选择器,从而让设计人员可以各方便灵活的控制不同页面中的各个元素。本文对这一函数进行了详细的解析,包括该函数生成了些什么,所包含的属性值有哪些,以及如何使用和如何新增class选择器等等。

1、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)

  

2. 如何添加body_class()

假设你正在使用Wordpress2.8以上的版本,通常body_class()放到<body>标签里。它通常在header.php文件里。

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

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

  

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 <?php body_class('my-class'); ?>>

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

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

get_body_class()

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

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

<?php

    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

WordPress的body_class()函数详解的更多相关文章

  1. fork()函数详解

    linux中fork()函数详解(原创!!实例讲解) (转载)    一.fork入门知识 一个进程,包括代码.数据和分配给进程的资源.fork()函数通过系统调用创建一个与原来进程几乎完全相同的进程 ...

  2. (转)fock函数详解

    转自:http://www.cnblogs.com/bastard/archive/2012/08/31/2664896.html linux中fork()函数详解  一.fork入门知识 一个进程, ...

  3. 【转】linux 中fork()函数详解

    在看多线程的时候看到了这个函数,于是学习了下,下面文章写的通俗易懂,于是就开心的看完了,最后还是很愉快的算出了他最后一个问题. linux 中fork()函数详解 一.fork入门知识 一个进程,包括 ...

  4. Linux中fork()函数详解(转载)

    linux中fork()函数详解 一.fork入门知识 一个进程,包括代码.数据和分配给进程的资源.fork()函数通过系统调用创建一个与原来进程几乎完全相同的进程,也就是两个进程可以做完全相同的事, ...

  5. malloc 与 free函数详解<转载>

    malloc和free函数详解   本文介绍malloc和free函数的内容. 在C中,对内存的管理是相当重要.下面开始介绍这两个函数: 一.malloc()和free()的基本概念以及基本用法: 1 ...

  6. NSSearchPathForDirectoriesInDomains函数详解

    NSSearchPathForDirectoriesInDomains函数详解     #import "NSString+FilePath.h" @implementation ...

  7. JavaScript正则表达式详解(二)JavaScript中正则表达式函数详解

    二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...

  8. Linux C popen()函数详解

    表头文件 #include<stdio.h> 定义函数 FILE * popen( const char * command,const char * type); 函数说明 popen( ...

  9. kzalloc 函数详解(转载)

    用kzalloc申请内存的时候, 效果等同于先是用 kmalloc() 申请空间 , 然后用 memset() 来初始化 ,所有申请的元素都被初始化为 0. view plain /** * kzal ...

随机推荐

  1. 【转】Java时间日期包 JodaTime

    maven: http://mvnrepository.com/artifact/joda-time/joda-time 1, 获取每天的零点 DateTime dt=new DateTime().w ...

  2. JAVA Day7

    6  方法   1.格式[访问控制符] void返回值类型 方法名(参数列表:数据类型 参数名); 2.类的方法: *用来定义类的某种行为或功能 * 3.方法的返回值 *如果有返回值,方法中必须要使用 ...

  3. Android拓展系列(11)--打造Windows下便携的Android源码阅读环境

    因为EXT和NTFS格式的差异,我一直对于windows下阅读Android源码感到不满. 前几天,想把最新的android5.0的源码下下来研究一下,而平时日常使用的又是windows环境,于是专门 ...

  4. express-2 express介绍

    脚手架 大多数项目都需要一定数量的"套路化"代码,所有可以创建一个通用的项目骨架,每次开始新项目时,只需复制这个骨架,或者说是模板. RoR把这个概念向前推进了一步,它提供了一个可 ...

  5. Hi,我还没死(屎)

    HDNOIP没考好,紧接着NOIP又到了,加紧练习:-)

  6. https://www.nginx.com/blog/introduction-to-microservices/

    https://www.nginx.com/blog/introduction-to-microservices/

  7. (转)STORM启动与部署TOPOLOGY

    STORM启动与部署TOPOLOGY 启动ZOOPKEEPER zkServer.sh start 启动NIMBUS storm nimbus & 启动SUPERVISOR storm sup ...

  8. struts1 核心类

    http://ajh-123.blog.163.com/blog/static/161727409201031455634475/ 1.ActionServlet类: 是一个前端控制器,将reques ...

  9. Android Mvc 实现

    android studio java目录结构: Activity package目录:Controller 层 Model package目录:Model 层 View package目录:View ...

  10. ACM: Racing Gems - 最长递增序列

    Racing Gems   You are playing a racing game.  Your character starts at the x axis (y = 0) and procee ...