• 最終更新日:

WordPressでエスケープ処理する具体的な書き方 - 【esc_html、esc_url、esc_attrなど】

WordPressでエスケープ処理する具体的な書き方 - 【esc_html、esc_url、esc_attrなど】

今回はWordPressでエスケープ処理する具体的な書き方を紹介します。

説明する環境は以下の通りです。

  • macOS Catalina v10.15.5
  • Visual Studio Code v1.56.2
この記事の目次

WordPressでエスケープ処理する具体的な書き方

WordPressでデータを出力するときはセキュリティの関係上、無害化してから出力する必要があります。プログラム上問題あるテータを削除したり、適切な文字列に変換することをエスケープ処理と言います。

VSCodeを使っているならエスケープ処理ができていない箇所を自動で検出してくれます。設定については以下の参考にしてみてください。

URLのエスケープ処理

urlをエスケープする場合は、esc_urlを使います。
hrefやsrcで使用することが多いです。

<!-- トップページへのリンク -->
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">ホーム</a>

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

画像のパスを指定するときは以下です。

<!-- 画像のURLを指定 -->
<img src="<?php echo esc_url( get_template_directory_uri() . '/images/sample.jpg' ); ?>" alt="">

文字のエスケープ処理

文字を出力するときにHTMLの特殊文字が入っていると表示が崩れてしまいます。それを無害な文字列に変換して出力してくれるのが、esc_htmlです。

<!-- カテゴリー名を出力 -->
<h2><?php echo esc_html( $category->cat_name ); ?></h2>

HTML属性をエスケープ処理

class名やalt、data属性、valueなどのHTML属性を出力するときはesc_attrを使います。

<li class="p-test--<?php echo esc_attr( $term->slug ); ?>" data-filter=".<?php echo esc_attr( $term->slug ); ?>">テスト</li>

自分でエスケープ処理しなくて良いものとは?

WordPressでデータの関数でthe_がついているものはすでにエスケープ処理がされているため、自分でエスケープ処理する必要がありません。

以下は例です。

<?php the_title();?> <!-- タイトル表示 -->
<?php the_permalink();?> <!-- URL表示 -->
<?php the_excerpt();?> <!-- 抜粋を表示 -->
<?php the_content();?> <!-- 内容を表示 -->
<?php the_post_thumbnail();?> <!-- アイキャッチを表示 -->
<?php the_time();?> <!-- 投稿時間を表示 -->

get_で始まる関数についてはエスケープ処理がされていないので、自分でエスケープ処理する必要があります。そしてechoを使って出力します。

以下は極端な例です。get_で取得したデータは何かしら加工してから出力されるため、以下のように出力することはほとんどありません。基本的にはthe_を使って出力させましょう。

<?php echo esc_html( get_the_title() );?>
<?php echo esc_url( get_the_permalink() );?>
<?php echo esc_html( get_the_excerpt() );?>
<?php echo esc_html( get_the_content() );?>
<?php echo esc_url( get_the_post_thumbnail() );?>
<?php echo esc_attr( get_the_time() );?>

特定のHTMLタグのみを除去するには?

エスケープ処理とは話がズレますが、特定のHTMLタグを残してまま出力したい場合があります。以下は改行の<br>はそのまま残し、それ以外のHTMLタグは除去して出力する方法です。

  <?php
    $target_html = array(
    'br' => array(),
		  );
	  $demo_title   = str_replace( '\n', '', strip_tags( $post->post_title ) );
	  $demo_title   = str_replace( ' ', '<br>', $demo_title );
  ?>
<h1 class="p-demo__ttl">
	<?php echo wp_kses( $demo_title, $target_html ); ?>
</h1>

PHPでは改行を\nと表記するので、それを5行目で削除。6行目で全角スペースを<br>に変換しています。

9行目のwp_ksesで<br>を除くすべてのHTMLタグを削除して出力しています。これで全角スペース1つ打てば改行されるようになります。