つぶやき
-ブログ-

WordPressで投稿のコメントを表示する方法を解説

2022年7月28日

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);
　(省略)

上記のコードを記載すると、以下のようにタイトルが変更されます。