body_classでクラス属性を出力する

2016年6月27日

HTMLの<body>タグにbody_classタグを設定すると、トップやアーカイブなどページごとに異なるクラス属性を出力してくれます。この機能を利用してCSSでページごとに異なるレイアウト/デザインを指定することができます。

 

スポンサーリンク

 

 

body_classタグは<body>タグに下記のように記述します。

 

 

 

出力例


 

以下各ページごとの出力例です(ログインしていない場合)。

 

 

トップページ

 

 

トップページ(フロントページの表示に固定ページ(page.php)を選択した場合)

 

 

個別記事ページ

 

 

固定ページ

 

デフォルトテンプレート(page.php)

 

inquiry.phpという名前のカスタムテンプレートを作成した場合

 

関連ページ

固定ページを作成する[page.php][カスタムテンプレート]

 

 

日付けアーカイブページ

 

 

カテゴリーアーカイブ(phpというスラッグ名のカテゴリーの場合)

 

 

カスタム投稿タイプ

 

個別記事(single-book.phpという名前のテンプレートを利用した場合)

 

アーカイブ(archive-book.phpという名前のテンプレートを利用した場合)

 

関連ページ

カスタム投稿タイプを作成する[register_post_type]

 

 

 

 

参照ページ


 

WordPress
Codex日本語版
テンプレートタグ/body class

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー