仙台のホームページ制作・システム開発・ウェブコンサルティングはアド・エータイプへ。

WordPressのbody_class関数でbody要素に独自のクラスを追加する

公開日:

WordPress

WordPressのbody_class関数でbody要素に独自のクラスを追加する

 

WordPressのbody_classについて記載します。

 

WordPressを使用してホームページを作成する時にコーディングしたデータをオリジナルのテーマとして組み込むことが多いです。
コーディングデータ(デザイン)によってはbody要素にクラス(class)を振り分ける場合があります。

 

そのような場合にbody_class関数を使用するとページごとに異なるクラスを追加することができるので便利です。
また、独自のクラスを追加することも可能です。

 

 

 

body_classでbody要素にクラスを追加

body_classはページごとに異なるクラスを付与することができるWordPressのテンプレートタグです。
基本的には「header.php」のbody要素に下記のコードを記述します。

 

 

これを追加することによって、ページごとにそれぞれ異なるクラスが追加されます。

 

例えば↓

 

TOPページの場合
※表示設定によって異なります。
 

 

 

カテゴリーページの場合

 

 

 

シングルページの場合

 

 

 

固定ページの場合

 

 

このような感じです。
後はこのクラスにスタイルを反映していきます。

 

また、自動で追加されるクラス以外に独自のクラスを追加したい場合があります。

 

 

body要素に独自のクラスを追加

body_classで自動で付与されるクラス以外に追加したいクラスがある場合は引数にクラス名を記述します。
すると、独自のクラスを追加されます。

 

 

例えば「test」というクラスを追加したい場合

 

 

このように書きます。
実際のソースを見ると下記のようになります。

 

 

また、複数追加も可能です。その場合は半角スペースで区切ってクラス名を記述します。

 

 

 

 

上記のように追加されます。

 

この方法以外にも「functions.php」から独自のクラスを追加することも可能です

 

 

functions.phpで独自のクラスを追加

「functions.php」でフィルターを使って追加する方法です。
下記のコードを「functions.php」に記述します。
「$classes[] = ‘クラス名’;」のクラス名のところに追加したいクラスを書きます。

 

こちらも半角スペースで区切れば複数追加されます。

 

 

独自のテーマを作成する場合など、参考にしてみてください。

 

 

 

まとめ

今回はWordPressのbody_classについて使用方法を記載しました。

 

独自のクラスを追加したい場合などに活用できるかと思います。

 

それでは、また!

 

ブログ作成者3
  • このエントリーをはてなブックマークに追加

ホームページに関するお悩みは、仙台のホームページ制作アド・エータイプにお任せください!

お気軽にご相談ください。
022-716-3883
営業時間 平日9:30~18:00