WordPressでエスケープ処理をするときの書き方についてまとめていきます。

Contents

  1. エスケープ処理
    1. esc_url（URLのエスケープ）
    2. esc_attr（HTML属性のエスケープ）
    3. esc_html （文字列のエスケープ）

WordPressのテーマでechoを使って文字列を出力する場合、セキュリティの関係上サニタイズ（無害化）してから出力する必要があります。さらに、ブラウザが予期しない動作（不正なHTMLやスクリプトを実行）をしないように適切な文字列に変換する必要があり、この処理のことをエスケープ処理と言います。

エスケープ処理

WordPressでエスケープ処理をする関数は複数ありますが、テーマを自作する際に必要になってくるのは主に以下の3つです。

  • esc_url（URLのエスケープ）
  • esc_attr（HTML属性のエスケープ）
  • esc_html （文字のエスケープ）

esc_url（URLのエスケープ）

出力するコードがURLの場合は、esc_urlを使用してエスケープ処理をします。

esc_url( $url )

パラメータ
  • $url(文字列）：（必須）エスケープするURL
    • 　　　　　　　　　　　　　　　　
  • $protocols(文字列　配列）：（オプション）使用可能なプロトコルの配列。（初期値：null）
  • $_context(文字列　）：（オプション）URLをどのように使用するか。（初期値：'display'）
戻り値
  • 'clean_url'フィルタが適用された後の無害化されたURL。もし$urlが$protocols以外のプロトコルを指定した場合、あるいは$urlが空文字列を含んでいる場合は、空文字列が返されます。
<!-- トップページへのリンク -->
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">ホーム</a>

<!-- Aboutページへのリンク -->
<a href="<?php echo esc_url( home_url( '/about/' ) ); ?>">About</a>

因みに、home_urlはWordPressの管理画面「設定」→「一般」内にある「サイトアドレス (URL)」の値を返す関数です。なので、サイトアドレス（URL）が「http://example.com」と設定されている場合は下記のように出力されます。

<a href="http://example.com">ホーム</a>
<a href="http://example.com/about/">About</a>

画像のパスを指定する場合は下記のようにします。

<!-- テーマディレクトリ内の画像　-->
<img src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/sample.jpg' ); ?>" alt="">

get_template_directory_uri()はテーマのディレクトリURIを取得します。末尾にスラッシュ（ / ）は含まれません。

esc_attr（HTML属性のエスケープ）

出力するコードがHTML要素の属性（class、alt、value、 title、etc.）の場合は、esc_attrを使用してエスケープ処理をします。

ただし、出力したいコードがURLの場合は、esc_url()を使用してエスケープ処理をしましょう。

esc_attr(　$text )

パラメータ
  • $text(文字列）：（必須）エスケープする文字列
戻り値
  • エスケープされた文字列

以下は出力時に $_POST データをエスケープする例です。

esc_attr()で属性値を出力する場合は、必ず引用符（"）で囲む必要があります。

<?php $name = ( isset( $_POST['name'] ) ) ? $_POST['name'] : ''; ?>
<input type="text" name="name" value="<?php echo esc_attr( $name ); ?>">

esc_html （文字列のエスケープ）

HTMLで使用される特殊文字（&、<、 >、 "、'）を適切な文字列に変換させるにはesc_htmlを使用してエスケープ処理をします。

esc_html( $text )

パラメータ
  • $text(文字列）：（必須）エスケープする文字列
戻り値
  • エスケープされた文字列

esc_htmlを使用して「A link」というリンクタグではなく、<a href="http://www.example.com/">A link</a>という文字列として出力してみます。

<?php
$html = esc_html( '<a href="http://www.example.com/">A link</a>' );
echo $html;
?>

出力結果

&lt;a href=&quot;http://www.example.com/&quot;&gt;A link&lt;/a&gt;

「<、"」などが全て「文字参照」に置換されて出力されます。

Related post

【HTML】特殊文字・記号の文字コードまとめ