WordPressでは、srcset属性内にショートコードを入れても展開されません。これを改善する方法をご紹介いたします。
例えば、下記のようなショートコードを追加したとします。
if (!function_exists('shortcode_theme_dir')) {
function shortcode_theme_dir() {
return get_stylesheet_directory_uri();
}
add_shortcode('theme_dir', 'shortcode_theme_dir');
}そのうえで、固定ページなどで下記のように記述しても、srcset内のショートコードは展開されないので、768px以上の画面幅では画像が表示されません。
<picture>
<source srcset="[theme_dir]/assets/img/sample.jpg" media="(min-width: 768px)">
<img src= "[theme_dir]/assets/img/sample_sp.jpg" alt="">
</picture>srcset内でもショートコードが展開されるようにするためには、wp_kses_allowed_htmlフックを使ってsrcsetを許可してあげる必要があります。
srcset属性内のショートコードが展開されない時の対処法
下記のコードを適用しているテーマのfunctions.phpに追加します。
function my_wp_kses_allowed_html($tags) {
$tags['img']['srcset'] = true;
$tags['source']['srcset'] = true;
return $tags;
}
add_filter('wp_kses_allowed_html', 'my_wp_kses_allowed_html');これでsrcset内でもショートコードが展開されるようになります。
あとがき
srcset内でもショートコードを使いたい場合は、ぜひ参考にしていただければ幸いです。