ワードプレスのコメントテンプレート(comment.php)をカスタマイズする手順

2019-03-102021-07-30

Tech

WordPressで作成したブログのコメント表示・入力欄をカスタマイズしたい人向けの記事です。テーマ開発したり、テーマを少し編集するスキルのあることを前提としています。

「ディスカッション」の項目で設定する他、ソースコード「comment.php」「style.css」を追加・変更することでカスタマイズが可能です。

前提

この記事でカスタマイズ方法を解説する『コメントテンプレート』は『コメントリスト』と『コメントフォーム』のことを指しています。

コメントリストとは

コメントリストは、ユーザが登録したコメントを表示する部分です。コメントの表示を入れ子構造にしたり、ソート順を変更したりとカスタマイズ可能な要素が多いです。

コメントフォームとは

コメントフォームは、ユーザがコメントを入力する枠や登録ボタンを表示する部分です。デフォルトでユーザが入力可能とできる項目は以下の４つのみです。

ユーザ名
メールアドレス
ウェブサイトURL
コメント内容

また、以下の画像で『コメント』や『名前』と表示されているようなlabel要素についてもカスタマイズ可能です。

コメントテンプレートが表示される流れ

管理画面＞設定＞ディスカッションから設定

『新しい投稿へコメントを許可』を設定しておきましょう。また、各記事の投稿画面においてもコメント許可設定を維持しておきましょう。coreのコメントテンプレートを利用している場合は以下の設定をしないと、各投稿に対してコメントテンプレートが表示されなくなります。

ついでに、階層表示したい場合は、『コメントを○階層までのスレッド（入れ子）形式にする』をチェックしておきましょう。

index.phpなどページテンプレートから呼び出し

index.phpなどのページテンプレートにて関数呼び出しが必要です。

comments_template();

1	comments_template();

comments.phpを参照

comments_template()関数を呼びだすと、comments.phpを参照し、コメントテンプレートを表示することができます。

もし、comments.phpがテーマ内に存在しない場合は、coreのcomments.phpが呼び出されることでコメントリストとコメントフォームが表示されます。

この記事のゴール

コメントリストとコメントフォームに対して以下のような改修が可能となることをゴールとします。

コメントリスト

単一コメントのデザイン変更
単一コメントのラベル変更
単一コメントの表示項目変更
コメントの階層表示、階層表示時のデザイン変更

コメントフォーム

入力フォームのデザイン変更
入力項目の追加、削除

オリジナルのコメントテンプレートを作成する

comments.phpの作成・配置場所

sample_themeという名前のテーマを作成している場合、以下のようにcomments.phpを作成することで、オリジナルのコメントテンプレートを適用することができます。

samle_theme/
├ archive.php
├ category.php
├ favicon.ico
├ footer.php
├ functions.php
├ header.php
├ index.php
├ sample.php　←追加
├ sidebar.php
└ style.css

samle_theme/

├ archive.php

├ category.php

├ favicon.ico

├ footer.php

├ functions.php

├ header.php

├ index.php

├ sample.php　←追加

├ sidebar.php

└ style.css

comments.phpの実装

今回実装したcomments.phpの結果は、以下のソースとなります。

<!-- comments start -->
<div class="comments-area">
   <?php if (have_comments()) :?>
   <h3 class="comments-count"><?php echo get_comments_number().' 件のコメント'; ?></h3>
   <!-- comments-list start -->
   <div class="comments-list">
     <?php wp_list_comments(array(
       'avatar_size'=>48,
       'style'=>'div',
       'type'=>'comment'
      )); ?>
   </div>
   <?php if (get_comment_pages_count() > 1) : ?>
   <div class="comments-nav">
     <?php previous_comments_link('＜ 前のコメント'); ?>
     <?php next_comments_link('次のコメント ＞'); ?>
   </div>
   <?php endif; ?>
  <?php endif; ?>
  <!-- comments-list end -->
  <!-- comments-form start -->
  <?php
     $comments_args = array(
       'fields' => array(
       'author' => '<p class="comments-form-author">' . '<label for="author">' . __( 'Name' ) . ( $req ? ' <span class="comments-required">*</span>' : '' ) . '</label><br>' .'<input id="author" name="author" class="form-control" placeholder="エンジニア 太郎" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '"></p>',
       'email' => '<p class="comments-form-email"><label for="email">' . __( 'Email' ) . ( $req ? ' <span class="comments-required">*</span>' : '' ) . '</label><br> ' .'<input id="email" name="email" class="form-control" placeholder="sample@sample.com" type="email"' . ' value="' . esc_attr( $commenter['comment_author_email'] ) . '"></p>'
     ),
     'title_reply' => 'コメントはこちらから',
     'comment_notes_before' => '<p class="comments-notes">メールアドレスは公開されませんのでご安心ください。また、<span class="comments-required">*</span> が付いている欄は必須項目となります。</p>',
     'comment_notes_after' => '<p class="comments-form-allowed-tags">内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。</p>',
     'comment_field' => '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><br><textarea id="comment" name="comment" class="form-control" placeholder="とてもよいブログですねえ" rows="8" required="required"></textarea></p>',
     'label_submit' => 'コメントを送信する',
     'class_submit' => 'submit btn btn-primary',
     'submit_button' => '<button id="%2$s" class="%3$s">%4$s</button>',
   );
   comment_form($comments_args);
  ?>
  <!-- comments-form end -->
