Cocoonのヘッダーコンテナにアクションフックを足してみた

 先日書いた通り、このブログのタイトルをOIIOJPに変えて、その下にキャッチフレーズを表示しようとした時の話。

 このサイトで利用しているWordPress用テーマの「Cocoon」では、[Cocoon設定]→[ヘッダー]タブの中に、標準でキャッチフレーズをヘッダー上部、もしくはヘッダー下部に指定して表示させられるオプションが用意されています。

Cocoon設定→ヘッダータブ

 ただ、うちはちょっとテーマをカスタマイズしていて、ヘッダーには次のようにお知らせ枠が表示できるようにしてあるんですね。

 なので、前述のオプションで「ヘッダートップもしくはヘッダーボトム」を指定すると、タイトルのすぐ上や下ではなくて、タイトルとお知らせ枠をワンブロックと見なしたその上か下にキャッチフレーズが表示されてしまいます。これは望んでいる動作ではありません。
 そんなわけで、久しぶりにテーマファイルのカスタマイズを行うことにしました。

スポンサーリンク

ヘッダーコンテナ生成の処理を確認してみると……

 現状は「ここにお知らせ枠を出したいなー」というカスタマイズのために……

※「Cocoonでヘッダー画像エリアの中にお知らせスペースを設ける方法」から引用

 ヘッダーロゴ(要はブログタイトル)の下に出力を行うアクションフックをfunctions.phpで拾って、お知らせ枠用に作ったウィジェットの中身をdynamic_sidebarで吐き出させるようにしています。

// ヘッダーロゴの下に出力をする
 add_filter('wp_header_logo_after_open', 'add_header_contents');
 function add_header_contents() {
     dynamic_sidebar('add-header-contents');
 }

 つまり、この吐き出すタイミングが悪いんですよね。今は「ブログタイトル出力→お知らせ枠出力→キャッチフレーズ出力」の順になっていますので、これが「ブログタイトル出力→キャッチフレーズ出力→お知らせ枠出力」の順に変更できれば良いわけです。

 この処理を行っているheader-container.phpの中身を確認したところ、アクションフックは「ロゴ出力前」か、「ロゴ出力後」かしかありません。「キャッチフレーズの後」というタイミングがない。となるとfunctions.php側では対応できませんから、header-container.phpの処理そのものをカスタマイズしてやる必要があるようです。

オリジナルの動きはそのまま残して、アクションフックを増設する

 ヘッダーコンテナを改造するには、親テーマであるCocoonのtmp/header-container.phpファイルを、子テーマのtmpフォルダ配下にコピーしてから、その内容を変更する必要があります。
 そのheader-container.phpの、今回の処理に該当するコード部分は次の通り。

<div id="header-in" class="header-in wrap cf" itemscope itemtype="https://schema.org/WebSite">

<?php //キャッチフレーズがヘッダー上部のとき
if (is_tagline_position_header_top()) {
    get_template_part('tmp/header-tagline');
} ?>

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

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

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

<?php //キャッチフレーズがヘッダー下部のとき
if (is_tagline_position_header_bottom()) {
    get_template_part('tmp/header-tagline');
} ?>

</div>

 現状はこの中の「do_action( ‘wp_header_logo_after_open’ );」というアクションフックを拾って、ここにお知らせ枠を出力しているわけですね。目的を達成するためには、このアクションフックのブロックを、まるごと最後の</div>の前に移す方法もあります。でも、なるべく標準の設定機能はそのまま残しておいた方がいいと思ったので、移すのではなくて、その箇所に新しく専用のアクションフックを足しておくことにしました。

<div id="header-in" class="header-in wrap cf" itemscope itemtype="https://schema.org/WebSite">

<?php //キャッチフレーズがヘッダー上部のとき
if (is_tagline_position_header_top()) {
    get_template_part('tmp/header-tagline');
} ?>

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

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

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

<?php //キャッチフレーズがヘッダー下部のとき
if (is_tagline_position_header_bottom()) {
    get_template_part('tmp/header-tagline');
} ?>

<?php //ヘッダーの最後にコードを挿入するためのアクションフック
do_action( 'wp_header_all_after_open' ); ?>
  
</div>

 「wp_header_all_after_open」というのが今回増設したアクションフックです。

functions.phpでお知らせ枠に割り当てていたアクションを書き換える

 それでは冒頭で挙げていた、お知らせ枠を出力するためのfunctions.php該当部分を、「wp_header_logo_after_open」というアクションフックを拾う形から、新しく増設した「wp_header_all_after_open」というアクションフックを拾う形に書き換えてやりましょう。

// ヘッダーロゴの下に出力をする
 add_filter('wp_header_all_after_open', 'add_header_contents');
 function add_header_contents() {
     dynamic_sidebar('add-header-contents');
 }

 トップページをブラウザでリロードして、上記の書き換えがうまく出来ていることを確認。あとはキャッチフレーズの表示用スタイルをちょちょいといじってバランスを調整して完成です。

 好みの並びに書き換えることができました。

コメント

スポンサーリンク