body_class

Posted on by Eternal-tears
Sponsored Link

WordPress2.8では、テーマは、テーマがbodyタグに新しいテンプレートタグを持つことによって、CSSで新しいスタイルをより効果的にテーマの作成者を支援するでしょう。新しいテンプレートタグはbody_classと呼ばれます。この関数は、body要素に異なるクラスを与えて、通常のheader.php’のHTMLのbodyタグに追加する事が出来ます。

Sponsored Link

In WordPress 2.8, themes have a new template tag for the body tag which will help theme authors to style more effectively with CSS. The new 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のテンプレートタグ使用方法

<?php body_class( $class ); ?>

body_classは、class属性の次の値を1つまたは複数含めることができます。

The body_class may include one or more of the following values for the class attribute.

  • 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-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)

デフォルトの値

この資料では素案です。著者は、まだこの文章に取り組んでいるので、著者の許可なしにこの編集をしないでください。この記事内のコンテンツは、まだ確認すること、または有効ではありません。この情報は変更する場合があります。

This article is a ROUGH DRAFT. The author is still working on this document, so please do not edit this without the author’s permission. The content within this article may not yet be verified or valid. This information is subject to change.

Dafault Value
page type (condition) class remarks
If Reading Settings > Front page displays – Your latest posts Main Blog Page (is_front_page, is_home) home blog [ paged paged-n ]
If Reading Settings > Front page displays – A static page selected as “Front page” (is_front_page) home page page-id-ID [*] * see also is_page
selected as “Posts page” (is_home) blog [ paged paged-n ]
is_archive is_author archive author author-user_nicename [ paged paged-n author-paged-n ]
is_category archive category category-slug [ paged paged-n category-paged-n ]
is_tag archive tag tag-slug [ paged paged-n tag-paged-n ]
is_date archive date [ paged paged-n date-paged-n ]
is_search find search search-results [ paged paged-n search-paged-n ]
no results search search-no-results [ paged paged-n search-paged-n ]
is_404 error404
is_single single postid-ID [ paged paged-n single-paged-n]
is_attachment attachment single postid-ID attachmentid-postID attachment-mime-type
is_page – page page-id-ID [ page-template page-template-template_file_name ] [ paged paged-n page-paged-n ]
parent page page-id-ID page-parent [ page-template page-template-template_file_name ] [ paged paged-n page-paged-n ]
child page page-id-ID page-child parent-pageid-parent-ID [ page-template page-template-template_file_name ] [ paged paged-n page-paged-n ]
(additional class) is_user_logged_in logged-in
is_paged paged
paged < 2 paged
paged > 1 paged-n page-paged-n
text_direction: rtl rtl

body_classのパラメーター

どのようにPHPの関数スタイルのパラメーターを持つタグにパラメータを渡すのか。

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

class

(string or array) (optional) 1つ或いはそれ以上のクラスは、クラス属性に1つのスペースで区切って追加します。

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

Default: null

例

実装

次の例では、テーマのbody_classテンプレートタグの実装する方法を表示しています。

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

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

実際のHTML出力は、この（デフォルトのWordPressのインストールから’About’ページ）いくつかの共通点ようになります：

The actual HTML output might resemble something like this (the ‘About’ page from a default WordPress installation):

<body class="page page-id-2 page-template page-template-default logged-in">

WordPressのテーマスタイルシート内に、適切なスタイルなどを追加します。

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

.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 */

その他のクラスを追加する方法

クラスはデフォルトの表示に制限されます。

The classes are restricted to the defaults listed.

クラスを追加するためには、テンプレートタグのパラメーターは追加する事で可能となります。例えば、任意のテンプレートファイルに固有のクラスを追加します：

To add more classes, the template tag’s parameter can be added. For example, to add a unique class to any template file:

<body <?php body_class('class-name'); ?>>

結果はこのようになります：

The results would be:

<body class="class-name post post-id-24">

フィルターによってクラスを追加する方法

body_class関数のフィルタリング機能によって、body classesを追加することができます。

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

あなたのニーズを満たすためにmy_class_names と class-nameを変更して、WordPressテーマのfunctions.phpファイルに次を追加します。

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

// Add specific CSS class by filter
add_filter('body_class','my_class_names');
function my_class_names($classes, $class) {
	// add 'class-name' to the $classes array
	$classes[] = 'class-name';
	// return the $classes array
	return $classes;
}

シングルポストのページビューとテンプレートファイルにカテゴリークラスを追加するために、functions.phpに次のコードを追加します。

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

// 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');

ソースコード

body_class()は、wp-includes/post-template.php内に位置しています。

body_class() is located in wp-includes/post-template.php.

変更ログ

Since: 2.8

関連テンプレートタグ

the_ID, the_title, the_title_attribute, single_post_title, the_title_rss, the_content, the_content_rss, the_excerpt, the_excerpt_rss, wp_link_pages, next_post_link, next_posts_link, previous_post_link, previous_posts_link, posts_nav_link, sticky_class, the_meta

Sponsored Link