</div>
<!-- comments end -->

<?php if (have_comments()) :?>

<?php wp_list_comments(array(

'avatar_size'=>48,

'style'=>'div',

'type'=>'comment'

)); ?>

</div>

<?php if (get_comment_pages_count() > 1) : ?>

<?php previous_comments_link('＜前のコメント'); ?>

<?php next_comments_link('次のコメント＞'); ?>

</div>

<?php endif; ?>

<?php

$comments_args = array(

'fields' => array(

'author' => '<p class="comments-form-author">' . '<label for="author">' . __( 'Name' ) . ( $req ? ' <span class="comments-required">*</span>' : '' ) . '</label><br>' .'<input id="author" name="author" class="form-control" placeholder="エンジニア太郎" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '"></p>',

'email' => '<p class="comments-form-email"><label for="email">' . __( 'Email' ) . ( $req ? ' <span class="comments-required">*</span>' : '' ) . '</label><br> ' .'<input id="email" name="email" class="form-control" placeholder="sample@sample.com" type="email"' . ' value="' . esc_attr( $commenter['comment_author_email'] ) . '"></p>'

'title_reply' => 'コメントはこちらから',

'comment_notes_before' => '<p class="comments-notes">メールアドレスは公開されませんのでご安心ください。また、<span class="comments-required">*</span> が付いている欄は必須項目となります。</p>',

'comment_notes_after' => '<p class="comments-form-allowed-tags">内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。</p>',

'comment_field' => '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><br><textarea id="comment" name="comment" class="form-control" placeholder="とてもよいブログですねえ" rows="8" required="required"></textarea></p>',

'label_submit' => 'コメントを送信する',

'class_submit' => 'submit btn btn-primary',

'submit_button' => '<button id="%2$s" class="%3$s">%4$s</button>',

);

comment_form($comments_args);

</div>

comments.php実装のポイント

comments.phpを実装する上でポイントとなるのは、

get_comments()：投稿済のコメント取得用の関数で、コメントオブジェクトまたはコメント件数のみを取得する（HTMLによる装飾なし）
wp_list_comments()：get_comment()で取得した情報をHTML形式で装飾・表示する関数
comment_form()：コメントの入力フォームを表示するための関数

という3つの関数です。

get_comments()関数

コメントオブジェクトのリストを取得する関数です。
特定の条件を指定してコメント件数を取得したり、
誰が書いたコメントか？どんな内容のコメントか？といった情報をリスト形式で取得できます。

引数

第１引数：コメント取得条件の連想配列

配列内に指定可能なパラメータはcodexのレファレンスを参照、以下は一例
post_id：指定したpost_idのコメントのみが取得対象となる
count：関数の戻り値を指定。詳細は後述（デフォルト値はfalse）

戻り値

引数のcountの指定によって指定できます。

countでtrueを指定：コメント件数
countでfalseを指定：WP_Comment オブジェクトの配列（WP_Commentオブジェクトには、コメント内容やコメントを投稿したユーザの情報など合計15の属性が含まれます。）

通常はコメント内容を取得したいため、引数として渡すcountはfalseで関数を呼び出し、戻り値としてWP_Commentオブジェクトを取得して利用します。

サンプル

<?php
  $args = array(
      'user_id' => 1, // user_id を使う
  );
  $comments = get_comments( $args );
?>

<?php

$args = array(

'user_id' => 1, // user_id を使う

);

$comments = get_comments( $args );

wp_list_comments()関数

この関数ではコメントリストを、htmlのカスタマイズしたフォーマットで取得することができます。get_comments()の戻り値を引数として指定し、コメント情報をフォーマットしてくれます。
コメントの取得条件は、管理者画面にて設定可能ですが、この関数の引数においても取得条件を設定した場合は、この関数に設定した条件の方が優先されます。

引数

第１引数：コメント取得条件の配列。こちらはget_comments()と同様にレファレンスを参照してください。
第２引数：get_comments()の取得結果。指定しなかった場合はデフォルトの引数でget_comments()を呼び出した結果が利用される。

戻り値

get_comments()で取得したコメント情報をもとにしたhtml形式のドキュメントを返却します。

サンプル

   <div class="comments-list">
     <?php wp_list_comments(array(
       'avatar_size'=>48,
       'style'=>'div',
       'type'=>'comment'
      )); ?>
   </div>

<?php wp_list_comments(array(

'avatar_size'=>48,

'style'=>'div',

'type'=>'comment'

)); ?>

</div>

comment_form()関数

引数

第１引数：フォームのフィールド情報を指定した配列。こちらはget_comments()と同様にレファレンスを参照してください。
第２引数：対象のpost_idを指定。未指定の場合は現在の投稿を対象とする。

戻り値

コメントフォームの情報をhtml形式で返却します。

サンプル

  <?php
     $comments_args = array(
       'fields' => array(
       'author' => '<p class="comments-form-author">' . '<label for="author">' . __( 'Name' ) . ( $req ? ' <span class="comments-required">*</span>' : '' ) . '</label><br>' .'<input id="author" name="author" class="form-control" placeholder="エンジニア 太郎" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '"></p>',
       'email' => '<p class="comments-form-email"><label for="email">' . __( 'Email' ) . ( $req ? ' <span class="comments-required">*</span>' : '' ) . '</label><br> ' .'<input id="email" name="email" class="form-control" placeholder="sample@sample.com" type="email"' . ' value="' . esc_attr( $commenter['comment_author_email'] ) . '"></p>'
     ),
     'title_reply' => 'コメントはこちらから',
     'comment_notes_before' => '<p class="comments-notes">メールアドレスは公開されませんのでご安心ください。また、<span class="comments-required">*</span> が付いている欄は必須項目となります。</p>',
     'comment_notes_after' => '<p class="comments-form-allowed-tags">内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。</p>',
     'comment_field' => '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><br><textarea id="comment" name="comment" class="form-control" placeholder="とてもよいブログですねえ" rows="8" required="required"></textarea></p>',
     'label_submit' => 'コメントを送信する',
     'class_submit' => 'submit btn btn-primary',
     'submit_button' => '<button id="%2$s" class="%3$s">%4$s</button>',
   );
   comment_form($comments_args);
  ?>

<?php

$comments_args = array(

'fields' => array(

'title_reply' => 'コメントはこちらから',

'comment_notes_after' => '<p class="comments-form-allowed-tags">内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。</p>',

'label_submit' => 'コメントを送信する',

'class_submit' => 'submit btn btn-primary',

'submit_button' => '<button id="%2$s" class="%3$s">%4$s</button>',

);

comment_form($comments_args);

ページテンプレートにコメントテンプレートを反映する

index.phpやsingle.php、page.phpにarchive.phpなど、テーマによって様々配置されていると思います。

それらのファイルにて、コメントテンプレート表示用の関数を呼び出します。

comments_template()関数

引数

第１引数：コメントテンプレートのパス

このパスを指定することで、comments.php以外のファイル名でもコメントテンプレートと認識して呼び出されます。コメントテンプレートを複数種類用意したい場合に有効です。

戻り値

なし。

サンプル

if ( comments_open() || get_comments_number() ) {
  comments_template();
}

if ( comments_open() || get_comments_number() ) {

comments_template();

}

comments_open()は、投稿に対してコメントが許可されているかを確認する関数です。

get_comments_number()は、投稿済のコメントがいくつあるかを取得する関数で、TwentyOneでは上記のような条件でcomments_templateを呼び出しているようです。