WordPressのコメント欄をカスタマイズしてシンプルなデザインにする方法

 WordPress のテーマを作成しているのですが、コメント欄はシンプルなデザインにしたいなと思い、いろいろ調べたものをまとめてみました。function.php を少し編集することで、出力される文字を変更することもできます。

コメントの設定

できるだけシンプルな表示にするため、設定は以下のようにしました。管理画面の「設定」→「ディスカッション」からコメント欄の設定を行うことができます。

特に、コメントの入れ子構造とアバターの表示は無効にしておきたいものです。設定を変更し終わったら「変更を保存」ボタンを押し忘れないようにしてください。

コメント欄のオートリンク機能を無効化にする

WordPress の初期設定では、コメントで URL を貼ると自動的にリンクに変換してくれます。ある程度の期間ブログを運営していると、コメント欄に怪しいリンクが貼られた英文のスパムコメントが大量に書き込まれると思います。これにはプラグインの Akismet を使って対応するのが定番ですが、たまに Akismet をかいくぐってコメント欄に投稿してくるツワ者がいたりします。

最近はネットリテラシーがだいぶ行き渡っているので、無闇に怪しいリンクを踏んでしまうユーザーは多くないと思いますが、はじめからオートリンク機能を無効化にしておけば確実です。

functions.php に次の一文を追加してください。

こうすれば、URL を貼られてもただの文字列として扱われることになります。

コメントで使用できるタグや属性を無効化する

WordPress の初期設定では、コメント欄で次のタグや属性を使用することができます。先ほどコメント欄のオートリンク機能を無効化にしましたが、それだけだと a タグを使うことでリンクを貼ることができてしまうので、コメント欄でのリンクを完全に無効化することができません。

そこで、function.php を編集して、コメント欄で HTML タグを使用できないようにしてしまいます。a タグ以外に strike タグや strong タグなども使用できなくなりますが、コメント欄なので問題ないでしょう。

コメントフォームのカスタマイズ

現在作成しているテーマの single.php を開き、コメントを表示したい位置に次のソースコードを追加します。

ブログ記事を表示すると、コメント部分に次のような HTML が出力されます。

スタイルシートでなにも設定しなければ次のように表示されるはずです。

次のようにカスタマイズしたいとします。

  • 「コメントを残す」→「お気軽にコメントをどうぞ。」に変更
  • 「メールアドレスが公開されることはありません。」→削除
  • コメント入力フォームの横にある「コメント」→削除
  • 「メールアドレス」テキストボックス→削除
  • 「ウェブサイト」テキストボックス→削除

テンプレートタグである comment_form は引数を渡すことができ、$args の値を変更することでコメントフォームを自由にカスタマイズすることができます。

デフォルトの設定は wp-includes/comment-template.php で定義されています。WordPress 4.7.1 では2214行目から2252行目までです。

先ほど single.php に記述した の一文を次のように修正します。

だいぶスッキリしました。

コメントリストをカスタマイズする

ここまでの設定で動作確認としてコメントを書き込んでみてください。コメントリストは表示されないはずです。コメントリストを表示するためには、wp_list_comments テンプレートタグを使ったループが必要です。ブログインデックスやブログ記事を表示するのにもループが必要でしたが、それのコメントバージョンですね。

先ほど、コメントフォームを表示するために single.php にソースコードを追加しましたが、これを次の一文に置き換えます。

次にテーマフォルダのなかに comment.php を作成してください。ソースコードは次のとおり。

13行目からがコメントフォームを表示する部分ですが、これは先ほど single.php に追加していたソースコードと同じものです。デフォルトでスタイルシートのカスタマイズをしていなければ、次のように表示されるはずです。

出力される HTML は次のようになります。

コメントリストをカスタマイズするにはどうしたらよいのでしょうか。例えば、次のようにカスタマイズしたいとします。

先ほど作成した comment.php の8行目を修正します。

wp_list_comments テンプレートタグに引数として渡しているものは独自関数です。callback=○○○○○ の書式で記述します。○○○○○ の部分は関数名ですが、これは自分で好きにつけることができます。関数本体は function.php に記述します。

最後にスタイルシートでデザインをカスタマイズすれば完成です。

コメントリストのカスタマイズとして、wp_list_comments テンプレートタグに引数として渡すことのできるものは他にもあります。こちらがわかりやすかったのでオススメです。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP