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)
5 Comments & Tracbacks