WordPress 2018.01.07

WordPressのコメントリストとコメントフォームを実装してカスタマイズする

Tags： PHP,WordPress

先日WordPressサイトにコメントフォームを実装する機会があったので備忘録として残しておきます。WordPressにはデフォルトでコメントが投稿できるフォームと投稿したコメントを表示するリスト機能が用意されています。ただし、そのまま使うのではなくカスタマイズしたい時もあるかと思います。そんな場合に実装する方法になります。

WordPressのコメント機能の構成と概要

先ほど説明した通り、WordPressのコメントは大きく分けて「投稿コメントを表示させるリスト部分」と「コメント内容を投稿するフォーム」の2つで構成されています。

そして、これらのコメント機能もコードで出力しますが、ヘッダーやフッターと同じくテンプレート化させることでメンテナンスもしやすくなります。コメントテンプレートのファイルは「comments.php」という形で決まっており、そのテンプレートファイルを呼び出す関数も「comments_template()」用意されているのでそれを使います。あとはソースコードを実装していくだけでコメント機能がサイトに実装できます。

コメント機能自体のソースコードが書かれたcomments.phpを作成

まずはコメントリストとコメントフォームを出力するためのコードをテンプレートファイルである「comments.php」という形で作成します。

コメントリスト自体は「wp_list_comments()」、コメントフォーム自体は「comment_form()」という関数で出力できるので必要最小限の要件であればこれで完結します。ただし今回はコメント件数などの表示といったカスタマイズを加えていくので、サンプルとして下記のコードを記述します。

【comments.php】

<?php
  if (post_password_required()) {
     return;
   }
?>
<!-- comments start -->
<div class="comments-area">
   <?php if (have_comments()) :?>
   <h3 class="comments-count"><?php echo get_comments_number().' 件のコメント'; ?></h3>
   <!-- comments-list start -->
   <ul class="comments-list">
     <?php wp_list_comments(array(
       'avatar_size'=>48,
       'style'=>'ul',
       'type'=>'comment',
       'callback'=>'mytheme_comments'
      )); ?>
   </ul>
   <?php if (get_comment_pages_count() > 1) : ?>
   <ul class="comments-nav">
     <li class="comments-prev"><?php previous_comments_link('＜＜ 前のコメント'); ?></li>
     <li class="comments-next"><?php next_comments_link('次のコメント ＞＞'); ?></li>
   </ul>
   <?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>' .'<input id="author" name="author" 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> ' .'<input id="email" name="email" 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>',
     'label_submit' => 'コメントを送信する',
   );
   comment_form($comments_args);
  ?>
  <!-- comments-form end -->
</div>
<!-- comments end -->

コメントリストである関数の「wp_list_comments()」の引数でコールバック関数を指定していますが、これは後述で説明していくfunctions.phpでカスタマイズを行います。

コメントフォームである関数の「comment_form()」でもやはり引数で出力するフォーム項目を指定しています。今回は投稿者名とメールアドレスといった必要最小限にしています。コメント本文のテキストエリアとコメント送信ボタンはデフォルトで出力されます。上記コードでは合わせてコメント投稿時の案内テキストなども出力しています。

comments.phpをsingle.php内へインクルードさせる

コメント出力のコードが記述されたテンプレートファイルcomments.phpは投稿の詳細ページであるsingle.php内の投稿ループ内に入れる必要がありますが、テンプレートファイルとして扱うのでインクルードさせる「<?php comments_template(); ?>」のコードを該当箇所に追記します。

【single.php】※一部抜粋

<!-- 投稿ループ開始 -->
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>

  <h1><?php the_title(); ?><!-- 記事タイトル -->
  </h1>
  <div><?php the_content(); ?><!-- 記事本文-->
  </div>

  <!-- コメントテンプレート呼び出し -->
  <?php comments_template(); ?>

<?php endwhile; endif; ?>
<!-- 投稿ループ終了 -->

functions.phpにコメントリスト表示のカスタマイズを行う関数を記述

comments.phpに記述している「wp_list_comments()」で引数にコールバック関数を指定しています。「functions.php」へこのコールバック関数を記述します。

【functions.php】

function mytheme_comments($comment, $args, $depth){
   $GLOBALS['comment'] = $comment; ?>
   <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
     <div id="comment-<?php comment_ID(); ?>" class="comments-wrapper">
       <div class="comments-meta">
       <?php echo get_avatar( $comment, $args['avatar_size']) ?>
         <ul class="comments-meta-list">
           <li class="comments-author-name">
           <?php printf('<cite class="fn">%s</cite>', get_comment_author_link()) ?>
           </li>
           <li class="comments-title">
           <?php
             $commentID_parent = $comment->comment_parent;
             if( $commentID_parent != 0 ):
           ?>
             <a href="<?php echo htmlspecialchars( get_comment_link( $commentID_parent ) ) ?>"><?php echo get_comment_author($commentID_parent); ?>さんへの返信</a>
           <?php else: ?>
             <a href="#top">「<?php the_title(); ?>」へのコメント</a>
           <?php endif; ?>
           <?php 
             if ($comment->comment_approved == '0') {
               echo '<span class="comments-approval">このコメントは承認待ちです。</span>';
             }
           ?>
           </li>
           <li class="comments-date">
             <a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>">
             <?php printf(__('%1$s at %2$s'), get_comment_date(), get_comment_time()) ?></a>
 <span><?php edit_comment_link('（編集する）','','') ?></span>
           </li>
         </ul>
       </div>
       <!-- comment-meta -->
       <div class="comments-content">
         <?php comment_text() ?>
       </div>
       <div class="comments-reply">
         <?php comment_reply_link(array_merge( $args, array(
            'reply_text'=>'返信する', 
            'add_below' =>$add_below, 
            'depth' =>$depth, 
            'max_depth' =>$args['max_depth']))) 
         ?>
       </div>
     </div>
     <!-- comment-comment_ID -->
   <?php
}

アバターの表示や返信ボタン、コメント投稿者名や投稿日時が出力されるようになります。HTMLの構成などもこちらでカスタマイズできます。