開発

WordPressのショートコードってHTMLタグの属性値としては使用出来ない。

作成日： 2018年8月18日

WordPressのテーマを作成しておりまして、そこでアイキャッチの画像パスを取得するショートコードを作成しました。

こんな感じです。

PHP

function sc_featuredimage_path() {
    if (has_post_thumbnail() ){
        return get_the_post_thumbnail_url( get_the_ID(), 'full' );
    }
}
add_shortcode( 'sc_featuredimage', 'sc_featuredimage_path' );

その上で、記事本文の中で

HTML

<div class="image-cover" style="background-image:url([sc_featuredimage])">・・・</div>

と記述すれば、指定した要素の背景画像としてアイキャッチ画像を表示出来るのではなかろうかと思ったのですが・・・

ショートコードが出力されない！

想定では

HTML

<div class="image-cover" style="background-image:url(wp-content/uploads/hogehoge.jpg)">・・・</div>

だったのですが、

HTML

<div class="image-cover" style="background-image:url([sc_featuredimage])">・・・</div>

のまま表示されてしまいます。

これはおかしいと原因を探ってみると・・・

shortcodes are not allowed in html attributes, shortcodes are not programing language, they are place holders to proper html content.（ショートコードはhtml属性では許可されず、ショートコードはプログラミング言語ではなく、適切なhtmlコンテンツのプレースホルダーです。）

How do I use Shortcodes inside of HTML tags?

セキュリティ上禁止！

されているんですって。

属性値を持たないショートコードなら使える、という事例の紹介もありましたが、こちらで検証してみましたが同様に使えませんでした。

さて、困ったので背景画像に設定する、というショートコードを別途作成しなければならなくなりました。

残念。