ichikawa

こんにちは！フロントエンドエンジニアの市川です。
今回は、WordPressのフィルターフックという機能を使って、投稿画面で一部HTMLタグが消える現象を解決する方法をご紹介致します。

タグが消える原因

WordPressには「kses」というライブラリが標準で入っているのですが、タグ無害化のために投稿画面からの一部のHTMLタグの入力を制限しています。 この制限、管理者権限でもひっかかってしまうので、管理者よりも更に上の「特権管理者」でないとクリアすることができません。 必要な機能であることは理解できますが、投稿画面でHTMLタグを使いたいシチュエーションもありますし、知らぬ間にタグが消えてサイトが崩れていたら一大事ですよね。。

解決方法

/wp-content/themes/{ご使用のテーマ名}/functions.phpに追記していきます。

サンプルソース

下記のサンプルソースでは、3つのタグ（とその属性）を投稿画面からの投稿時に有効化しています。

1. <script>タグ
2. <button>タグ（data属性（data-hoge-hoge, data-piyo-piyo）、class属性）
3. <div>タグ（data属性（data-hoge-hoge, data-piyo-piyo）、class属性、id属性）

// HTMLエディタで使用できるタグを追加
add_filter( 'wp_kses_allowed_html', 'customKsesAllowedHtml', 10, 2 );

function customKsesAllowedHtml( $tags, $context ) {
    if ( $context == 'post' ) {
        $tags['script'] = true;
        $tags['button'] = array(
            'data-hoge-hoge'=>true,
            'data-piyo-piyo'=>true,
            'class'=>true
        );
        $tags['div'] = array(
            'data-hoge-hoge'=>true,
            'data-piyo-piyo'=>true,
            'class'=>true,
            'id'=>true
        );
    }
    return $tags;
}

解説

ざっくりですが処理の内容を説明します。

add_filter( 'wp_kses_allowed_html', 'customKsesAllowedHtml', 10, 2 );

add_filter(...)でフィルターフックを実行させています。第一引数のwp_kses_allowed_htmlは、ksesライブラリで有効なHTMLタグを設定するためのトリガーのようなものです。 第二引数のcustomKsesAllowedHtmlは、有効タグの設定処理の関数名を指定しています。第三引数は、複数フックがあった場合の優先順位（小さい順に実行）の指定、第四引数は関数で使用する引数の数を指定します。（※第三、第四引数はオプション項目です）

function customKsesAllowedHtml( $tags, $context ) {
    if ( $context == 'post' ) {
        $tags['script'] = true;
        $tags['button'] = array(
            'data-hoge-hoge'=>true,
            'data-piyo-piyo'=>true,
            'class'=>true
        );
        $tags['div'] = array(
            'data-hoge-hoge'=>true,
            'data-piyo-piyo'=>true,
            'class'=>true,
            'id'=>true
        );
    }
    return $tags;
}

if ( $context == 'post' ) の部分ではフックを実行するタイミングを指定しています。今回の場合は投稿画面からの投稿です。 $tags[...]の部分では有効にしたいHTMLタグを指定しています。array(...)に書いている項目は有効にするHTMLタグの属性です。data-*属性を有効にさせたい場合ですが、WordPress5.1以前をご使用の方は、使っているdata-{名前}の分だけ1つ1つ指定する必要があるようです。。5.1以上をお使いの方は、次のセクションに書いてある方法で簡単に設定できるみたいです！

WordPress5.1以上のdata属性設定方法

ここでWordPress5.1以上をご使用の方に朗報です！！
サンプルソースではdata属性分1つ1つ指定していましたが、WordPress5.1以上ではデータ属性ごと設定しなくても、'data-*'=>trueで一括で設定できるみたいです。

詳細は下記公式のアナウンスをご確認下さい。

KSES: Allow HTML data-* attributes.
https://github.com/markjaquith/WordPress/commit/a0309e80b6a4d805e4f230649be07b4bfb1a56a5#diff-a0e0d196dd71dde453474b0f791828fe

おわりに

いかがでしたでしょうか。同じ現象に悩んでいる方の参考になれば幸いです！
今回は以上になります。最後までお読み頂きありがとうございました！