category

WordPress記事中でWeb Componentsを利用する方法

Web Componentsを活用して独自のHTMLタグを開発すると、高度な表現を完結な記述で実現できて便利です。
WordPressでWeb Componentsを利用したい場合、記事中などに記載したタグがWordPress標準のサニタイジング機能により無効化され、表示されません。

以下の2点の対応により、WordPressにも独自タグを表示できます。

  • 標準以外のタグを利用可能にする
  • エスケープされない書き方で記事に掲載

標準以外のタグを利用可能にする

WordPressの記事中にHTMLタグを記載した場合、決まったタグ以外は表示の際に除去されます。
利用可能なタグを追加したい場合には、wp_kses_allowed_htmlにタグ名(以下の例ではmy-element)と属性名(以下の例ではspec)を登録します。
function.phpなどにadd_filter()を実装することで登録可能です。

add_filter('wp_kses_allowed_html', function($tags, $context) {
  switch( $context ){
  case 'post':
    $tags['my-element'] = array(
      'spec' => true,
    );
    break;
  }
  return $tags;
}, 10, 2);

エスケープされない書き方で記事に掲載

wp_kses_allowed_htmlに追加するとタグは利用可能になりますが、記事表示の際にWordPressによってタグが書き換えられ、構成が崩れます。

<div><my-element>
</my-element></div>

のようにdivタグで前後を囲むと構成の崩れを抑えられます。