ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

WordPress, タイトルでサイトがぐちゃぐちゃになる! エスケープ処理を追加する

wordpress image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

WordPressでタイトルを出力する the_title(), get_the_title()には、エスケープ処理が入っていません。

タイトルに "<script>タグの使い方" なんて入ってると、<script> がHTMLとして出力されページが崩れます。

それをフィルターフックを使って1箇所の修正で解決します。

the_title() ってエスケープしてなかったの?

the_title() はテーマのタイトル出力でよく使われます。なので、HTMLエスケープは内部でしていると思っていた。

しかしそうじゃないことに気づきます。

ある記事のタイトルに "<script>タグは~" のような文字列を付けてたんですが、サイトのページが崩れてしまった。けっこうぐちゃぐちゃに。

タイトルの <script> がHTMLとして出力されたために、それから下のコンテンツはすべてスクリプトとして認識されました。

もちろん、スクリプトコードじゃないので動きもぐちゃぐちゃ。

タイトルにページが壊れる文字列を入力できるなんて、記事やページを作るだけの人には分からないでしょう。

ここはプログラムで対応すべきです。

(書き手に禁則文字のルールを押し付けてはいけない。押し付けるなら入力不可にするべき。)

エスケープ処理の追加は1箇所で済ます。

the_title() や get_the_title() はいろんなところで使います。テーマで行うページタイトル出力だけではありません。

ソースコードを検索かければ分かりますが、数えるのが面倒なほど。

それをひとつひとつ修正するのなんてナンセンス。全部テストするなんて嫌だし。また、プラグインで使ってるところはどうしようもありません。

// 変更前
<h2><?php the_title(); ?></h2>

// 変更後
<h2><?php echo esc_html( the_title( '', '', false) ); ?></h2>

// すべての箇所にesc_html()で囲うのはやめるべき

修正は一箇所で行います。WordPressではおなじみのフィルターフックに追加します。

add_filter( 'the_title', function( $title, $id ) {
    return esc_html( $title );
}, 10, 2);

このフィルターは get_the_title() 内で処理が行われますが、the_title() でも修正されます。

the_title() の中で get_the_title() を使ってるから。

これは、プラグインで使われている箇所でもエスケープ処理が追加されるので便利ですよ?

WordPress.org公式リファレンス

Function - the_title

Function - get_the_title

前の投稿
WordPressの関数・クラスリファレンスの Codex 日本語版は終わりが近づいている。
WordPressのエスケープ関数。esc_html(), esc_attr() は必ず使おう!
次の投稿

WordPressの本

post-cta-image

たくさんあるなかで、WordPressの基本が学べる、目的別に学べる本を選びました。

  • WordPressの基本。
  • Webサイト作成から運用まで全体的に学ぶ。
  • かんたんなカスタマイズを学ぶ。
  • 何も分からないところから学ぶ。
  • WordPressからPHPプログラミングを学ぶ。

の5冊です。どうしてもネット上で調べて勉強するのが苦手という人におすすめです。

この内容をモノにすればほかの本は必要ありません。あとは自分の力で、書籍を使わずにインターネット上にある情報だけで学んでいけます。

コメントを残す