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

タナビーの高梨です。

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

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

今回はブロックエディタ起動時にwp_localize_scriptで渡す変数名を変更できるフィルターフック
👉cocoon_gutenberg_param_name
です

フックの概要

条件

ブロックエディタ起動時に無条件で発火します。

使いどころ

wp_localize_script() を利用すると、PHPからJavaScriptへ以下のように値を渡すことができます。

wp_localize_script( 'script-handle', 'ObjectName', $params );

このときの ‘ObjectName’ にあたる部分が、本フックで変更可能な値です。

正直これを変更したい理由が思い浮かびませんが、以下のようなケースで使えるかもしれません。

・独自スクリプトとのオブジェクト名衝突を回避したい場合
・既存テーマのJS設計に合わせて命名を統一したい場合
・セキュリティ上、既知のグローバル変数名を変更したい場合

引数

$name：（string）オブジェクト名

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

$name = apply_filters( 'cocoon_gutenberg_param_name', 'cocoon_gutenberg_params' );

カスタマイズコード例

変数名を「hogehoge」に変更する例です。

function customize_cocoon_gutenberg_param_name ( $name ) {

    $name = 'hogehoge';

    return $name;

}
add_filter('cocoon_gutenberg_param_name', 'customize_cocoon_gutenberg_param_name' );

注意点

・JS側の参照コードも必ず整合性を取って変更する必要がある
・Cocoon本体や将来的なアップデートとの整合性にも注意が必要
・無闇に変更すると既存機能が動作しなくなる可能性があるかも

まとめ

・cocoon_gutenberg_param_nameは、ブロックエディタ用スクリプトに渡すローカライズ変数名を変更できるフィルターフック
・利用シーンは限定的だが、JavaScript設計を厳密にコントロールしたい場合に活用できるかも