cocoonフック調査～get_additional_entry_content_classesの使い方と活用例

タナビーの高梨です。

WordPressのテーマ「Cocoon」には、テーマ改変なしでデザインや動作を拡張できる豊富なアクション・フィルターフックが用意されています。

分かる範囲で内容を調査したのでブログにまとめていこうと思います。

今回は記事コンテンツ部分などに任意のクラスを追加できるフィルターフック
👉get_additional_entry_content_classes
です。

フックの概要

フックの発火条件

・Cocoon設定画面
コードタブ、画像タブで各１回発火

・その他
ページ表示時に１回必ず発火

⚠ ただし、投稿ページ・固定ページでテンプレートを指定している場合は発火しません。

使いどころ

このフックを利用すると、各ページの以下のタグにクラスを追加できます。

👉 例えば、記事本文全体に独自の装飾を適用したいときや、特定の条件でだけスタイルを切り替えたいときに役立ちます。

apply_filters呼び出し元のソースコード

function get_additional_entry_content_classes($option = null){
    ///  省略  ///
    return apply_filters('get_additional_entry_content_classes', $classes);
}

<div class="demo entry-content<?php echo get_additional_entry_content_classes(); ?>">

<div class="<?php echo $class; ?><?php echo get_additional_entry_content_classes(); ?>">

<article class="category-content article<?php echo get_additional_entry_content_classes(); ?>">

<article class="tag-content article<?php echo get_additional_entry_content_classes(); ?>">

<div class="entry-content cf<?php echo get_additional_entry_content_classes(); ?>" itemprop="mainEntityOfPage">

引数

$classes：（string）クラス名のリスト。

※body_class_additionalではarrayですが、こちらはstringです。

カスタマイズコード例

以下は無条件に各タグに’additionalClass’というクラスを追加する例です。

function customize_get_additional_entry_content_classes( $classes ) {

    $classes .= ' additionalClass';

    return $classes;

}
add_filter( 'get_additional_entry_content_classes', 'customize_get_additional_entry_content_classes' );

注意点

・返り値は文字列であること
このフックは string を返す必要があります。
body_class_additional のように array で返すフィルターと混同しないよう注意してください。

・前後の半角スペースに注意
$classes .= ‘ additionalClass’; のように先頭にスペースを入れて結合しないと、既存クラスと繋がってしまい entry-contentcf のような壊れたクラス名になることがあります。
必ずクラスの前に半角スペースを入れましょう。

・テンプレート指定時は発火しない
固定ページ・投稿ページで独自テンプレートを指定している場合、このフックは呼ばれません。
そのため、すべてのページで必ず効くわけではない点に注意が必要です。

まとめ

・get_additional_entry_content_classes は 記事コンテンツやアーカイブ記事タグにクラスを追加できるフィルター

・発火しないケース（テンプレート指定時）があるので注意

・文字列結合でクラスを追加する点もポイント

👉 記事本文やアーカイブ一覧を状況に応じて装飾したいときに便利です。