webmanab.html

menu

テンプレートタグbody_class()でbody要素に独自のクラス属性を付与する方法と、それ以外の方法 -『wordpress』

　

wordpressでページごとに限定したスタイルやJavaScriptの操作を加えたいとき、<body>にそのページに応じたクラスを割り当てる、body_class()を利用する場合があります。その使い方と、その他のbodyへの有用なクラスのつけ方法をまとめます。

テンプレートタグbody_class()でbody要素に独自のクラス属性を付与する方法と、それ以外の方法

wordpressのテンプレートタグbody_class()を利用すると、そのページに応じたユニークなクラスが割り当てられます。

php


<body <?php body_class(); ?>>

以下のようなクラスが付与されることになります。

  • home
  • blog
  • archive
  • date
  • single postid-(id)
  • author
  • category
  • tag
  • page-parent
  • search-results

自分で付与するクラス名を決めたい場合

自分で考えた独自のクラス名をbody_class()のパラメータに渡すことでそのクラス名を自動ではきだされるものに追加してbodyに反映することができます。

php


<body <?php body_class('my-class-name'); ?>>

function.phpから自分で付与するクラス名を決めたい

function.phpに記述してadd_filter()でクラスをbodyに付与することもできます。

function.php


add_filter( 'body_class', 'my_class_names' );
function my_class_names( $classes ) {
  $classes[] = 'my-class-name1 my-class-name2';
  return $classes;
}

参考

おわります。

テンプレートタグbody_class()でbody要素に独自のクラス属性を付与する方法と、それ以外の方法 -『wordpress』

share
ー

tag
ー

related
ー

tip