cocoonフック調査～appeal_area_before、appeal_area_afterの使い方と活用例

タナビーの高梨です。

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

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

今回はアピールエリア表示前後に発火するアクションフック
appeal_area_beforeとappeal_area_after
です。

フックの概要

この2つのフックは、Cocoonのアピールエリア（トップページ等に表示されるPR枠）の前後に割り込むためのものです。

フックの発火条件

これらのフックは、Cocoon設定 → アピールエリアタブ にて、アピールエリアの表示が有効化されている場合のみ発火します。

⚠️非表示設定のままだと、フックも発火しないため注意が必要です。

使いどころ

本文全体である”appeal-in”のIDを持つ<div>に挟まれる形で割り込むアクションフックです。

表示上はアピールエリアのコンテンツ全体の左右を挟み込むような形になります。
スマホ表示でもflex-directionが横方向のままのようなので、調整しないといびつになります。

PCではこんな感じ。

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

/tmp/appeal.php

<div id="appeal-in" class="appeal-in wrap">

    <?php //アピールエリア冒頭
    do_action('appeal_area_before'); ?>

    <?php //テキストメッセージエリアを表示するか
    if (is_appeal_area_content_visible()): ?>

～～ 省略 ～～

    <?php endif; ?>

    <?php //アピールエリア末尾
    do_action('appeal_area_after'); ?>
    
  </div>

引数

なし

カスタマイズコード例

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

function customize_appeal_area_before() {
    
    echo '<div style="background:red;color:white">appeal_area_beforeはここに表示できる</div>';

}
add_action('appeal_area_before', 'customize_appeal_area_before' );

function customize_appeal_area_after() {
    
    echo '<div style="background:red;color:white">appeal_area_afterはここに表示できる</div>';

}
add_action('appeal_area_after', 'customize_appeal_area_after' );

注意点

・アピールエリアの表示設定が有効でないとフックは機能しません
・スマホ表示時はCSSが崩れることがあるため、メディアクエリで補正を入れるのが良いと思います

まとめ

appeal_area_before と appeal_area_after は、アピールエリアの拡張・補足に非常に便利なフックです。

アピールエリアを活用しているサイトであれば、キャンペーンやお知らせの追加表示、ログイン状態に応じた表示切り替えなど、さまざまなカスタマイズが可能になります。