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

タナビーの高梨です。

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

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

今回は<header>タグにクラスを任意に追加できるフィルターフック
👉get_additional_header_classes
です。

フックの概要

フックの発火条件

ヘッダエリアがある場合、無条件に１回発火します。

使いどころ

<header>タグに独自のクラスを追加することができます。

ただ、そもそも<header>タグにはheaderというクラスやheaderというidが付いているため、CSSを当てるだけならこのフックを使う意味があまりありません。

あえてあるとすれば、テーマ本体CSSと衝突しないスコープを作るといったところでしょうか。

「デザインを変えたいだけ」ならCSSで既存の header クラスをターゲットにすれば十分です。

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

function get_additional_header_classes($option = null){
    ///　省略　///
    return apply_filters('get_additional_header_classes', $classes);
}

引数

$classes：（string）クラス名のリスト。

※body_class_additionalではarrayですが、こちらはstringです。

カスタマイズコード例

以下は無条件に’additionalClass’というクラスを追加する例です。

function customize_get_additional_header_classes( $classes ) {

    $classes .= ' additionalClass';

    return $classes;

}
add_filter( 'get_additional_header_classes', 'customize_get_additional_header_classes' );

注意点

・このフックで追加するよりも、CSSで既存の header を指定する方がシンプルな場合が多いです。

・クラスは文字列で処理されるため、スペースを忘れるとクラスが連結されて壊れる可能性があります。

まとめ

・get_additional_header_classes は<header>に任意のクラスを追加できるフィルターフック。

・単純なデザイン変更には不要で、スコープの切り分けや特定条件でのクラス付与に向いています。

・引数が文字列で返る点に注意。