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

タナビーの高梨です。

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

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

今回はナビカードのリボンキャプション文言を変更できるフィルターフック
👉get_navi_card_ribbon_caption
です

フックの概要

発火条件

ナビカードの表示タイミングで無条件に１回発火します。

使いどころ

ウィジェットやショートコードで表示されるナビカード上部のリボンに表示されるキャプション文言を編集できます。

ナビカードの具体的な利用方法はこちらの公式サイトに詳しく解説されています。

例えばこのように変更することができます。

Cocoonでは、リボンの種類ごとにデフォルトキャプション（おすすめ・新着・注目など）が設定されていますが、
このフックを使うことで以下のようなことが可能です。

・特定のリボン番号のみキャプションを変更したい
・デザイン上、短い単語に置き換えたい

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

$caption = apply_filters('get_navi_card_ribbon_caption', $caption, $ribbon_no);

引数

$caption：（string）キャプションの文言
$ribbon_no:（string）リボン種類の番号、1：おすすめ、2：新着、3：注目、4：必見、5：お得

カスタマイズコード例

上記の例の通り、文字列を”modified”に変更し、文字色を青にする例

function customize_get_navi_card_ribbon_caption ( $caption, $ribbon_no ) {
   
    $caption = '<small style="color:blue;">modified</small>';

    return $caption;

}
add_filter('get_navi_card_ribbon_caption', 'customize_get_navi_card_ribbon_caption', 10, 2 );

上記の通り$captionにはHTMLタグを指定できるが、<span>で囲まれるため、取り扱いには注意が必要

注意点

・$captionの返り値 は<span>でラップされて出力されるため、入れ子構造を複雑にしすぎない方が良さそう
・HTMLを返すことは可能ですが、デザイン崩れにつながるため、極端なタグの使い方は避けるのがおすすめです
・リボン種類によって表示コンテキストが異なるため、$ribbon_no を用いた条件分岐で適切に制御してください
・テキストだけを変えたい場合は HTML を使わず文字列だけ返すほうが安全です

まとめ

・get_navi_card_ribbon_caption は、ナビカードリボンのキャプション文言を自由に編集できるフィルターフック。
・HTML を使って装飾することも可能だが、Cocoon 側の<span>と組み合わせて出力される点には注意
・おすすめ／新着／注目などのリボンをサイトデザインに合わせてカスタマイズしたい場面で便利