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