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

タナビーの高梨です。

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

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

今回はコメントエリアのコンテナであるcomment-areaのidがついた<div>のクラスを任意に追加できるフィルターフック
👉get_additional_comment_area_classes
です。

フックの概要

発火条件

固定ページや投稿ページでコメントエリアを描画する際に、無条件に１回発火します。

cocoon設定の投稿ページタグや固定ページタグでコメントの表示が有効になっていないとページ送りナビ自体が表示されないため発火しません。

また、投稿ページ、固定ページの編集画面で、「ディスカッション」が「受付中」に設定されている必要があります。

使いどころ

コメントエリアにあるcomment-areaのidとクラスが付いた<div>のクラスを任意に追加できます。

ただ、そもそもcomment-areaというidやクラスが付いているため、CSSを当てるだけならこのフックを使う意味があまりありません。

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

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

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

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

引数

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

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

カスタマイズコード例

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

function customize_get_additional_comment_area_classes( $classes ) {

    $classes .= ' additionalClass';

    return $classes;

}
add_filter( 'get_additional_comment_area_classes', 'customize_get_additional_comment_area_classes' );

注意点

・要素にすでにcomment-areaというクラスがあるため、単純にデザインを変えるだけならフックは不要です。

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

・レイアウトやスタイルの調整以外での使用目的はほとんどなく、基本的には限定的な用途向けと思われます。

まとめ

・get_additional_comment_area_classesはコメントエリアのコンテナであるcomment-areaのidがついた<div>のクラスを任意に追加できるフック

・単純なCSS適用だけなら既存のクラスで対応可能

・主にテーマ本体CSSと衝突させずにカスタムスタイルを適用したい場合に有用

このフックは、独自のスコープを作るなど、特殊なカスタマイズが必要なときにだけ利用するのが現実的と思われます。