wordpress2.8から使えるタグbody_class

日本語ではあまり解説がなかったので記録。

Wordpress2.8から追加された新しいテンプレートタグの一つ、body_classに関する解説ページを英語で見つけたので、少し説明してみるよ。

参考：WordPress 2.8 and the body_class() Function

参考：How to detect the visitor browser within WordPress

2.7から、post_classというタグが追加されていた。

記事のループを囲むdiv等の開始タグ内にこれを挿入すると、CSSの一連のclassが記事に応じて挿入される。

これのbody版がこのbody_classということ。

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

大きな違いは、生成するclassが違うこと。サイトの閲覧しているページに応じて生成するclassが変わる。

もしサイトのトップを見ていれば、home blogといったclassが生成され、ページ部分を見ていれば、page-id-3 parent-page-id-0 page-template-defaultなどが生成される。

けっこうこれは便利な機能だ。ていうかこれでだいぶ訪問者に応じたサイト構成を提供できるんではないだろうか。

生成されるタグには以下のものがある：

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

このbody_classの判別材料も追加できるみたいだ。

function.phpにadd_filterを追加し、ブラウザ判別の材料を入れてあげれば、各ブラウザごとのclass セレクタも入れてくれる。

以下のadd_filter文をfunction.phpに書き込む。


add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
	global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

	if($is_lynx) $classes[] = 'lynx';
	elseif($is_gecko) $classes[] = 'gecko';
	elseif($is_opera) $classes[] = 'opera';
	elseif($is_NS4) $classes[] = 'ns4';
	elseif($is_safari) $classes[] = 'safari';
	elseif($is_chrome) $classes[] = 'chrome';
	elseif($is_IE) $classes[] = 'ie';
	else $classes[] = 'unknown';

	if($is_iphone) $classes[] = 'iphone';
	return $classes;
}
?>