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

タナビーの高梨です。

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

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

今回はブロックエディタのカスタムフィールドにあるSEO設定で表示されている説明文を変更できるフィルターフック
👉howto_tag_caption
です

フックの概要

発火条件

coccon設定起動時に各設定ごとに無条件に発火します。

使いどころ

・各SEO設定項目の説明文（howto）を自由に編集できます

・ただし、通常はサイト運営者自身がこの部分を変更する必要はあまりないでしょう

主に想定されるケースとしては、

クライアントにサイトを納品する際、
「この項目はこう使ってください」といったわかりやすい注釈や説明に置き換えたい場合

などに有効かもしれません

例えばデフォルトではこうなっている部分を・・・・

こう編集できます

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

$caption = apply_filters('howto_tag_caption', $caption, $id);
return '<p class="howto">'.$caption.'</p>';

引数

$caption：（string）説明文、HTMLも使えるっぽい
$id：フィールドを識別するID

カスタマイズコード例

上記例で示した編集例です。

function customize_howto_tag_caption ( $caption, $id ) {

    if( $id == 'the_page_seo_title' ) {
        $caption = 'hogehogeはhogehogeです';
    }

    return $caption;

}
add_filter('howto_tag_caption', 'customize_howto_tag_caption', 10, 2 );

このように、フィールドごとに $id で条件分岐を行うことで、個別に説明文を変更できます。

注意点

・$caption には HTMLタグを含めてもOK ですが、出力は <p class=”howto”> 内に埋め込まれるため、余計なタグを追加するとレイアウトが崩れる可能性があります。

・$id 名は各フィールドごとに決められています。デバッグして確認してください

・Cocoonのアップデートで項目構成が変わると、意図した箇所に反映されなくなるかもしれません

まとめ

・howto_tag_caption フックは、CocoonのSEO設定フォーム内で表示される各項目の説明文を変更できるフィルター

・使う機会は少ないかもしれませんが、クライアント向けサイトの納品や、社内運用マニュアル代わりに説明を入れたい場合には役立ちそうです