WordPressブログにコメント機能を追加・デザイン調整した方法

ブログに「コメント欄」を設置したいと思ったことはありませんか？
読者とのやり取りが生まれると、記事の内容がより深まったり、新しい気づきが得られることもあります。今回は自分のWordPressブログにコメント機能を追加して、デザインの調整から返信スレッド機能の有効化までやったので、その手順をまとめます。

やりたかったこと

NPCブログではコメント機能がありませんでしたが、記事を読んでくれた方からの感想や質問を受け付けられるようにしたいと考えました。やることは大きく3つです。

• コメント機能を有効化して、既存の全投稿でもコメントを受け付けられるようにする
• 送信ボタンのスタイルを整える
• 返信（スレッド）機能を動くようにする

コメント機能の有効化と既存投稿への一括適用

WordPressのコメント機能は、通常はインストール時にコメント許可になっていますが、スパムコメントがめんどくさくて、私は最初からオフにしてしまいます。管理画面の「設定 → ディスカッション」で「新しいコメントを許可」のチェックを外します。そうすると、投稿にコメントが入りません。嫌なスパムやアンチからのコメントを見なくて済みます。それを後から有効にするには、オフにした時と同じように管理画面の「設定 → ディスカッション」で「新しい投稿へのコメントを許可」にチェックを入れます。ただし、これだけだとすでに公開済みの投稿にはコメント欄が表示されません。

「コメント許可」のチェックをオフで投稿した場合、全投稿にもコメントを許可するには、データベースのwp_postsテーブルを直接更新するか、投稿一覧から「クイック編集」で一つずつ変更するかの二択です。投稿数が多い場合はSQLで一括更新するのが効率的です。

※ wp_postsとは、WordPressの投稿データを格納しているデータベーステーブルのこと。タイトルや本文、投稿日時、コメント可否などの情報が入っています。

送信ボタンのスタイル調整

コメントフォームの「コメントを送信」ボタンは、テーマによってはデフォルトのスタイルがサイトのデザインと合わないことがあります。今回はこのあたりを調整しました。

• .form-submit（ボタンのラッパー要素）から背景色やhoverスタイルを削除して、装飾はボタン本体のみに適用
• 不要なpadding・width・border-radiusをリセット
• display: flexとjustify-content: centerでボタンを中央配置

※ .form-submitとは、WordPressのコメントフォームで送信ボタンを囲んでいるHTML要素のクラス名。テーマによってはこの要素自体にスタイルが当たっていることがあります。

ポイントは、ラッパーとボタン本体のスタイルを分離することです。ラッパーにhover効果がついていると、ボタン周辺をマウスオーバーしただけで色が変わってしまうなど、意図しない挙動になりがちです。

返信（スレッド）機能の有効化

WordPressにはコメントへの返信機能が標準搭載されていますが、動作させるにはcomment-replyというJavaScriptファイルの読み込みが必要です。テーマのfunctions.phpで以下のようにスクリプトをエンキューします。

※ エンキュー（enqueue）とは、WordPressでCSSやJavaScriptファイルを正しい方法で読み込ませる仕組みのこと。直接HTMLに書くのではなく、wp_enqueue_script関数を使って登録します。

このcomment-replyスクリプトを読み込むことで、「返信」ボタンを押すとコメントフォームがそのコメントの下に移動し、スレッド形式で返信できるようになります。

コメント表示デザインの改善

コメントが複数並んだとき、どこからどこまでが1つのコメントなのか区別がつきにくいと読みづらくなります。今回はこんな工夫をしました。

• コメント同士の間にしっかり余白とボーダーを入れて、視覚的に区切りをつける
• 返信コメントはインデント＋左ボーダーをつけて、親コメントとの関係がひと目でわかるデザインに

特に返信コメントのインデント表示は大事です。スレッドの深さが視覚的に伝わることで、どの発言に対する返信なのかがすぐにわかります。

まとめ

WordPressのコメント機能は標準で備わっているものの、実際に使いやすい状態にするにはいくつかの調整が必要です。今回やったことをまとめると、コメントの有効化と既存投稿への一括適用、送信ボタンのCSS調整、comment-replyスクリプトの読み込みによる返信機能の有効化、そしてコメント表示デザインの改善です。

コメント欄があるだけで、読者との距離がぐっと近くなります。ブログをもっとインタラクティブにしたい方はぜひ試してみてください。

※この記事はNPCの中の人 azusaの実務経験をもとに書いています。