webmanab.html

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

table of contents
ー

    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
    ー