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;
}祖先カテゴリーの 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 が付いています。
本文部分に class を追加
| 関数 |
|---|
apply_filters( 'get_additional_entry_content_classes', $classes ) |
| 記載ファイル |
| lib / additional-classes.php |
get_additional_entry_content_classes は、<main> タグ内の本文部分の <div> タグに class を追加するフィルターフックです。
デフォルトでは、class に entry-content が付いています。
[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-cards や widget-entry-cards などがある <div> タグ。
[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-cards や widget-entry-cards などがある <div> タグ。
シェアボタンに 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> タグ。
フォローボタンに 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> タグ。
内部ブログカードに class を追加
| 関数 |
|---|
apply_filters( 'get_additional_internal_blogcard_classes', $classes ) |
| 記載ファイル |
| lib / additional-classes.php |
get_additional_internal_blogcard_classes は、内部ブログカードに class を追加するフィルターフックです。
追加される位置は、デフォルトで class に blogcard や internal-blogcard がある <div> タグ。
外部ブログカードに class を追加
| 関数 |
|---|
apply_filters( 'get_additional_external_blogcard_classes', $classes ) |
| 記載ファイル |
| lib / additional-classes.php |
get_additional_external_blogcard_classes は、外部ブログカードに class を追加するフィルターフックです。
追加される位置は、デフォルトで class に blogcard や external-blogcard がある <div> タグ。
header タグに class を追加
| 関数 |
|---|
apply_filters( 'get_additional_header_classes', $classes ) |
| 記載ファイル |
| lib / additional-classes.php |
get_additional_header_classes は、サイトタイトル部分の <header> タグに class を追加するフィルターフックです。
デフォルトでは、class にheader が付いています。
サイト全体コンテナに class を追加
| 関数 |
|---|
apply_filters( 'get_additional_container_classes', $classes ) |
| 記載ファイル |
| lib / additional-classes.php |
get_additional_container_classes は、<body> タグ直下の container の id と class がある <div> タグに、class を追加するフィルターフックです。
ヘッダーコンテナに 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 が付いています。
フッターボトムに 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 が付いています。
関連記事に class を追加
| 関数 |
|---|
apply_filters( 'get_additional_related_entries_classes', $classes ) |
| 記載ファイル |
| lib / additional-classes.php |
get_additional_related_entries_classes は、関連記事に class を追加するフィルターフックです。
デフォルトでは、class に related-entries が付いています。
ページ送りナビに class を追加
| 関数 |
|---|
apply_filters( 'get_additional_post_navi_classes', $classes ) |
| 記載ファイル |
| lib / additional-classes.php |
get_additional_post_navi_classes は、投稿ページのページ送りナビに class を追加するフィルターフックです。
デフォルトでは、class に pager-post-navi が付いています。
コメントエリアに class を追加
| 関数 |
|---|
apply_filters( 'get_additional_comment_area_classes', $classes ) |
| 記載ファイル |
| lib / additional-classes.php |
get_additional_comment_area_classes は、コメントエリアに class を追加するフィルターフックです。
デフォルトでは、class に comment-area が付いています。
投稿ページのパンくずリストに class を追加
| 関数 |
|---|
apply_filters( 'get_additional_single_breadcrumbs_classes', $classes ) |
| 記載ファイル |
| lib / additional-classes.php |
get_additional_single_breadcrumbs_classes は、投稿ページのパンくずリストに class を追加するフィルターフックです。
デフォルトでは、class に breadcrumb などが付いています。
固定ページのパンくずリストに class を追加
| 関数 |
|---|
apply_filters( 'get_additional_page_breadcrumbs_classes', $classes ) |
| 記載ファイル |
| lib / additional-classes.php |
get_additional_page_breadcrumbs_classes は、固定ページのパンくずリストに class を追加するフィルターフックです。
デフォルトでは、class に breadcrumb などが付いています。
インデックスリストに class を追加
| 関数 |
|---|
apply_filters( 'get_additional_entry_card_classes', $classes ) |
| 記載ファイル |
| lib / additional-classes.php |
get_additional_entry_card_classes は、インデックスリストに class を追加するフィルターフックです。
デフォルトでは、class に list が付いています。
目次に class を追加
| 関数 |
|---|
apply_filters( 'get_additional_toc_classes', $classes ) |
| 記載ファイル |
| lib / additional-classes.php |
get_additional_toc_classes は、目次に class を追加するフィルターフックです。
追加される位置は、デフォルトで class に toc がある <div> タグ。
アピールエリアに class を追加
| 関数 |
|---|
apply_filters( 'get_additional_appeal_area_classes', $classes ) |
| 記載ファイル |
| lib / additional-classes.php |
get_additional_appeal_area_classes は、アピールエリアに class を追加するフィルターフックです。
デフォルトでは、class に appeal が付いています。
カルーセルに class を追加
| 関数 |
|---|
apply_filters( 'get_additional_carousel_area_classes', $classes ) |
| 記載ファイル |
| lib / additional-classes.php |
get_additional_carousel_area_classes は、カルーセルに class を追加するフィルターフックです。
デフォルトでは、class に carousel が付いています。