WordPressのbody_classについて記載します。
WordPressを使用してホームページを作成する時にコーディングしたデータをオリジナルのテーマとして組み込むことが多いです。
コーディングデータ(デザイン)によってはbody要素にクラス(class)を振り分ける場合があります。
そのような場合にbody_class関数を使用するとページごとに異なるクラスを追加することができるので便利です。
また、独自のクラスを追加することも可能です。
body_classはページごとに異なるクラスを付与することができるWordPressのテンプレートタグです。
基本的には「header.php」のbody要素に下記のコードを記述します。
1 |
<body <?php body_class(); ?>> |
これを追加することによって、ページごとにそれぞれ異なるクラスが追加されます。
例えば↓
TOPページの場合
※表示設定によって異なります。
1 |
<body class="home blog"> |
カテゴリーページの場合
1 |
<body class="archive category category-other category-1"> |
シングルページの場合
1 |
<body class="single single-post postid-62 single-format-standard"> |
固定ページの場合
1 |
<body class="page page-id-28 page-template-default"> |
このような感じです。
後はこのクラスにスタイルを反映していきます。
また、自動で追加されるクラス以外に独自のクラスを追加したい場合があります。
body_classで自動で付与されるクラス以外に追加したいクラスがある場合は引数にクラス名を記述します。
すると、独自のクラスを追加されます。
1 |
<body <?php body_class('クラス名'); ?>> |
例えば「test」というクラスを追加したい場合
1 |
<body <?php body_class('test'); ?>> |
このように書きます。
実際のソースを見ると下記のようになります。
1 |
<body class="home blog test"> |
また、複数追加も可能です。その場合は半角スペースで区切ってクラス名を記述します。
1 |
<body <?php body_class('test1 test2 test3'); ?>> |
↓
1 |
<body class="home blog test1 test2 test3"> |
上記のように追加されます。
この方法以外にも「functions.php」から独自のクラスを追加することも可能です
「functions.php」でフィルターを使って追加する方法です。
下記のコードを「functions.php」に記述します。
「$classes[] = ‘クラス名’;」のクラス名のところに追加したいクラスを書きます。
こちらも半角スペースで区切れば複数追加されます。
1 2 3 4 5 |
add_filter('body_class', 'my_class_names'); function my_class_names($classes) { $classes[] = 'クラス名'; return $classes; } |
独自のテーマを作成する場合など、参考にしてみてください。
今回はWordPressのbody_classについて使用方法を記載しました。
独自のクラスを追加したい場合などに活用できるかと思います。
それでは、また!
ホームページに関するお悩みは、仙台のホームページ制作アド・エータイプにお任せください!