ワードプレスのコメントテンプレート(comment.php)を修正する手順
投稿日：2019年3月10日 最終更新日：2020年4月17日
ワードプレスで作成したブログのコメント入力欄をカスタマイズしたい人向けの記事です。
テーマを作成している、または利用中のテーマを改造する際に参考になればと思います。
主にワードプレス管理画面の「ディスカッション」の項目で設定する他、ソースコード「comment.php」を指定することでカスタマイズが可能です。
Contents
この記事でのゴール
この記事で扱う「コメントテンプレート」は以下の画像のような「コメントリスト」と「コメントフォーム」であると定義します。
このコメントテンプレートの装飾や出力項目を変更する際に、関数の引数をどのように指定すればよいかを理解することをゴールとします。
コメントリストをカスタイマイズして表示する
コメントリストは、ユーザが登録したコメントを表示する部分です。
コメントの表示を入れ子構造にしたり、ソート順を変更したりとカスタマイズ可能な要素が多いです。
コメントフォームをカスタイマイズして表示する
コメントフォームは、ユーザがコメントを入力する枠や登録ボタンを表示する部分です。
ユーザが入力可能とできる項目は以下の４つのみです。
- ユーザ名
- メールアドレス
- ウェブサイトURL
- コメント内容
※以下の画像例では、「ユーザ名」「メールアドレス」「コメント内容」をユーザが登録可能としてあります。
コメントを設定してから表示されるまでの処理フロー
編集中管理画面＞設定＞ディスカッションから設定
comments.phpにてコメントテンプレートをカスタマイズ
single.phpやpage.phpにてコメントテンプレートを利用する
オリジナルのコメントテンプレートを作成する手順
comments.phpの作成・配置場所
sample_themeという名前のテーマを作成している場合、以下のようにcomments.phpを作成することで、オリジナルのコメントテンプレートを適用することができます。
|
1 2 3 4 5 6 7 8 9 10 11 |
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の結果は、以下のソースとなります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!-- 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 --> |
comments.php実装のポイント
comments.phpを実装する上でポイントとなるのは、
- get_comments()：投稿済のコメント取得用の関数で、コメントオブジェクトまたはコメント件数のみを取得する（HTMLによる装飾なし）
- wp_list_comments()：get_comment()で取得した情報をHTML形式で装飾・表示する関数
- comment_form()：コメントの入力フォームを表示するための関数
get_comments()関数
コメントオブジェクトのリストを取得する関数です。
特定の条件を指定してコメント件数を取得したり、
誰が書いたコメントか？どんな内容のコメントか？といった情報をリスト形式で取得できます。
引数
- 第１引数：コメント取得条件の連想配列
- 配列内に指定可能なパラメータはcodexのレファレンスを参照、以下は一例
- post_id：指定したpost_idのコメントのみが取得対象となる
- count：関数の戻り値を指定。詳細は後述（デフォルト値はfalse）
戻り値
引数のcountの指定によって指定できます。
- countでtrueを指定：コメント件数
- countでfalseを指定：WP_Comment オブジェクトの配列（WP_Commentオブジェクトには、コメント内容やコメントを投稿したユーザの情報など合計15の属性が含まれます。）
通常はコメント内容を取得したいため、引数として渡すcountはfalseで関数を呼び出し、戻り値としてWP_Commentオブジェクトを取得して利用します。
サンプル
|
1 2 3 4 5 6 7 |
<?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形式のドキュメントを返却します。
サンプル
|
1 2 3 4 5 6 7 8 |
<div class="comments-list"> <?php wp_list_comments(array( 'avatar_size'=>48, 'style'=>'div', 'type'=>'comment' )); ?> </div> |
comment_form()関数
引数
- 第１引数：フォームのフィールド情報を指定した配列。こちらはget_comments()と同様にレファレンスを参照してください。
- 第２引数：対象のpost_idを指定。未指定の場合は現在の投稿を対象とする。
戻り値
コメントフォームの情報をhtml形式で返却します。
サンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?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); ?> |
投稿ページにコメントテンプレートを反映する
記事作成中
1 件のコメント
コメントテスト