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

タナビーの高梨です。

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

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

今回はgithub gist埋込時の埋込scriptタグを変更できるフィルターフック
👉embed_gist
です

フックの概要

発火条件

ページ内に以下の形式のGitHub Gist URLが埋め込まれている場合に発火します。

https://gist.github.com/ユーザー名/ID/

使いどころ

通常、Gistを埋め込むと以下のようなscriptタグが出力されます。

<script src="gistのjavascriptのURL"></script>

embed_gist を利用すると、この scriptタグ全体の出力内容を自由に編集できます。

例えば、

・独自のラッパー要素で囲みたい
・特定のクラスを付与したい
・レイアウト調整用のマークアップを追加したい
・URL条件によって出力を変更したい

といったケースに対応できます。

引数

$embed：(string)scriptタグの内容
$matches：(array)wp_embed_register_handler()でマッチした内容
$attr：（array）たぶん埋込みのパラメータ（widthとheightが入っている）
$url：（string）github gistのURL
$rawattr：（array）不明

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

return apply_filters( 'embed_gist', $embed, $matches, $attr, $url, $rawattr );

カスタマイズコード例

無条件に全体を<div>で囲う例です。

<script>によって出力されるソースエリアも<div>内に入ります。

$matches、$attr、$urlの内容で分岐させることでより柔軟な編集ができます。

function customize_embed_gist ( $embed, $matches, $attr, $url, $rawattr ) {

    $embed = '<div>' . $embed . '</div>';

    return $embed;

}
add_filter('embed_gist', 'customize_embed_gist', 10, 5 );

注意点

・scriptタグ自体を破壊すると正常に表示されなくなる
・スタイルを当てる場合は、CSSとの整合性を考慮する必要がある

まとめ

・embed_gist は、GitHub Gistを埋め込む際の最終出力を制御できるフィルターフック
・Gist表示部分のマークアップを柔軟に変更できるため、デザイン調整やレイアウト統一を行いたい場合に活用できる拡張ポイント