【WordPress】 コメント欄のカスタマイズ(その2)

コメントのカスタマイズ後半です。

前回見た目を変えましたが、今回は使わない機能を除去するカスタマイズです。

スポンサーリンク

今回やること

・コメントに書かれたurlがリンクにならないようにする
・コメント欄でhtmlタグを使えないようにする
の2つです。

コメントに書かれたurlがリンクにならないようにする

メールを必須にせず、気軽に書き込めるようにしたためにコメントスパムが心配です。
そこでURLが自動的にリンクになってしまう機能を止めましょう。

20141116_comment_02

子テーマのfunctions.phpに以下のコードを追加

これはcomment_textというアクションフックでフックされているmake_clickableという関数を除去するという内容です。

make_clickableは/wp-includesの中のformatting.phpに記述されています。
読んでみると実はurlだけでなくメールアドレスやftpも自動リンク化するようです。

20141116_comment_01

さてどうなったでしょうか。

20141116_comment_03b

出来ました。

ソース追加後のコメントだけでなく、追加前のコメントもリンクが解除されています。
どうやらコメントの取り込みをする時ではなく表示する際に処理をしているようです。
過去のコメントもリンクを一括で解除することが出来るということですね。

コメント欄でhtmlタグを使えないようにする

WordPressのコメントはデフォルトでいくつかのタグが使えますが、シンプルなコメント欄にしたいならいらない機能です。

20141116_comment_05

20141116_comment_04

この機能を除去してしまいましょう。

こちらのサイトを参考にさせていただきました。
「コメントのHTMLを無効にする」(WebSpaceBlog)

以下のコードを子テーマのfunctions.phpに追加します。

※このページの最後ですこし書き換えています。

詳しく見て行きましょう。

まず、

は順番に

コメントのテキストを呼び出す。
コメントフィードのテキストを呼び出す。
コメントの抜粋を呼び出す。(サイドバーの最新コメント一覧表示などで使われる)

というタイミングでフックを掛けてescape_tagsという関数を呼び出しています。

フックて追加する関数の中身です。
まず、if文でコメント、トラックバック、ピンバックの3種類の中から、コメントだけに限定しています。
これはトラックバックのタイトルが<strong>で強調されていたりするためです。

次にhtmlspecialcharsでタグをエスケープしています。
実はタグを取り除くのではなくテキストとして表示するという仕組みです。
例えば「&」は「&amp;」に置き換えることで特殊記号ではなく文字として扱うようにするということです。

htmlspecialcharsはデフォルトで「&」「<」「>」「”」をhtmlエンティティに変換しますが、さらにENT_QUOTESという引数を加える事で「’」も変換されるようになります。

では実際に試してみましょう。

20141116_comment_07

書き込んだタグが機能せず、そのまま表示されています。
できました。

表示の際に処理をしているため、既にデータベースに取り込まれている過去のコメントのタグも全てテキストとして表示されます。

ただし、ちょっと気になる点も・・・

いろいろ試しているとちょっと気になることがありました。

以下の様なコメントを書き込むと思いもよらない表示になります。

20141116_comment_10

20141116_comment_13

そこで今回タグ機能除去のために追加したエンティティ化を解除してみると・・・

20141116_comment_11

「<>&」は直りましたが「<重要>」が消えています。

データベースを覗いてみると、

20141116_comment_12

データベースにも「<重要>」はありません。
データベースに無いデータは表示出来るわけがありませんよね。
おそらくWordPressのセキュリティ対策の一環として、データベース取り込み前に「<>」で囲まれた未知のタグを除去しているのだと思われます。

一つ利口になりました。

話を戻してこの文字化け、

20141116_comment_13

エンティティ化した特殊記号がデコードできていません。
通常はブラウザで自動的にデコードされるはずなのですが、どういうことでしょうか。

もう一度データベースを見てみましょう。

20141116_comment_12

今回やっていることは表示の際にエンティティ化する処理です。
しかしデータベースにある元のテキストが既にエンティティ化されているのです。
処理がダブっているのです。

少し考えれば当たり前のことなのですが、WordPressがコメントを受け取りデータベースに入れるまでにセキュリティ対策としてエンティティ化をしています。
そこにさらにエンティティ化していることになるのです。

すなわち、

コメント取り込み → データベース でエンティティ化(WordPressの処理)

データベースから取り出し → コメント表示 でエンティティ化(今回追加した処理)

ブラウザ表示でデコード(ブラウザの処理)

このようにして「&amp;」が残るのでしょう。

これは困りました。

しかし、よくよく調べてみると実は「htmlspecialchars」には多重にエンティティ化をさせない機能がついていました。

これを以下のように書き換えます。

第4引数に「false]を追加しました。
これで既にエンティティ化されている箇所は処理を行いません。
ついでに第3引数の文字エンコーディングもデフォルト値が変更になると厄介なので「’UTF-8’」を追加しておきましょう。

するとどうなるでしょうか。

20141116_comment_14

文字化けが直りました。

ただし一つ注意が必要になります。
多重エンティティ化ができないため、コメント欄にエンティティ化済のテキストを書き込むことができなくなります。
例えば「&amp;ってなんだっけ?」を書き込むとこうなります。

20141116_comment_15

まぁ、技術系ブログでなければあまり気にする必要はないでしょう。

まとめ

・コメントに書かれたurlの自動リンク化はfunctions.phpに「remove_filter」を追加することで防止できる。

・コメント欄のhtmlタグ防止は「htmlspecialchars」でhtmlエンティティ化することで対応できる。
ただし多重エンティティ化を防ぐため第4引数に「false」を加えておく必要がある。
これによりエンティティ化された文字をコメント欄に表示させることができなくなる。

・コメントに書き込まれた<重要>など「<>」で囲まれたタグっぽい表記はデータベース取り込み前に除去される。

実は作成したアンテナサイトでも稀に文字化けが発生しているのですが、どうやら今回調べた内容と同じ原因のようです。
あまり頻繁に発生しないので放置していたのですが、ひょんなことから糸口がつかめてしまいました。
これはラッキーです。


スポンサーリンク
  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA