Blog ブログ

今回はlink:hrefのショートコードが展開されない場合の対処方法についてご紹介いたします。

今回のエラー状況

ワードプレスの固定ページにて、コーディングのデータを流用しようとしました。
その際、svgスプライトを使用していたため下記のような記述で流用しようとしました。

静的コーディングの記述

<svg>
  <use class="ico" xlink:href="/img/svg/sprite.min.svg#sample-icon"></use>
</svg>

wordpressの固定ページの記述

<svg>
  <use class="ico" xlink:href="[template_url]/img/svg/sprite.min.svg#sample-icon"></use>
</svg>

結果、[template_url]は展開されず、svgが表示できなくなってしまいました。

ショートコードが展開されない原因

今回のショートコードが展開されない原因はクロスサイトスクリプティング脆弱性の修正による仕様の制限です。

上記の理由により、xlink:hrefという属性内のショートコードは展開されない仕様になっています。

特定の属性でショートコードを使えるようにするには？

wp_kses_allowed_htmlフィルターを使用する

wp_kses_allowed_htmlフィルターを使用することで、特定の属性のショートコードを展開することができます。
funtions.phpに書きを記述します。

// ショートコードの展開を有効化
function my_kses_allowed_html($tags, $context)
{
  if ($context == 'post') {
    $tags['use']['xlink:href'] = true;
  }
  return $tags;
}
add_filter('wp_kses_allowed_html', 'my_kses_allowed_html', 10, 2);

使い方の詳細は下記を参照。

まとめ

いかがでしたでしょうか。
今回はuseのxlink:hrefタグのみ展開を許可しましたが、その他にもいろいろなタグや属性について応用できるかと思います。