2019年2月3日ツイートシェアB!はてブポケットWordPressでテーマを作っていると、こちらから出力しているにエスケープしていない箇所があったら怒られます。誰に怒られるかというと、「WordPressのコーディング規約」ですね。WordPress先生いわく、以下のとおりです。(ユーザー、第三者のサイト、あなた自身のデータベースも!...)。これらすべては、入力時と出力時の両方で検証する必要があります。悪意のある文字列をうっかり出力しそうになった場合もエスケープ処理が正しく行えていれば、トラブルを未然に防げるということですね。Codex日本語版の「データ検証」のページになります。日本語版ザーッと見て適切な箇所で使う必要があるのですが、この記事では特に頻出するエスケープ関数について3つ紹介していけたらと思います。文字のエスケープHTMLの特殊文字が入っていても無効化して表示してくれる関数がesc_html()です。<みたいな文字をそのまま出力させちゃうと、HTML構造が崩れちゃいますよね。このエスケープ処理を通してあげると、HTMLタグの邪魔になる文字は無効化して文字列として表示してくれます。以下のような感じですね。日本語版URLのエスケープ個人的に一番使うことが多いのが、URLのエスケープ処理です。関数としてはesc_url()を使います。ヘッダーのロゴをテーマから出力したい場合は、以下のような感じです。alt="">http~から始まるURLを記載する時は、このesc_url()を使う癖を付けてください。日本語版HTML属性のエスケープclassやaltなど、HTMLタグの属性の値を出力する場合に使われるのが、esc_attr()のです。そんなに頻繁に使うことはないですが、HTMLタグの中で使う3兄弟の1人としてセットで覚えています。以下のように使います。日本語版esc_html()、esc_url()、esc_attr()は親しいところで使われるのでセットで覚えておくといいでしょう!それにしても、WordPressのエスケープ関数は細かく分けられていて、慣れるまでが大変です...。WordPressが出力するものは中でエスケープされているエスケープするのは、自分でechoしている時に限ります!わたしはコーディング規約で自動チェックされるようにしていますが、動きを見ていると、どうもechoと連動して反応しているような...笑WordPressで値を引っ張ってくるための主要な関数の多くは2種類あります。the_から始まるものget_から始まるもの分かりやすいところだと、the_title()とget_the_title()でしょうか。上の説明を見た方ならすぐ分かると思いますがthe_title()はエスケープ処理が不要、get_the_title()はエスケープ処理が必要です。the_title()では、この関数の内部でエスケープ処理をしてくれているからですね。並べて書くと以下のような感じです。?></h2>特に理由がなければ、the_での出力がおすすめです。エスケープに悩む必要はなくなるので。リンクWordPressのコーディング規約でチェックWordPressのテーマには「こんなルールで作ってくださいね」というコーディング規約があります。それをまとめたのが、WordPress-Coding-Standardsにまとまっています。テーマを作ったら、このコーディングルールに準拠しているかを確認するといいでしょう。公式に申請するときもチェックされるものかと(申請したことないので分かりませんが...)チェックすると、エスケープ処理が必要かどうかが簡単に分かります。Windowsに導入する方法は以下にまとめているので、参考にしていただければと思います。'get_template_directory_uri'.これはさっき例で出したように、URLをエスケープせずに表示しているからですね。alt="">以下のようにURLをesc_url()で囲ってあげることで消すことができます。alt="">このように、WordPress-Coding-Standardsでチェックする癖があると、「あ、この場合もエスケープ処理がいるのか...」であったり、「じゃあどのエスケープ関数を使うんだろうか...」みたいに調べるキッカケにもなったりします。テーマ開発者はぜひ導入してチェックしてみてください!VSCode上でチェックさせると楽WindowsとかVSCodeとか、特定の環境下の説明ばかりですみません。(他の環境でも似たようなことはできると思うので調べてみてください...)ターミナルを開いてコマンド打ってチェックするのは、めちゃくちゃ面倒くさいです。この環境のままだと、そのうちチェックしなくなるはずです。コーディングしたタイミングですぐにエラーってテキストエディタ上に出してくれたら、「あ、直さなきゃ」ってなりませんか。わたしはVSCodeを拡張させてWordPressのコーディング規約からズレたらエラー表示させるということをやっています。記事としては以下の「phpcs」が参考になるかと思います。VSCodeでWordPress開発するための拡張機能とおすすめの設定エラーがあれば、赤い波線で表示され、マウスホバーするとエラーメッセージを見ることができます。エラーメッセージに従ってエスケープするとエラーは消えます。@haniwa008WordPressの主要なエスケープ関数3つとエスケープ対象のコードを見つける方法でした。HTMLエリアの出力に関するesc_html()、esc_url()、esc_attr()は、エスケープ関数の中でも使う頻度が高いです。その他は以下を参考に都度どれが当てはまりそうか確認してみてください。日本語版とりあえず、エラー箇所がチェックできる環境が準備できていれば、あとは足りない部分を調べればいいだけなので、「WordPress-Coding-Standards」はマジで偉大だと思います。リンクこのページが役に立ったらいいね!お願いします運営の励みになります...。同じカテゴリーの一覧を見る次の記事ジオシティーズの代わりは?移行方法とおすすめの移行先の完全まとめ前の記事レスポンシブのブレークポイントの決め方!PCデザインカンプから再...はにわまんWordPressが好きなフリーのWebコーダー。300件以上のWordPressカスタマイズを対応してきました。