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

Web Componentsを活用して独自のHTMLタグを開発すると、高度な表現を完結な記述で実現できて便利です。

WordPressでWeb Componentsを利用したい場合、記事中などに記載したタグがWordPress標準のサニタイジング機能により無効化され、表示されません。

以下の２点の対応により、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タグで前後を囲むと構成の崩れを抑えられます。

⁋ 2018/06/05↻ 2024/12/18
中馬崇尋
Chuma Takahiro
WordPress記事中でWeb Componentsを利用する方法
Web Componentsを活用して独自のHTMLタグを開発すると、高度な表現を完結な記述で実現できて便……
WordPress REST APIのGETエンドポイント
WordPress REST APIはWordPress 本体に統合され、デフォルトで有効になっているWebAPI機能です。 現時……
WordPressのメディアをGCSに置く
WordPressはテーマやプラグイン、画像などをwp-content/ディレクトリ内に一式保管する……
WordPressのtitleタグ編集
WordPressのtitleタグはwp_head()関数がほかのヘッダータグとともに出力しています……