WordPressの管理画面から「Web制作」というカテゴリーを作ったとします。

その「Web制作」のカテゴリーページには「看板となる画像」を表示する目的で、下の画像のような独自の入力欄を作ったとします。

この入力欄は画像のURLを入力するために、HTMLのimg要素やsrc,alt属性などを使って「ある程度柔軟に入力できるように」しています。

必要なHTML要素や属性だけ使えるようにしよう

ところで、画像を表示するために必要なHTML要素や属性以外は、何でもかんでも入力できる状態にしておかなくてもいいので「特定のHTML要素や属性以外は使えないように制限」しました。

ちなみにですが「使えるHTML要素や属性を制限」することによって、タグの閉じ忘れによる「Webサイトの表示崩れ」や「非推奨となってしまったHTML要素や属性の利用」をある程度防ぐこともできると思います。

というわけで、以上が前提です。

以下に「使えるHTML要素や属性を制限」方法を書きましたので、機会がありましたらご参考ください。

WordPressの特定の入力欄で使える「HTML要素や属性」を制限する方法

WordPressで用意されている「wp_kses」を使うとできますので、利用します。

コードの基本形

wp_kses( $string, $allowed_html, $allowed_protocols );

使えるパラメーター

「特定の文字列に対して許可するHTML要素や属性、プロトコルを指定する」というシンプルな仕組みですね。

コードの書き方と使えるパラメーターを確認したところで、さっそく準備をしましょう。まずは「使用を許可するHTML要素や属性を指定」します。

使用を許可するHTML要素や属性を指定しよう

今回は例として、画像の表示に関係のある要素や属性をピックアップしました。

変数「$allowed_html」を用意して、img要素を使えるようにします。

img要素を使えるようにする

$allowed_html = array(
 'img' => array()
);

次は、img要素に関連するsrc,srcset,alt,titleなどの属性を使えるようにします。

img要素に関連する属性を使えるようにする

$allowed_html = array(
 'img' => array(
  'src' => array(),
  'srcset' => array(),
  'alt' => array(),
  'title' => array()
 )
);

という感じで、上記のコードのように使いたいHTML要素や属性を指定すればOKです。

他の要素も使えるようにしたい場合はこうする

今回は画像に関連するHTML要素や属性を例にしましたが、他にも使いたい要素があれば、同じように追加します。下の例ではp要素を追加しました。

$allowed_html = array(
 'img' => array(
  'src' => array(),
  'srcset' => array(),
  'alt' => array(),
  'title' => array()
 ),
 'p' => array()
);

という感じで「使用を許可するHTML要素や属性を指定」できたら「wp_kses」を使ってみましょう。

「wp_kses」を使って使えるHTML要素や属性を制限しよう

以下のコードでは「allowed_html_term_meta」という関数を作って、文字列「$string」に対して使用を許可するHTML要素や属性を指定して、結果を返しています。

//term_metaで使えるHTML要素や属性を指定
function allowed_html_term_meta( $string ) {
 $allowed_html = array(
  'img' => array(
   'src' => array(),
   'srcset' => array(),
   'alt' => array(),
   'title' => array()
  )
 );
 return wp_kses( $string, $allowed_html );
}

上記のような感じで使えばいいですね。なんとなくわかりにくいな・・・と思うかもしれません（私がそうでした）が、何度かやってみると感覚がつかめると思います。

おまけ：投稿で使えるHTML要素や属性を利用して指定もできるよ

「いちいち指定するHTML要素や属性を考えるのは手間だ・・・」という場合は「wp_kses_allowed_html」を使ってパラメーターに「post」を指定すると、投稿で使えるHTMLの要素や属性を取得できます。

$allowed_html = wp_kses_allowed_html( 'post' );

この値をそのまま利用して設定してもいいですね。「この入力欄は投稿と同じようにHTML使えるよ」という感じで説明もできます。

まとめ

今回あげた例のように、特定の入力欄を「どんな方が」「どう入力するのか」わからない場合や「不必要にHTMLを使えるようにしなくてもいい」という場合には使える方法だと思います。