2020.03.29

WordPressでコメント一覧の表示テンプレートを自作した内容に変更する方法

こんにちは、webエンジニアのゾノ( @ozonosho )です。

さて、今回は記事ではWordPressでコメント一覧の表示テンプレートを自作した内容に変更する方法を紹介いたします。

一般的なテーマの場合、Wordpressのコメント表示テンプレートはテーマ直下にある「comments.php」というファイルに記載されています。

↓のようなコードが多いです。

<?php if(have_comments()): ?>
	<div class="comment-pagenation">
		全<?php echo get_comments_number(); ?>件
	</div>
	<ol class="comments-list">
		<!-- コメント一覧を表示する関数 -->
		<?php wp_list_comments();?>
	</ol>
<?php else : ?>
	<p>
		まだコメントがありません。
	</p>
<?php endif; ?>

注釈を入れてありますがコメント一覧の表示にはWordPress固有の関数「wp_list_comments」が用いられています。

この「wp_list_comments」はそのまま使うと決まったテンプレートでしか表示できないのですが、下記の手順を踏むことで自作したテンプレートを表示させることができます。

表示テンプレートを自作して関数化する
自作した表示テンプレートの関数名をwp_list_commentsの引数として渡す

そのため、この順で実装してみましょう。

①表示テンプレートを自作して関数化する

まずは自作したい表示テンプレートをfunctions.phpに関数として作ります。

一例を挙げると、下記のようなコードになります。

function mytheme_comments($comment, $args, $depth) {
  $GLOBALS['comment'] = $comment;
  ?>
  <li>
    <div class="comment-header">
      <!-- コメント投稿日時 -->
      <p class="comment-date"><?php echo get_comment_date(); ?></p>
      <!-- コメント投稿者 -->
      <p class="comment-author"><?php echo $comment->comment_author; ?></p>
    </div>
    <div class="comment-content">
      <!-- コメント本文 -->
      <?php comment_text(); ?>
    </div>
  </li>
<?php
}

ここでは「mytheme_comments」と名付けた関数を用意しましたが、関数名も中身も自由に設定いただいて大丈夫です。

②自作した表示テンプレートの関数名をwp_list_commentsの引数として渡す

自作した表示テンプレートを使うのは簡単で、コメント一覧表示用の関数「wp_list_comments」に先ほど作成した自作テンプレートの関数名「mytheme_comments」を渡してあげるだけでＯＫです。

<?php wp_list_comments('callback=mytheme_comments');?>

callback=の値に関数名を入れてあげてください。

最初に紹介した「comments.php」のコードを例にすると、↓のようなコードにすれば自作した表示テンプレートを利用できます。

<?php if(have_comments()): ?>
	<div class="comment-pagenation">
		全<?php echo get_comments_number(); ?>件
	</div>
	<ol class="comments-list">
		<!-- コメント一覧を表示する関数 -->
		<?php wp_list_comments('callback=mytheme_comments');?>
	</ol>
<?php else : ?>
	<p>
		まだコメントがありません。
	</p>
<?php endif; ?>