WordPressのショートコードが展開されない時の対処方法

WordPressでタグの内部にショートコードを埋め込むことは結構あります。その時にタグの内部のショートコードが展開されず、なんで？と思って調べた時のことをまとめておきます。

ショートコードが展開されないのはどんな場面？

HTMLサイトなどをWordpressに載せかえる時に、画像やファイルのパスを指定している箇所をテンプレート関数に置き換えることがあります。

この時、テンプレートファイルの中であれば、PHPコードがそのままかけるので問題は起きません。しかし、記事内の場合はそのままPHPコードが書けないのでショートコードに置き換える必要があります。

例えば、次のようなget_template_directory_uri()を出力するショートコードを作るとします。

function bfp_get_template_directory() {

    $directory = get_template_directory_uri();
    // Code
    return $directory;
}
add_shortcode( 'template_directory', 'bfp_get_template_directory' );

このショートコードを使って、HTMLのパスの部分を置き換えると、記事内でもテンプレートタグが間接的に使えるようになります。

HTMLタグ内でショートコードが展開される例

WordPressの初期状態でも、imgタグのsrcはショートコードが展開されます。

<picture>
    <img src="[shortcode]/voice02-img02.jpg"><!--- 展開される --->
</picture>

HTMLタグ内でショートコードが展開されない例

WordPressの初期状態では、sourceタグのsrcsetや、scriptタグのsrcに書かれたショートコードは展開されません。

<picture>
  <source media="(min-width:768px)" srcset="[shortcode]/voice02-img02-pc.jpg"><!--- 展開されない --->
</picture>
<script src="[shortcode]/js/script.js"></script><!--- 展開されない --->

なぜHTMLタグ内でショートコードが展開されない？

4.2.3で修正されたクロスサイトスクリプティング脆弱性の修正による仕様の制限です。

WordPress 4.2.3 Security and Maintenance Release

WordPress 4.2.3 is now available. This is a security release for all previous versions and we strongly encourage you to ...

wordpress.org

1.HTMLコメント内のショートコードを使用不可にした。

2.HTML要素内の属性値のショートコードを標準では一部使用不可にした（input、select、optionなど）。

3.HTML要素外（例えば行頭にあるショートコード）については特に制限していない。

https://ja.wordpress.org/support/topic/%e3%83%90%e3%83%bc%e3%82%b8%e3%83%a7%e3%83%b3423%e3%81%ab%e3%82%a2%e3%83%83%e3%83%97%e3%83%87%e3%83%bc%e3%83%88%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81input%e3%81%aevalue%e3%81%ab%e3%82%b7%e3%83%a7/

HTMLタグ内でショートコードを使えるようにするには？

以下のフックで書き換えると使えるようになります。

ルールとしては、$tag[タグ名][アトリビュート名]という感じだと思います。

以下の例では、imgタグのsrcset、sourceタグのsrcを追加しています。

add_filter( 'wp_kses_allowed_html', 'my_wp_kses_allowed_html', 10, 2 );
function my_wp_kses_allowed_html( $tags, $context ) {
	$tags['img']['srcset'] = true;
	$tags['source']['src'] = true;
	return $tags;
}

Contact form 7のフォーム内でショートコードが展開されない

同じような理由で、Contact form 7のフォーム内も、ショートコードが展開されません。

対策は簡単です。

以下のコードをfunctions.phpに追加することで、フォーム内のショートコードが展開されるようになります。

このTipsは結構使えると思います。

add_filter( 'wpcf7_form_elements', 'mycustom_wpcf7_form_elements' );

function mycustom_wpcf7_form_elements( $form ) {
$form = do_shortcode( $form );

return $form;
}

ウィジェットエリアのショートコードが展開されない時の対策

ウィジェットエリアのタイトルや本文エリアに記載したショートコードが展開されない時の対処方法は以下の記事にまとめてあります。

Wordpress ウィジェットのタイトルにHTMLタグを使用する方法

WordpressのウィジェットのタイトルにはHTMLタグが使えません。タイトルにHTMLタグを入力しても保存する時に消えてしまいます。 その影響で、アイコンフォントなどを<i>タグでタイトルに直接書くと消えてしまいます。 この記事では、W...

nldot.info

2021.11.15

まとめ

HTMLサイトをWordpressにするときに、パスを取得するテンプレートタグをショートコードに置き換えるのは当たり前に行われます。

しかし、imgタグのsrc以外は基本展開されないというのがWordpressの基本仕様です。

もし展開されないショートコードがあったら、今回の記事を参考に例外を追加していって展開されるようにしましょう。