WordPressでbodyタグにクラスを追加、または削除する方法[備忘録]

WordPress

今回は備忘録となっております。

WordPressで作られたサイトのbodyタグに少し特徴的なクラス名が追加されています。
例えばですが、下記のようなコードが表示されます。

<body class="post-template-default single single-post postid-9265 single-format-standard body public-page page-body">

「single-post」「postid-9265」「single-format-standard」などなど、WordPress独自のタグが出てますね。こちらのコードはお使いのテーマやプラウグインによってはもっと長かったり、逆に短かったりします。

今回はそんなbodyタグにクラス名を追加したり、不必要なクラスを削除したりする方法をご紹介したいと思います。

追加方法

bodyタグに追加する方法はいくつかありますが、今回は2例ほど紹介させていただきます。

header.phpでクラス名を追加する

外観 > テーマファイルエディター > header.phpからbodyタグを探してください。
見つけbodyタグに追加したいタグを入力します。
今回は例としてbosyタグに「test-hoge」を追加してみました。

//クラス名を追加する
<body <?php body_class('test-hoge'); ?>> 

//複数のクラス名を追加するは半角スペースで区切る
<body <?php body_class('test-hoge test-hoge2'); ?>>

これででOKです。
サイトを確認してみましょう。
先ほど追加したタグが表示されていればOKです。

<body class="post-template-default single single-post test-hoge　postid-9265 single-format-standard body public-page page-body">

function.phpクラス名を追加する

function.phpを用いてクラス名を追加することも出来ます。

// bodyタグにクラスを追加
add_filter( 'body_class', function( $classes ){
  $classes[] = 'test-hoge';
  return $classes;
} );

これでOKです。
こちらも例によってしっかりと稼働しているかサイトを確認してみましょう！

複数指定する場合

クラスを複数追加したい場合は下記の様にすればOKです。

// bodyタグにクラスを複数追加
add_filter( 'body_class', function( $classes ){
  $classes[] = 'test-hoge-1';
  $classes[] = 'test-hoge-2';
  $classes[] = 'test-hoge-3';
  return $classes;
} );

特定のページにのみクラス名を追加したい場合

特定のページのみにクラスを追加することも可能です。
今回紹介するのはfunction.phpを編集し、特定のページのみbodyにクラスを追加する方法です。

add_filter( 'body_class', function( $classes ){
  // トップページのみ独自クラス追加
  if( is_front_page() ){
    $classes[] = 'test-hoge';
  }
  return $classes;
} );

is_front_pageなので、この場合はトップページのみにクラスが追加されます。
特定の固定ページにクラスを追加したいのであれば「is_front_page」を「is_page」に変更し、関数にはページのスラッグを入力してください。

add_filter( 'body_class', function( $classes ){
  // 固定ページのみ独自クラス追加
  if( is_page('固定ページのスラッグ') ){
    $classes[] = 'test-hoge';
  }
  return $classes;
} );

こんな感じになります。
更に細かくしていくことも、出来ますがその場合は入力するコードを細かく指定しなければならないのいので注意してください。

クラスを削除する方法

逆にbodyのクラスを削除したい場合は、下記のコードをfunction.phpに入力します。

例）個別ページに付与される「page」を削除
add_filter( 'body_class', function( $classes ){
  if ( in_array( 'page', $classes, true ) ) {
    unset( $classes[ array_search( 'page', $classes ) ] );
  }
  return $classes;
} );

このコードは、WordPressのフックを使用して、個別ページに付与される「page」クラスを削除するものです。body_class フィルターを使用して、$classes 配列内に「page」クラスが存在するかどうかを確認し、存在する場合はそれを削除するコードになってます。

add_filter( 'body_class', function( $classes ){
    // 削除したいクラスの配列を定義します
    $classes_to_remove = array(
        'single',
        'page',
        'page-body'
    );
    
    // $classesから指定したクラスを削除します
    foreach( $classes_to_remove as $class ) {
        if ( in_array( $class, $classes, true ) ) {
            unset( $classes[ array_search( $class, $classes ) ] );
        }
    }
    
    return $classes;
} );

上記のコードでは複数のクラスを定義し削除することが出来ます。

まとめ

WordPressサイトでのbodyタグに対するクラスの追加や削除方法をご紹介しました。これは便利な手法ではありますが、実際には必要性が少ないケースも多いでしょう。ただし、知識として持っておくと、意外な場面で役立つこともあります。

たとえば、特定の固定ページだけを微調整したいといった場合に、bodyタグにクラスを追加する必要が生じることがあります。そのような場合には、今回紹介した方法を試してみることをおすすめします。

タイトルとURLをコピーしました