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)

Related Article

5 Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル コンテンツ スライドショー jQueryプラグイン php 引っ越し 素材 お知らせ JavaScript Facebook CSS カテゴリー 投稿タイプ IE HTML5 Shareボタン seo レスポンシブ Photoshop タクソノミー ナビゲーション カスタムメニュー Git Macアプリ サイドバー WPセキュリティ SVG iTunes PHPリファレンス API WP使い方 query_posts データベース get_posts() 条件分岐 コメント function RSS スマートフォン Sass/Compass さくらVPS