固定ページでpictureタグにハマった件

例えばこんなケースがある！

固定ページでpictureタグのsource srcset属性のショートコードが‥

あれ！！ショートコードが展開されない？？

＜前提として＞

下記のようなショートコードがfunctions.phpなどにあると仮定する。

//ショートコード（）呼び出し[ sc_tempDirUri ]
function template_directory_uri__shortcode() {
	return get_template_directory_uri();
}
add_shortcode('sc_tempDirUri', 'template_directory_uri__shortcode');

＜実装方法＞

※そのまま書くとショートコードが展開されるため
シンタックスハイライト上では[ sc_tempDirUri ]に半角スペースを付けている。

NGな書き方

<picture>
<source srcset="[ sc_tempDirUri ]/img_custom/orderprocessSP.webp" media="(max-width:768px)">
<img src="[ sc_tempDirUri ]/img_custom/orderprocessPC.webp" width="1708" height="1427" class="w100" alt="">
</picture>

OKな書き方

sourceタグのsrcset属性にショートコード書いても展開されないため、パスを書くしかない。

<picture>
<source srcset="/wp/wp-content/themes/wp1stop2024/img_custom/orderprocessSP.webp" media="(max-width:768px)">
<img src="[ sc_tempDirUri ]/img_custom/orderprocessPC.webp" width="1708" height="1427" class="w100" alt="">
</picture>

＜まとめ＞

【結論】WordPressでpictureタグのsource srcsetにショートコードを使ってはいけない。
固定ページ上ではsource srcsetにはパスを書くしかないようである。
環境：WordPress 6.7.1

WordPressのテーマphpでショートコードを呼び出した場合は問題ない。

<picture>
<source srcset="<?php echo do_shortcode('[ sc_tempDirUri ]'); ?>/img_custom/orderprocessSP.webp" media="(max-width:768px)">
<img src="<?php echo do_shortcode('[ sc_tempDirUri ]'); ?>/img_custom/orderprocessPC.webp" width="1708" height="1427" class="w100" alt="">
</picture>