body_class()根据不同的页面类型为body标签生成class

目录

描述

Themes have a template tag for the body tag which will help theme authors to style more effectively with CSS. The Template Tag is called body_class. This function gives the body element different classes and can be added, typically, in the header.php's HTML body tag.

body_class() 描述

用法

<body <?php body_class$class ); ?>

body_class() 用法

参数

How to pass parameters to tags with PHP function-style parameters

class

(string or array) (可选) One or more classes to add to the class attribute, separated by a single space.

默认值: null

body_class() 参数

示例

Implementation

The following example shows how to implement the body_class template tag into a theme.

/* ----------------------------------
 * wordpress之魂 © http://wphun.com
 * ---------------------------------- */
<body <?php body_class(); ?>>

The actual HTML output might resemble something like this (the About the Tests page from the Theme Unit Test):

/* ----------------------------------
 * wordpress之魂 © http://wphun.com
 * ---------------------------------- */
<body class="page page-id-2 page-parent page-template-default logged-in">

In the WordPress Theme stylesheet, add the appropriate styles, such as:

/* ----------------------------------
 * wordpress之魂 © http://wphun.com
 * ---------------------------------- */
.page {
	/* styles for all posts within the page class */
}
.page-id-2 {
	/* styles for only page ID number 2 */
}
.logged-in {
	/* styles for all pageviews when the user is logged in */
}

Adding More Classes

By default, the only classes will be those described above.

To add more classes, the template tag's parameter can be added. For example, to add a unique class to the same template used above:

/* ----------------------------------
 * wordpress之魂 © http://wphun.com
 * ---------------------------------- */
<body <?php body_class( 'class-name' ); ?>>

The results would be:

/* ----------------------------------
 * wordpress之魂 © http://wphun.com
 * ---------------------------------- */
<body class="page page-id-2 page-parent page-template-default logged-in class-name">

Add Classes By Filters

You can add additional body classes by filtering the body_class function.

To add the following to the WordPress Theme functions.php file, changing my_class_names and class-name to meet your needs:

/* ----------------------------------
 * wordpress之魂 © http://wphun.com
 * ---------------------------------- */
// Add specific CSS class by filter
add_filter( 'body_class', 'my_class_names' );
function my_class_names( $classes ) {
	// add 'class-name' to the $classes array
	$classes[] = 'class-name';
	// return the $classes array
	return $classes;
}

To add a category class to single post pageviews and template files, add the following to the functions.php.

/* ----------------------------------
 * wordpress之魂 © http://wphun.com
 * ---------------------------------- */
// add category nicenames in body and post class
function category_id_class( $classes ) {
	global $post;
	foreach ( get_the_category( $post->ID ) as $category ) {
		$classes[] = $category->category_nicename;
	}
	return $classes;
}
add_filter( 'post_class', 'category_id_class' );
add_filter( 'body_class', 'category_id_class' );

Add Sidebar Classes

You can add additional body classes by filtering the body_class function, but what if you want to add a class only when the sidebar.php file is being shown? Here's a working example you can post in your themes functions.php file to add a sidebar class to the output of body_class. From: Add CSS Class to body when Sidebar is Present

/* ----------------------------------
 * wordpress之魂 © http://wphun.com
 * ---------------------------------- */
add_action( 'wp_head', create_function( '', 'ob_start();' ) );
add_action( 'get_sidebar', 'my_sidebar_class' );
add_action( 'wp_footer', 'my_sidebar_class_replace' );
 
function my_sidebar_class( $name = '' ) {
	static $class = 'withsidebar';
	if ( ! empty( $name ) ) {
		$class .= ' sidebar-' . $name;
	}
	my_sidebar_class_replace( $class );
}
 
function my_sidebar_class_replace( $c = '' ) {
	static $class = '';
	if ( ! empty( $c ) ) {
		$class = $c;
	} else {
		echo str_replace( '<body class="', '<body class="' . $class . ' ', ob_get_clean() );
		ob_start();
	}
}

body_class() 示例

相关