メインコンテンツまで移動する

class を追加する Cocoon のフィルターフックのまとめ

  • 公開日
  • 更新日

Akira Web デザイナー

body タグに class を追加

WordPress テーマ Cocoon には、<body> タグに class を追加するフィルターフックがあります。それが body_class_additional です。また、既存のすべての class の書き換えも可能です。このフィルターフックさえ覚えていれば、class の追加に困りません。

基本的な使い方は、下記のとおりです。

add_filter( 'body_class_additional', function( $classes ) {
  $classes[] = '追加したいclass名';
  return $classes;
});

body_class_additional を使った例を 3 つあげます。

親カテゴリーの id を class に追加

カテゴリーを階層にしているサイトは多いでしょう。ただ、Cocoon のデフォルトでは、親カテゴリーの id は投稿ページの class に出力されません。

親カテゴリーの id が投稿ページの class に必要であれば、このようなコードを子テーマの functions.php に追加します。

add_filter( 'body_class_additional', function( $classes ) {
  if ( is_single() ) {
    $cat = get_the_category();
    $parent_id = $cat[0]->parent;
    if ( ! empty( $parent_id ) ) {
      $classes[]  = 'parent-cat-' . $parent_id;
    }
  }
  return $classes;
});

これで <body> タグの class に parent-cat-○○ を追加できます（○○は親カテゴリーの id）。

id ではなく slug が必要であれば、このように書きます。

add_filter( 'body_class_additional', function( $classes ) {
  if ( is_single() ) {
    $cat = get_the_category();
    $parent_id = $cat[0]->parent;
    if ( ! empty( $parent_id ) ) {
      $cat_parent = get_term( $parent_id, 'category' );
      $classes[]  = $cat_parent->slug;
    }
  }
  return $classes;
});

これで親カテゴリーのスラッグが、<body> タグの class に追加されます。

祖先カテゴリーの id を class に追加

先程のコードでは、親のさらに親のカテゴリーの id は出力されません。

投稿ページに親カテゴリーを含めた祖先カテゴリーの id が必要であれば、このようなコードを子テーマの functions.php に追加します。

add_filter( 'body_class_additional', function( $classes ) {
  if ( is_single() ) {
    $cat = get_the_category();
    $ancestors = get_ancestors( $cat[0]->term_id, 'category' );
    if ( is_array( $ancestors ) ) {
      foreach ( $ancestors as $ancestor ) {
        $classes[] = 'ancestor-cat-' . $ancestor;
      }
    }
  }
  return $classes;
});

これで祖先カテゴリーの数だけ、ancestor-cat-○○ という class が追加されます（○○は祖先カテゴリーの id）。

あるカテゴリーの階層に属する投稿ページに class を追加

あるカテゴリーの階層に属した投稿ページに、任意の class を追加する方法もあります。

id が 10 のカテゴリー、ならびに id が 10 のカテゴリーの子孫カテゴリーに属する全ての投稿ページに、common-cat という class を追加してみます。

add_filter( 'body_class_additional', function( $classes ) {
  if ( is_single() && ( in_category( 10 ) || post_is_in_descendant_category( 10 ) ) ) {
    $classes[] = 'common-cat';
  }
  return $classes;
});

function post_is_in_descendant_category( $cats, $_post = null ) {
  foreach ( (array) $cats as $cat ) {
    $descendants = get_term_children( (int) $cat, 'category' );
    if ( $descendants && in_category( $descendants, $_post ) )
      return true;
  }
  return false;
}

祖先カテゴリーの id を class に追加する例と似ていますが、柔軟性はこちらが優れています。

その他の場所に class を追加するフィルターフック

<body> タグに class を追加できれば、ほとんどのケースで困りません。

しかし、その他の要素に class を追加したい時もあります。

Cocoon には、様々な場所に class を追加するためのフィルターフックが用意されています。それらのフィルターフックを列挙しました。

これより下のフィルターフックの基本的な使い方は、下記のとおりです。

add_filter( 'フィルターフック', function( $classes ) {
  // 追加したいclass名の前に半角スペースが必要
  $classes .= ' 追加したいclass名';
  return $classes;
});

例えば、get_additional_main_classes を使い、<main> の class に example を追加する場合はこんな感じです。

add_filter( 'get_additional_main_classes', function( $classes ) {
  $classes .= ' example';
  return $classes;
});
フィルターフックclass を追加する場所
get_additional_main_classes<main> タグ。デフォルトでは main が付いています。
get_additional_entry_content_classes<main> タグ内の本文部分の <div> タグ。デフォルトでは entry-content が付いています。
get_additional_widget_entriy_cards_classesウィジェットの [C] 新着記事。デフォルトでは new-entry-cards や widget-entry-cards などが付いています。
get_additional_popular_entriy_cards_classesウィジェットの [C] 人気記事。デフォルトでは popular-entry-cards や widget-entry-cards などが付いています。
get_additional_sns_share_button_classes投稿・固定ページのシェアボタン。デフォルトでは sns-share などが付いています。
get_additional_sns_follow_button_classes投稿・固定ページのフォローボタン。デフォルトでは sns-follow などが付いています。
get_additional_internal_blogcard_classes内部ブログカード。デフォルトでは blogcard や internal-blogcard が付いています。
get_additional_external_blogcard_classes外部ブログカード。デフォルトでは blogcard や external-blogcard が付いています。
get_additional_header_classesサイトタイトル部分の <header> タグ。デフォルトでは header が付いています。
get_additional_container_classes<body> タグ直下の <div id="container"> タグ。デフォルトでは container が付いています。
get_additional_header_container_classes<div id="header-container"> タグの直下の <div> タグ。デフォルトでは header-container-in が付いています。
get_additional_footer_bottom_classes<footer id="footer"> タグ内の <div> タグ。デフォルトでは footer-bottom が付いています。
get_additional_related_entries_classes関連記事。デフォルトでは related-entries が付いています。
get_additional_post_navi_classes投稿ページのページ送りナビ。デフォルトでは pager-post-navi が付いています。
get_additional_comment_area_classesコメントエリア。デフォルトでは comment-area が付いています。
get_additional_single_breadcrumbs_classes投稿ページのパンくずリスト。デフォルトでは breadcrumb などが付いています。
get_additional_page_breadcrumbs_classes固定ページのパンくずリスト。デフォルトでは breadcrumb などが付いています。
get_additional_entry_card_classesインデックスリスト。デフォルトでは list が付いています。
get_additional_toc_classes目次。デフォルトでは toc が付いています。
get_additional_appeal_area_classesアピールエリア。デフォルトでは appeal が付いています。
get_additional_carousel_area_classesカルーセル。デフォルトでは carousel が付いています。

フォローする