- 2022.07.28
- WordPress
- 飯島
WordPressで投稿のコメントを表示する方法を解説
WordPressでは投稿のコメント欄がデフォルトでは表示されません。コメント欄を表示させるには、管理画面の設定やテンプレートファイルの編集をする必要があります。
コメント欄を表示する方法
では早速、コメント欄を表示する方法を解説します。
ディスカッションの設定をする
まずは管理画面の「ディスカッション」から設定を行います。「ディスカッション」は「設定」から開きます。

「ディスカッション」のなかには「新しい投稿へのコメントを許可」という項目があります
。ここにチェック入れると、新しい投稿にコメント欄が表示されるようになります(既存の投稿のコメント欄を表示する方法は後述で説明します)。

「名前とメールアドレスの入力を必須にする」にチェックを入れると、文面どおり名前とメールアドレスを入力しないと送信できないようになります。
プライバシーの観点から、これらの入力を必須にしたくないのであれば、チェックを外しても良いかと思います。

コメント欄は入れ子形式にすることができます。入れ子形式にすると、下記のようにユーザーとコメント欄上でやりとりができるようになります。

ユーザーとのやりとりは、他のユーザーにも参考になるので表示してもよいかと思います。入れ子の設定は下記のように、階層の数も設定できます。

既存の投稿のコメント欄を表示するには?
既存の投稿のコメント欄を表示させたい場合は、投稿一覧にある「クイ
ック編集」の「コメント許可」にチェックを入れましょう。

個別ではなく、一括してコメント欄を表示させたい場合は、表示させたい記事にチェックを入れて「編集」を選択して、「適用」を選択してください。

その後に「コメント」で「許可」を選択すれば、一括してコメント欄を表示できます。

single.phpを修正する
次にsingle.phpにコメント欄を表示させるためのインクルードタグを入力します。
下記のコードのように、コメント欄を表示させたい箇所に「<?php comments_template(); ?>」と入力してください。
<div class="article-box"> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <h1 class="article-title"><?php the_title(); ?></h1> <div class="category-meta"> <div class="category"><?php the_category(); ?></div> <time class="blog-meta" deta-time="<?php the_time('Y-m-d'); ?>"><?php the_time('Y-m-d'); ?></time> </div> <div class="article-image"> <?php the_post_thumbnail(''); ?> </div> <div class="article-content"> <?php the_content(); ?> </div> <?php endwhile; ?> <?php endif; ?> <div class="article-link"> <div class="prev">前の記事:<?php previous_post_link(); ?></div> <div class="next">次の記事:<?php next_post_link(); ?></div> </div> <!-- コメント欄を表示する --> <?php comments_template(); ?> </div>
その後に「comments.php」という新しいテンプレートを作成します。「comments.php」では下記のようにコメントフォームやコメント数を表示する記述をします。
<section class="comment_box"> <!-- コメントフォームを表示する --> <?php comment_form(); if (have_comments()) : ?> <!-- コメント数を表示する --> <p><?php comments_number(); ?></p> <ol class="commentlist"> <!-- コメント一覧を表示する --> <?php wp_list_comments(); ?> </ol> <!-- ページングを表示する --> <?php paginate_comments_links(); endif; ?> </section>
上記のコードを記載したら、以下の画像のようにコメント欄が表示されます。

上記のコメント欄では以下のCSSを適用しています。参考にしてみてください。
▢CSSコード
.comment_box { width: 100%; .comment-respond { margin-top: 20px; .comment-form { margin-top: 20px; .comment-form-comment { display : flex; flex-direction: column; margin-top : 24px; } .comment-form-author { margin-top: 24px; label { display: block; float : left; width : 150px; } input { width: 600px; } } .comment-form-email { margin-top: 24px; label { display: block; float : left; width : 150px; } input { width: 600px; } } .comment-form-url { margin-top: 24px; label { display: block; float : left; width : 150px; } input { width: 600px; } } .comment-form-cookies-consent { margin-top: 24px; } .form-submit { margin-top : 24px; margin-bottom: 24px; } } } .commentlist { margin-top: 24px; li { margin-right: 20px; list-style : none; .comment-body { border : dashed 1px navy; padding : 20px; margin-bottom: 20px; margin-left : 10px; } .children { margin-left: 40px; li { list-style: none; } } } } }
コメントフォームのタイトルを変更する
コメントフォームのタイトルはデフォルトでは「コメントを残す」となっていますが、このタイトルを変更したい人もいるかと思います。タイトルを変更するには「comments.php」を以下のように修正しましょう。
<section class="comment_box"> <!-- コメントフォームを表示する --> <?php $comment_form_args = array( 'title_reply' => 'コメント一覧', ); comment_form($comment_form_args); (省略)
上記のコードを記載すると、以下のようにタイトルが変更されます。

GIV株式会社は、埼玉県川越市にあるWEB(ホームページ)制作会社です。お困りごと、ご相談、お気軽にご連絡ください。お問い合わせは、こちらから。