WordPress | sourceタグのsrcset属性でショートコードを展開する方法

WordPressで、<source>タグのsrcset属性内にショートコードを使いたいと考えている方も多いのではないでしょうか。通常、WordPressはHTMLタグの属性に対してフィルタリングを行っており、srcset属性内でショートコードを展開することができません。本記事では、簡単なコードを追加してこの制約を解消する方法を解説します。

動作確認環境
なぜWordPressではデフォルトで制限されているのか？
<source>タグのsrcset属性にショートコードを展開するカスタム関数
1. コード解説
動作確認
応用編: 他の属性でショートコードを展開するには？

動作確認環境

WordPress バージョン: 6.6.2
PHP バージョン: 8.1.29

なぜWordPressではデフォルトで制限されているのか？

WordPressではセキュリティ上の理由から、wp_kses_allowed_htmlフィルターによってHTMLタグやその属性に使用できる内容が制限されています。これにより、意図しないスクリプトやコンテンツの埋め込みを防ぐことができますが、同時にsrcset属性内でショートコードが展開されないという不便さが生じることもあります。

例えば、次のように記述してもショートコードは展開されず、そのまま表示されてしまいます。

<source media="(max-width: 767px)" srcset="[app_assets]img/sample.png">

これを展開するために、次のカスタム関数を使います。

<source>タグのsrcset属性にショートコードを展開するカスタム関数

以下のコードをWordPressのテーマのfunctions.phpファイルに追加することで、srcset属性内でショートコードを展開できるようになります。

/**
 * <source>タグのsrcset属性内でショートコードを展開
 */
function allow_shortcode_in_source_tag($allowedposttags) 
{
    // <source> タグの srcset 属性にショートコードを許可
    $allowedposttags['source']['srcset'] = true;
    return $allowedposttags;
}
add_filter('wp_kses_allowed_html', 'allow_shortcode_in_source_tag', 10, 1);

コード解説

関数定義: allow_shortcode_in_source_tag関数で、WordPressに対して<source>タグのsrcset属性内でショートコードを展開することを許可します。
属性の許可: $allowedposttags['source']['srcset'] = true;により、srcset属性内でショートコードを使用できるように設定しています。
フィルター追加: wp_kses_allowed_htmlフィルターを使い、上記設定をWordPress全体に適用します。

このカスタマイズにより、例えば以下のように記述した場合にショートコードが正常に展開されるようになります。

<source media="(max-width: 767px)" srcset="/path/to/assets/img/sample.png">

動作確認

コードを追加後、ショートコードが展開されてsrcsetに意図したURLが挿入されているか確認しましょう。ブラウザの「検証ツール」を使って、srcsetの内容が期待通りに表示されているかどうかを確認できます。

応用編: 他の属性でショートコードを展開するには？

今回の設定を応用することで、他のタグや属性内でショートコードを展開したい場合にも対応できます。例えば、<img>タグのalt属性にショートコードを展開させる場合は、以下のように設定を追加します。

$allowedposttags['img']['alt'] = true;

これで、srcset属性内でショートコードを使う方法が完成しました。これを活用して、ダイナミックに画像を切り替えたり、メディアクエリに応じたコンテンツを表示したりすることが可能になります。