body_class関数の活用法
はじめに
概要
WordPressの構築において便利な関数「body_class」を紹介します。この関数を使うことで、各ページごとに異なるデザインを実現することができます。そのため、デザインの幅が広がり、自由度が高まります。ぜひ、この関数を活用してみてください。
※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。
body_classとは
この関数を使用すると、ページ固有のクラスが動的に付与されます。
以下はfront-page.phpに記述した例を見てみましょう。
front-page.php
<body class="home blog logged-in admin-bar customize-support">
様々なクラスがありますが、特に注目したいのはhomeクラスです。このクラスはfront-page.phpのみに適用されるクラスであり、このクラスを使えば独自のデザインを作ることができます。
関数の使い方
コード
<body <?php body_class(); ?>>
上記のようにbodyタグに記述することで独自のクラスが付与されます。
以下はsingle.phpに記述した内容です。
single.php
<body class="wordpress-template-default single single-wordpress postid-72 logged-in admin-bar customize-support">
上記で注目して欲しいクラスは postid-72 です。このクラスがこのページ独自のクラスとなります。その他のページも同様に postid-◯◯ といったクラスが付与され、デザインを記述することができます。
まとめ
- そのページ独自のクラスがbodyタグに付与されるため、そのページ固有のデザインを実現できる
- メニューの項目の色をアクティブにする等、スタイリングが容易になる。
- bodyタグは全ての要素の親要素であるため、編集がしやすくなる