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

タナビーの高梨です。

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

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

今回はエントリーカードのスニペット表示直後に発火するアクションフック
entry_card_snippet_afterです。

フックの概要

使いどころ

entry_card_snippet_afterはエントリーカードの抜粋（スニペット）の直後に発火します。

この位置です。

ここに表示させたいって何でしょう。

・カテゴリラベル・タグなどのメタ情報追加
・記事ごとのCTAや外部リンク（条件分岐で出し分け可能）
・トラッキングタグの埋め込み

といったところでしょうか。

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

/tmp/entry-card.php

<div class="entry-card-snippet card-snippet e-card-snippet">
        <?php echo $snippet; //カスタマイズで指定した文字の長さだけ本文抜粋?>
      </div>
      <?php endif ?>
      <?php do_action( 'entry_card_snippet_after', get_the_ID() ); ?>

/tmp/related-entry-card.php

    <div class="related-entry-card-snippet card-snippet e-card-snippet">
      <?php echo $snippet; //カスタマイズで指定した文字の長さだけ本文抜粋?>
    </div>
    <?php endif ?>
    <?php do_action( 'related_entry_card_snippet_after', get_the_ID() ); ?>

引数

$id：（int）当該記事の投稿ID

カスタマイズコード例

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

function customize_entry_card_snippet_after( $id ) {

    echo '<div style="background:red;color:white">entry_card_snippet_afterはここに表示できる</div>';

}
add_action('entry_card_snippet_after', 'customize_entry_card_snippet_after' );

注意点

スマホではエントリーカードの表示がコンパクトになるため、要素を入れすぎるとレイアウトが崩れる可能性があります

投稿ID $id を使って条件分岐できるので、必要な記事だけ表示させる処理が良いかもしれません

抜粋後に追加されるため、ユーザーの視認性はあまり高くないかもしれません

まとめ

entry_card_snippet_after フックは、Cocoonテーマのエントリーカード抜粋直後にコンテンツを差し込めるアクションフックです。

主張の強い要素には向きませんが、細かなメタ情報の追加や、記事ごとのトラッキング要素などには使いやすい位置です。

目立ちすぎない場所に要素を配置したい場合は、検討してみる価値があります。