Blog スタッフブログ

WEB制作

[WordPress]srcset属性でショートコードを実行する方法

WordPressで画像をレスポンシブに表示する際、<picture>タグやsrcset属性を使うことで、デバイスごとに最適な画像を読み込むことができます。

管理画面の固定ページのカスタムHTMLでは、テーマフォルダの画像パスをショートコードで指定しても、srcsetなどの属性内では展開されないという問題に直面することがあります。

そのような時、srcset属性でショートコードを使えるようにする方法をご紹介します。

使用例

function shortcode_templateurl(){
  return get_bloginfo('template_url');
}
add_shortcode('template_url', 'shortcode_templateurl');

これはテーマフォルダのパスを取得するショートコードです。

カスタムHTMLで使用するには以下のような書き方をします。

<picture>
	<source srcset="https://mixltd.jp/cms/wp-content/themes/mix_theme/image.jpg" media="(min-width: 768px)" type="image/jpg">
	<img src="https://mixltd.jp/cms/wp-content/themes/mix_theme/image_sp.jpg" alt="画像">
</picture>

実際のページではsrcset属性の方のショートコードがそのまま文字列として表示されます。

これはWordPressによりsrcset属性に展開が制限されているためです。

functions.phpに展開を許可する処理を追加することで解決します。

functions.phpに追加

このようにsrcset属性でも展開する処理を追加します。

function shortcode_source($allowedposttags) {
    $allowedposttags['source']['srcset'] = true;
    return $allowedposttags;
}
add_filter('wp_kses_allowed_html', 'shortcode_source', 10, 1);

$allowedposttagsでsrcset属性を指定します。

戻る 一覧へ戻る