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

タナビーの高梨です。

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

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

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

フックの概要

フックの発火条件

<main>タグのあるページが表示されると描画時に必ず１回無条件に発火します。

使いどころ

このフックを使うことで、<main>タグにクラスを追加できます。

例えば：

・特定のページだけメインコンテンツの幅を広げたい

・投稿と固定ページでデザインを切り替えたい

・カスタム投稿タイプごとにレイアウトを変えたい

と言ったケースで活用できそうです。

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

<main id="main" class="main<?php echo get_additional_main_classes(); ?>" itemscope itemtype="https://schema.org/Blog">

カスタマイズコード例

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

function customize_get_additional_main_classes( $classes ) {

    $classes[] = 'additionalClass';

    return $classes;

}
add_filter( 'get_additional_main_classes', 'customize_get_additional_main_classes' );

引数

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

注意点

・戻り値は 配列形式 で渡す必要があります。文字列を返すと意図した動作にならない場合があります。

・ページごとに条件分岐を入れる場合は is_page(), is_single(), is_post_type_archive() などの条件タグを組み合わせる必要があります。

まとめ

・get_additional_main_classes はmainタグにクラスを追加するためのフィルターフック

・通常各ページで必ず1回発火する

・ページタイプや条件ごとにレイアウトを切り替える用途で活用できる