ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

アフィリエイト広告を利用しています

エスケープ関数(esc_html、esc_urlなど)の使い方を解説【WordPress】

この記事は、最初の投稿から3年以上が経過しています。

最終更新から705日が経過しています。

エスケープ関数(esc_html、esc_urlなど)の使い方を解説【WordPress】

「WordPressでテーマをカスタマイズするのにタイトルや日付をそのまま表示させたらいけないの?」

「エスケープ関数はどうやって使えばいいの?」

悩み

こういった悩みにお答えします。

私は、2015年頃からWeb制作の仕事をはじめて、160件ほどのWebサイトを制作してきました。
その間、いろいろな失敗を繰り返し、クライアントからのフィードバックや本などで勉強することにより、多くのノウハウを得ることができました。

目次
  1. エスケープ関数とは
  2. エスケープ関数の使い方
    1. esc_html()
    2. esc_url()
    3. esc_attr()
    4. esc_js()
    5. esc_sql()
    6. esc_textarea()
  3. エスケープいる?いらない?
    1. エスケープがいる関数
    2. エスケープがいらない関数
  4. まとめ

エスケープ関数とは

WordPressでは、信頼できないデータが、さまざまな情報源から入ってきます (ユーザー、第三者のサイト、データベース)。
そして、これらすべては、入力時と出力時の両方で検証する必要があります。

エスケープは、WordPressでテーマのカスタマイズをするときには重要な処理です。
自分もそうですが、初心者のころはエスケープがなくてもWebサイトとしての機能はできてしまうので、あまり意識せずにWordPressを構築してしまいます。
ただ、いろいろ知識がついてくると実はヤバいことをしていたんだとわかってきます。
なので、データは適切に無害化 (サニタイズ) することが必要になってきます。

エスケープ関数の使い方

esc_html()

いちばんよく使うエスケープ関数です。
HTMLタグに使う記号がそのまま表示されないように文字参照(HTMLエンティティ)に変換します。

  • 「&」 → 「&」
  • 「<」 → 「&lt;」
  • 「>」 → 「&gt;」
  • 「"」 → 「&quot;」
  • 「'」 → 「&#039;」
<p><?php echo esc_html( $text ); ?></p>
関数リファレンス/esc html

esc_url()

URLを表示する場合に使うエスケープ関数です。
HTMLに使うリンクのURLや画像パスで使います。
WordPress内ページのURLをテンプレートファイルで使う場合はhome_urlはかなり使います。

<a href="<?php echo esc_url( home_url() ); ?>">ホーム</a>
関数リファレンス/esc url

esc_attr()

HTMLタグのURL以外の属性に使うエスケープ関数です。
はじめのころはesc_htmlとの使い分けがよくわかっていませんでしたが、今はしっかり使い分けるようにしています。
$_POSTや$_GETで取得する値は、悪意のある人が異常な値を入力する可能性があるので、エスケープが特に重要です。

<input type="text" valu="<?php echo esc_attr( $_POST["text"]; );  ?>">
関数リファレンス/esc attr

esc_js()

JavaScriptのエスケープ関数です。

関数リファレンス/esc js

※日本語の関数リファレンスページもないです。

esc_sql()

データベースで使うSQLのエスケープ関数です。

関数リファレンス/esc sql

esc_textarea()

フォームのテキストエリアのエスケープ関数です。

関数リファレンス/esc textarea

「esc_js()」「esc_sql()」「esc_textarea()」は使ったことがないので覚える必要はないと思いますが、なんとなくそういう関数もあったなくらいで記憶の片隅にあればいいと思います。

エスケープいる?いらない?

WordPressでよく使う関数にはエスケープいる関数、いらない関数があるので紹介します。

エスケープがいる関数

関数名が「the_」ではじまる関数は、これを書くだけで出力される関数で、すでにエスケープ処理がされています。
なので、この関数をカスタマイズで使うときにはエスケープ関数を使わず、そのまま書けば大丈夫です。
エスケープ関数をつけてしまっても問題にはならないと思いますが、二重エスケープになるのであまりよい書き方ではないです。

  • the_title()
  • the_permalink()
  • the_content()
  • the_time()
  • the_date()
  • the_id()

例えば、日付をフォーマットを気にせず表示するだけなら「the_date()」で取得、表示します。

<time><?php the_date(); ?></time>

//2020年6月6日

エスケープがいらない関数

関数名が「get_the_」ではじまる関数は、エスケープ処理がされていません
ただ、単純にエスケープ処理をして「get_the_」を使うのであれば「the_」の関数を使えばいいです。
「get_the_」を使う場面としては、この関数で取得したタイトルや日付やidを使って別の処理に使うということになります。
その処理をしてできた値をエスケープ処理をして表示させることになります。

  • get_the_title()
  • get_the_permalink()
  • get_the_content()
  • get_the_time()
  • get_the_date()
  • get_the_id()
  • home_url()

例えば、日付を好きな形式に変換して表示する場合は、「get_the_date()」で取得します。

<time><?php echo esc_html( get_the_date('Y.m.d') ); ?></time>

//2020.06.06

まとめ

WordPressのエスケープ関数の使い方を紹介しました。

  • esc_html()
  • esc_url()
  • esc_attr()

この3つはよく使うので特に覚えておく必要があります。