Web活のロゴ

Web制作Output&初心者のための徹底ガイド

body_class関数の活用法

2023.06.16Wordpress関数。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タグは全ての要素の親要素であるため、編集がしやすくなる