cocoonフック調査～get_additional_container_classesの使い方と活用例
タナビーの高梨です。
WordPressのテーマ「Cocoon」には、テーマ改変なしでデザインや動作を拡張できる豊富なアクション・フィルターフックが用意されています。
分かる範囲で内容を調査したのでブログにまとめていこうと思います。
今回は<body>タグの直後にあるcontainerのidが付いた<div>のクラスを任意に追加できるフィルターフック
👉get_additional_container_classes
です。
フックの概要
| フック名 | 発火タイミング |
|---|---|
| get_additional_container_classes | <body>タグ直後のcontainerのidがついた<div>を作成するタイミングで発火 |
フックの発火条件
各ページ表示時に、無条件に１回発火します。
使いどころ
<body>タグの直後にあるcontainerのidが付いた<div>に独自のクラスを追加することができます。
他のクラスを任意に追加できるフックと同様、そもそもcontainerというidやクラスが付いているため、CSSを当てるだけならこのフックを使う意味があまりありません。
あえてあるとすれば、テーマ本体CSSと衝突しないスコープを作るといったところでしょうか。
「デザインを変えたいだけ」ならCSSで既存の container クラスをターゲットにすれば十分です。
apply_filters呼び出し元のソースコード
lib/additional-classes.php
function get_additional_container_classes($option = null){
/// 省略 ///
return apply_filters('get_additional_container_classes', $classes);
}引数
$classes：（string）クラス名のリスト。
※body_class_additionalではarrayですが、こちらはstringです。
カスタマイズコード例
以下は無条件に’additionalClass’というクラスを追加する例です。
function customize_get_additional_container_classes( $classes ) {
$classes .= ' additionalClass';
return $classes;
}
add_filter( 'get_additional_container_classes', 'customize_get_additional_container_classes' );注意点
・このフックで追加するよりも、CSSで既存の container を指定する方がシンプルな場合が多いです。
・クラスは文字列で処理されるため、スペースを忘れるとクラスが連結されて壊れる可能性があります。
まとめ
・get_additional_container_classes は<body>直後のcontainerのidが付いた<div>に任意のクラスを追加できるフィルターフック。
・単純なデザイン変更には不要で、スコープの切り分けや特定条件でのクラス付与に向いています。
・引数が文字列で返る点に注意。