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

タナビーの高梨です。

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

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

今回はタグアーカイブページの1ページ目に表示されるタグアイキャッチ画像の直後に発火するアクションフック
tag_eye_catch_after
です。

フック概要

フックの発火条件

タグのアイキャッチが設定されていないと発火しません。
また、アーカイブの２ページ目以降はアイキャッチが表示されないので発火しません。

使いどころ

アイキャッチの直後に発火します。

この位置です。

活用例：

• タグの説明文や補足情報を画像下に追加
• アイキャッチ装飾（ボーダー・ラベルなど）を表示
• ABテスト用タグの埋め込み（1ページ目専用表示に最適）

ただし、タグ自体の説明はcocoon設定で設定可能であることから、ここに表示する内容は「より装飾的・拡張的な用途」に限定されそうです。

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

/tmp/tag-content.php

    <?php if ($eye_catch_url):
      //アイキャッチがない場合は非表示クラスを追加
      $display_none = is_eyecatch_visible() ? null : ' display-none';
      //アイキャッチからキャプションを取得
      $caption = get_caption_from_image_url($eye_catch_url); ?>
      <div class="eye-catch-wrap<?php echo $display_none; ?>">
        <figure class="eye-catch">
          <img src="<?php echo esc_url($eye_catch_url); ?>" class="eye-catch-image wp-tag-image" alt="<?php echo esc_attr(get_the_tag_title($tag_id)); ?>">
          <?php //キャプション
          if (is_eyecatch_caption_visible() && $caption){
            echo '<figcaption class="eye-catch-caption">'.esc_html($caption).'</figcaption>';
          }; ?>
        </figure>
      </div>
      <?php do_action('tag_eye_catch_after'); ?>

引数

なし

カスタマイズコード例

上記画像での出力例です。

function customize_tag_eye_catch_after() {

    echo '<div style="background-color:red;color:white;">tag_eye_catch_afterはここに表示されます</div>';

}
add_action('tag_eye_catch_after', 'customize_tag_eye_catch_after' );

注意点

アイキャッチ画像が未設定の場合、このフックは発火しません

2ページ目以降ではレイアウト構造から除外されるため、発火しない点に注意してください

表示領域が狭いため、要素のサイズやCSSの崩れに注意が必要です

まとめ

tag_eye_catch_after は、タグアーカイブページのアイキャッチ直後に要素を追加できるアクションフックです。

装飾的な表示やABテスト用タグの埋め込みなどに使うと、1ページ目の目立つ位置で差別化できそうです。