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

タナビーの高梨です。

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

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

今回はヘッダーのロゴ前後で発火するアクションフック
wp_header_logo_before_openとwp_header_logo_after_openです。

フックの概要

使いどころ

ヘッダーのロゴ出力前後で発火します。

場所的にはここです。

初期ヘッダーではこの辺り。

固定ヘッダーではこの辺り。

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

/tmp/header-container.php

        <?php //ロゴ前にコードを挿入するためのアクションフック
        do_action( 'wp_header_logo_before_open' ); ?>

        <?php //ロゴタグの生成
        generate_the_site_logo_tag(); ?>

        <?php //ロゴ後にコードを挿入するためのアクションフック
        do_action( 'wp_header_logo_after_open' ); ?>

引数

なし

カスタマイズコード例

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

function customize_wp_header_logo_before_open() {

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

}
add_action('wp_header_logo_before_open', 'customize_wp_header_logo_before_open' );

function customize_wp_header_logo_after_open() {

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

}
add_action('wp_header_logo_after_open', 'customize_wp_header_logo_after_open' );

注意点

これらのフックはHTMLの構造に関わる場所なので、入れすぎや不適切なタグ挿入はレイアウト崩れの原因になりそうです。

モバイル・PC によってデザインへの影響が異なりそうな箇所なので、両方の表示を必ず確認しましょう。

まとめ

wp_header_logo_before_open と wp_header_logo_after_open は、Cocoonのヘッダーロゴ表示部分の直前・直後に発火するアクションフックです。

ロゴ周辺にカスタムHTMLやスクリプトを安全に挿入できるため、ロゴ周りのデザインや機能を拡張したい場合に便利です。

テーマのファイル編集なしに手軽に活用できるので、ぜひ試してみてください。