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

タナビーの高梨です。

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

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

今回はSNSシェアボタンの<div>（クラスにsns-shareがつくもの）に付くクラスを追加できるフィルターフック
👉get_additional_sns_share_button_classes
です。

フックの概要

フックの発火条件

cocoon設定のSNSシェアタブで「メインカラムトップシェアボタンを表示する」や「メインカラムボトムシェアボタンを表示する」にチェックを入れるなどして、SNSシェアボタンが表示される設定になっていたら、表示タイミングで必ず１回発火します。

使いどころ

このフックを使うと、sns-shareのクラスがついたDIVタグに独自のクラスを付けることができます。

例えば：
・CSSで追加装飾（色や余白、アニメーション）を付けたいとき
・JavaScriptで特定のボタン群をまとめて制御したいとき

⚠️ そもそも sns-share クラスが付いているため、基本的には独自クラスを追加せずとも個別制御可能な気がします

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

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

引数

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

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

カスタマイズコード例

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

function customize_get_additional_sns_share_button_classes( $classes ) {

    $classes .= ' additionalClass';

    return $classes;

}
add_filter( 'get_additional_sns_share_button_classes', 'customize_get_additional_sns_share_button_classes' );

注意点

・個別ボタン制御は不可
フィルターにはclassだけしか渡されないため「Twitterだけ」「Facebookだけ」を判定するのは難しいです。

・戻り値は文字列
追加クラスは文字列結合なので、半角スペースを忘れると既存クラスとくっつきます。

・本質的にはオプション的なフック
既存の sns-share クラスだけでもスタイル・JS制御は可能です。
このフックは「追加でクラスを付けたい特殊用途向け」と割り切るのが良いです。

まとめ

・get_additional_sns_share_button_classes は、SNSシェアボタンの<div>に共通の追加クラスを付けるためのフィルター。

・個別ボタン単位の制御はできないため、装飾や挙動の細かい差分は既存クラス・属性で対応。

・返り値は文字列で、半角スペースを付けてクラスを結合する必要があります。