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

Cocoonのフィルターフックを使いclassを追加

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を「見やすさ」と「使いやすさ」にこだわり紹介しています。

CSS や JavaScript で必ず使うのが HTML の class 。

WordPress テーマ Cocoon は、カスタマイズを考慮した class を出力してくれます。

ただ、カスタマイズによっては、class が足りない時があります。

そんな時は、Cocoon が用意しているフィルターフックで class を追加しましょう。

class を追加するフィルターフックは、全部で 20 以上。それらをまとめました。

body タグに class を追加

関数
apply_filters( 'body_class_additional', $classes )
記載ファイル
lib / additional-classes.php

body_class_additional は、<body> タグに class を追加するフィルターフックです。

また、既存のすべての 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;
});

これで、parent-cat-○○ という class が <body> タグに追加されます(○○は親カテゴリーの 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;
});

// この関数は下記リンクの Codex よりコピペしました
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;
}

参考post_is_in_descendant_category 関数

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

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

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

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

Cocoon には、いろんな場所に class を追加するためのフィルターフックが用意されています。

それらのフィルターフックを列挙しました。

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

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

最初に紹介する get_additional_main_classes を使い、class に example を追加する場合はこんな感じです。

add_filter( 'get_additional_main_classes', function( $classes ) {
  $classes .= ' example';
  
  return $classes;
});

main タグに class を追加

関数
apply_filters( 'get_additional_main_classes', $classes )
記載ファイル
lib / additional-classes.php

get_additional_main_classes は、<main> タグに class を追加するフィルターフックです。

デフォルトでは、class に main が付いています。

arrow_upward目次に戻る

本文部分に class を追加

関数
apply_filters( 'get_additional_entry_content_classes', $classes )
記載ファイル
lib / additional-classes.php

get_additional_entry_content_classes は、<main> タグ内の本文部分の <div> タグに class を追加するフィルターフックです。

デフォルトでは、class に entry-content が付いています。

arrow_upward目次に戻る

[C] 新着記事に class を追加

関数
apply_filters( 'get_additional_widget_entriy_cards_classes', $classes )
記載ファイル
lib / additional-classes.php

get_additional_widget_entriy_cards_classes は、ウィジェットの [C] 新着記事に class を追加するフィルターフックです。

追加される位置は、デフォルトで class に new-entry-cardswidget-entry-cards などがある <div> タグ。

arrow_upward目次に戻る

[C] 人気記事に class を追加

関数
apply_filters( 'get_additional_popular_entriy_cards_classes', $classes )
記載ファイル
lib / additional-classes.php

get_additional_popular_entriy_cards_classes は、ウィジェットの [C] 人気記事に class を追加するフィルターフックです。

追加される位置は、デフォルトで class に popular-entry-cardswidget-entry-cards などがある <div> タグ。

arrow_upward目次に戻る

シェアボタンに class を追加

関数
apply_filters( 'get_additional_sns_share_button_classes', $classes )
記載ファイル
lib / additional-classes.php

get_additional_sns_share_button_classes は、投稿・固定ページのシェアボタンに class を追加するフィルターフックです。

追加される位置は、デフォルトで class に sns-share などがある <div> タグ。

arrow_upward目次に戻る

フォローボタンに class を追加

関数
apply_filters( 'get_additional_sns_follow_button_classes', $classes )
記載ファイル
lib / additional-classes.php

get_additional_sns_follow_button_classes は、投稿・固定ページのフォローボタンに class を追加するフィルターフックです。

追加される位置は、デフォルトで class に sns-follow などがある <div> タグ。

arrow_upward目次に戻る

内部ブログカードに class を追加

関数
apply_filters( 'get_additional_internal_blogcard_classes', $classes )
記載ファイル
lib / additional-classes.php

get_additional_internal_blogcard_classes は、内部ブログカードに class を追加するフィルターフックです。

追加される位置は、デフォルトで class に blogcardinternal-blogcard がある <div> タグ。

arrow_upward目次に戻る

外部ブログカードに class を追加

関数
apply_filters( 'get_additional_external_blogcard_classes', $classes )
記載ファイル
lib / additional-classes.php

get_additional_external_blogcard_classes は、外部ブログカードに class を追加するフィルターフックです。

追加される位置は、デフォルトで class に blogcardexternal-blogcard がある <div> タグ。

arrow_upward目次に戻る

header タグに class を追加

関数
apply_filters( 'get_additional_header_classes', $classes )
記載ファイル
lib / additional-classes.php

