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と表記するので、それを５行目で削除。６行目で全角スペースを<br>に変換しています。
9行目のwp_ksesで<br>を除くすべてのHTMLタグを削除して出力しています。これで全角スペース１つ打てば改行されるようになります。
