body_class を使ってページごとに違う表示をする

body_classで出力されるクラスをつかってページごとに違ったcssをつけることができます。

body_classはbody要素用のテンプレートタグです。
下記のようにbodyタグに記述すれば、表示するページの種類などによってbodyに自動的にクラスを付加してくれます。そのクラスを使いcssをページごとに変えたりする事ができます。

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

body_class( $class );
$class にはクラス名が入ります。独自のクラスを付けることもできます。

使用例

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

トップページには body class=”home” というクラスが付くので、下のようにcssに記入すれば、トップページのヘッダーだけ背景を黒にしたりできます。

.home #header{
 background-clor:black;
}
#header{
 background-clor:grey;
}

独自クラスを付ける

例えば特定のカテゴリーに独自クラスを付けるにはfunction.phpに下記のように記入します。

add_filter('body_class','my_class_names');
function my_class_names($classes) {
	if(in_category('カテゴリー名')){
     // add 'class-name' to the $classes array
	$classes[] = 'クラス名';
	// return the $classes array
        }
	return $classes;
}

クラス一覧

表示する条件やページによって下記のクラスをbodyに付加します。

(page number)が付くものは2ページ目以降に表示され()にはページ数が入る。
(id) が付くものは個別のidがはいる。

・フロントページ
 home

・投稿記事が表示されるページ
 blog

・カテゴリーや日別などのアーカイブページ
 archive

・固定ページ
 paged ,page-template ,paged-(page number)
 page-id-(page_id) , page-template-(template file name)
 page-parent 親ページ , page-paged-(page number)
 parent-pageid-(id) , page-child 子ページ

・個別記事ページ
 single postid-(id)
 single-paged-(page number)

・カテゴリーページ
 category , category-(slug)
 category-paged-(page number)

・日付ページページ
 date,date-paged-(page number)

・検索ページ
 search , search-paged-(page number)
 search-results 検索結果あり , search-no-results 検索結果なし

・ログイン状態
logged-in , admin-bar (since 3.1)

・タグページ
tag ,tag-(slug),tag-paged-(page number)

・著者ページ
author , author-(user_nicename) , author-paged-(page number)

・添付ファイルページ
attachment , attachmentid-(id) , attachment-(mime-type)

・404エラーページ
error404

・その他
 rtl , ( text_direction: rtl )
 tax-(taxonomy name) (since 3.1)
 term-(term name) (since 3.1)