get_additional_header_classes は、サイトタイトル部分の <header> タグに class を追加するフィルターフックです。

デフォルトでは、class にheader が付いています。

arrow_upward目次に戻る

サイト全体コンテナに class を追加

関数
apply_filters( 'get_additional_container_classes', $classes )
記載ファイル
lib / additional-classes.php

get_additional_container_classes は、<body> タグ直下の container の id と class がある <div> タグに、class を追加するフィルターフックです。

arrow_upward目次に戻る

ヘッダーコンテナに class を追加

関数
apply_filters( 'get_additional_header_container_classes', $classes )
記載ファイル
lib / additional-classes.php

get_additional_header_container_classes は、header-container の id がある <div> タグの直下の <div> タグに、class を追加するフィルターフックです。

デフォルトでは、class に header-container-in が付いています。

arrow_upward目次に戻る

フッターボトムに class を追加

関数
apply_filters( 'get_additional_footer_bottom_classes', $classes )
記載ファイル
lib / additional-classes.php

get_additional_footer_bottom_classes は、サイト全体の <footer> タグ(footer の id がある)内の <div> タグに、class を追加するフィルターフックです。

デフォルトでは、class に footer-bottom が付いています。

arrow_upward目次に戻る

関連記事に class を追加

関数
apply_filters( 'get_additional_related_entries_classes', $classes )
記載ファイル
lib / additional-classes.php

get_additional_related_entries_classes は、関連記事に class を追加するフィルターフックです。

デフォルトでは、class に related-entries が付いています。

arrow_upward目次に戻る

ページ送りナビに class を追加

関数
apply_filters( 'get_additional_post_navi_classes', $classes )
記載ファイル
lib / additional-classes.php

get_additional_post_navi_classes は、投稿ページのページ送りナビに class を追加するフィルターフックです。

デフォルトでは、class に pager-post-navi が付いています。

arrow_upward目次に戻る

コメントエリアに class を追加

関数
apply_filters( 'get_additional_comment_area_classes', $classes )
記載ファイル
lib / additional-classes.php

get_additional_comment_area_classes は、コメントエリアに class を追加するフィルターフックです。

デフォルトでは、class に comment-area が付いています。

arrow_upward目次に戻る

投稿ページのパンくずリストに class を追加

関数
apply_filters( 'get_additional_single_breadcrumbs_classes', $classes )
記載ファイル
lib / additional-classes.php

get_additional_single_breadcrumbs_classes は、投稿ページのパンくずリストに class を追加するフィルターフックです。

デフォルトでは、class に breadcrumb などが付いています。

arrow_upward目次に戻る

固定ページのパンくずリストに class を追加

関数
apply_filters( 'get_additional_page_breadcrumbs_classes', $classes )
記載ファイル
lib / additional-classes.php

get_additional_page_breadcrumbs_classes は、固定ページのパンくずリストに class を追加するフィルターフックです。

デフォルトでは、class に breadcrumb などが付いています。

arrow_upward目次に戻る

インデックスリストに class を追加

関数
apply_filters( 'get_additional_entry_card_classes', $classes )
記載ファイル
lib / additional-classes.php

get_additional_entry_card_classes は、インデックスリストに class を追加するフィルターフックです。

デフォルトでは、class に list が付いています。

arrow_upward目次に戻る

目次に class を追加

関数
apply_filters( 'get_additional_toc_classes', $classes )
記載ファイル
lib / additional-classes.php

get_additional_toc_classes は、目次に class を追加するフィルターフックです。

追加される位置は、デフォルトで class に toc がある <div> タグ。

arrow_upward目次に戻る

アピールエリアに class を追加

関数
apply_filters( 'get_additional_appeal_area_classes', $classes )
記載ファイル
lib / additional-classes.php

get_additional_appeal_area_classes は、アピールエリアに class を追加するフィルターフックです。

デフォルトでは、class に appeal が付いています。

arrow_upward目次に戻る

カルーセルに class を追加

関数
apply_filters( 'get_additional_carousel_area_classes', $classes )
記載ファイル
lib / additional-classes.php

get_additional_carousel_area_classes は、カルーセルに class を追加するフィルターフックです。

デフォルトでは、class に carousel が付いています。

arrow_upward目次に戻る


Cocoon には、class を追加する多くのフィルターフックが用意されています。

これらを把握しておけば、カスタマイズの幅がぐーんと広がります。