body_class()関数はbodyタグにクラスを表示させる関数です。表示しているページのタイプやWordPressの設定に合わせて自動的にクラスを追加してくれます。投稿タイプ毎のCSS切り替えなどに重宝するので、自作テーマを作る時には忘れずに書くようにしましょう。
body_class()の実装方法
下記のようにボディタグに設定するだけです。echoは必要ありません。
<body <?php body_class(); ?>>
//....code
</body>参考：テンプレートタグ/body class – WordPress Codex 日本語版
オリジナルのクラスを追加する方法
テーマを作っていると設定状況を反映するためにオリジナルのクラスを追加したいことがあると思います。特にカスタマイズ機能が豊富なテーマだとbodyに大量のクラスが追加されていたりします。その是非はともかくとして、オリジナルのクラスの追加は簡単にできます。
引数に指定
引数にクラス名を書くだけでよいです。複数の場合は半角スペースで区切ります。先頭のクラスにはスペースは必要ありません
<body <?php body_class('my＿class my_class-2'); ?>>フィルターを使って追加
別の方法としてフィルターを使う方法もあります。ページ毎や設定によって動的にクラス名を変えたい場合はこちらの方が便利かもしれません。
add_filter( 'body_class', 'my_class_names' );
function my_class_names( $classes ) {
// クラスが入った配列 $classeｓ にmy_classを追加
$classes[] = 'my_class';
return $classes;
}表示されるクラス
参考までに、デフォルトで追加されるクラスは次のようになります。クラス名を見れば意味は大体わかると思います。これらを利用してCSSをつくるとデザインの切り替えに便利です。
- rtl
- home
- blog
- archive
- date
- search
- paged
- attachment
- error404
- single postid-(id)
- attachmentid-(id)
- attachment-(mime-type)
- author
- author-(user_nicename)
- category
- category-(slug)
- tag
- tag-(slug)
- page-parent
- page-child parent-pageid-(id)
- page-template page-template-(template file name)
- search-results
- search-no-results
- logged-in
- paged-(page number)
- single-paged-(page number)
- page-paged-(page number)
- category-paged-(page number)
- tag-paged-(page number)
- date-paged-(page number)
- author-paged-(page number)
- search-paged-(page number)
関連記事
-
アラサー表記にも対応！WordPressで年齢を自動更新するショートコードWordPressカスタマイズ -
WordPressでパスワード保護されている記事の本文以外も非表示にする方法WordPressカスタマイズ -
WordPressでPHPの値をJavaScriptに渡す方法WordPressカスタマイズ
-
WordPressで特定の画像だけscrset属性を無効にするWordPressカスタマイズ
-
IE･Edgeをobject-fitに対応させる（WordPress編）WordPressカスタマイズ
-
WordPressの管理画面に独自のスクリプトやスタイルを読み込ませる方法まとめWordPressカスタマイズ
コメント
この記事へのコメントはありません。