wp_list_comments()とは？
wp_list_comments() は、
コメント一覧をHTMLとして出力するためのテンプレートタグ
です。
コメントをループで処理する必要はなく、この関数ひとつで
- 各コメントの表示
- コメント階層（返信ツリー）
- コメントのメタ情報（日時、著者、アバター）
を一括で出力できます。
テーマの comments.php テンプレートで必ず使われている代表的な関数です。
wp_list_comments()の基本的な使い方
書式はとてもシンプルです。
<?php wp_list_comments( array $args = array(), $comments = null ); ?>wp_list_comments()の引数の解説
wp_list_comments()は非常に多機能で、以下の2つのパラメータを受け取ります。
$args（オプション配列）- 出力形式やコールバックなどを指定
$comments（コメントオブジェクトの配列）- デフォルトは
get_comments()の結果が自動で使用されます
- デフォルトは
基本的に $args だけ指定すればOKです。
wp_list_comments()のよく使う $args の主な項目
| パラメータ | 説明 | デフォルト |
|---|---|---|
walker | カスタムWalkerクラス | 空 |
max_depth | 階層の最大深さ | 3 |
style | ul, ol, div でリスト形式を指定 | ul |
callback | カスタムコールバック関数 | 空 |
end-callback | 終了用のコールバック | 空 |
type | 表示するコメントの種類（all, comment, trackback, pingback） | all |
avatar_size | アバターのサイズ(px) | 32 |
short_ping | ピンバック・トラックバックを簡潔に表示 | false |
reverse_top_level | コメントの並び順を逆にする | null |
reverse_children | 子コメントの並び順を逆にする | 空 |
per_page | 1ページあたりのコメント数 | 0（全件） |
page | 表示するページ番号 | 空 |
format | HTML5かXHTMLか | html5 |
echo | 出力するか返すか | 1（出力する） |
wp_list_comments()のシンプルな例
もっとも基本的な使い方は以下です。
<ol class="comment-list">
<?php wp_list_comments(); ?>
</ol>これだけで、現在の投稿のコメントが自動的にリスト出力されます。
wp_list_comments()のコメントリストの出力例
デフォルトでは以下のようなHTMLが出力されます。
<ul class="comment-list">
<li id="comment-1" class="comment">
<article>
<footer class="comment-meta">
<div class="comment-author vcard">
<img src="..." class="avatar" width="32" height="32">
<b class="fn">ユーザー名</b>
<span class="says">says:</span>
</div>
<div class="comment-metadata">
<a href="...">
<time datetime="...">投稿日</time>
</a>
</div>
</footer>
<div class="comment-content">
コメント本文
</div>
<div class="reply">
<a rel="nofollow" class="comment-reply-link" href="...">返信</a>
</div>
</article>
</li>
</ul>アバター・著者・日時・本文・返信リンクが自動生成されます。
wp_list_comments()のstyle の指定
コメントリストのHTML要素を変更できます。
style の値 | 出力されるタグ |
|---|---|
ul | <ul>（デフォルト） |
ol | <ol> |
div | <div> |
例：
wp_list_comments(array(
'style' => 'ol'
));アバターサイズを変更
avatar_sizeを指定すると、アバターの大きさを変更できます。
wp_list_comments(array(
'avatar_size' => 64
));コメントの種類
typeで表示するコメントの種類を制御できます。
type の値 | 内容 |
|---|---|
all | コメント・ピンバック・トラックバックを全て表示 |
comment | 通常のコメントだけ |
pingback | ピンバックのみ |
trackback | トラックバックのみ |
例：コメントだけ表示
wp_list_comments(array(
'type' => 'comment'
));wp_list_comments()のカスタムコールバック
デザインを自由にしたいときは callback を指定します。
コールバックの例
my_comment_template()という関数を用意し、引数にコメントオブジェクトが渡されます。
function my_comment_template($comment, $args, $depth) {
$GLOBALS['comment'] = $comment;
?>
<li <?php comment_class(); ?> id="comment-<?php comment_ID(); ?>">
<div class="comment-author vcard">
<?php echo get_avatar($comment, 48); ?>
<?php printf('<cite>%s</cite>', get_comment_author_link()); ?>
</div>
<div class="comment-meta">
<?php printf('<a href="%1$s">%2$s</a>',
esc_url(get_comment_link($comment->comment_ID)),
get_comment_date()
); ?>
</div>
<div class="comment-text">
<?php comment_text(); ?>
</div>
<div class="reply">
<?php comment_reply_link(array_merge($args, array(
'depth' => $depth,
'max_depth' => $args['max_depth']
))); ?>
</div>
</li>
<?php
}wp_list_comments()で指定：
wp_list_comments(array(
'callback' => 'my_comment_template'
));これで完全に独自HTMLを出力できます。
wp_list_comments()のページ分割
コメントページ送りを有効にすると、per_pageやpageで制御できます。
例：
wp_list_comments(array(
'per_page' => 10,
'page' => 1
));ページネーションのリンクは paginate_comments_links() で表示します。
wp_list_comments()の階層の深さ
max_depthで子コメントの最大階層を設定。
例：2階層まで
wp_list_comments(array(
'max_depth' => 2
));wp_list_comments()の出力を取得する
echoをfalseにするとHTMLを文字列で返します。
$html = wp_list_comments(array(
'echo' => false
));
echo '<div class="comments-wrapper">'.$html.'</div>';Walkerクラス
コメントの構造をさらに詳細に制御する場合、walkerに独自クラスを指定します。
通常は必要ありませんが、階層コメントをカスタムHTMLで制御したい場合に便利です。
wp_list_comments()のよくある質問
- コメントが表示されない
-
$commentsが空、またはcomments_template()を呼んでいない可能性があります。 - コメントフォームはどうする？
-
コメント送信用フォームは
comment_form()を使います。 - コメントをすべて平坦に表示できる？
-
max_depthを1に設定すれば階層を無効化できます。
wp_list_comments()のまとめ
wp_list_comments()はコメント一覧表示のメイン関数- デフォルトでHTML5形式のマークアップを生成
style,avatar_size,typeで表示を簡単に調整callbackで完全なカスタムデザインが可能- ページ分割や階層も柔軟に制御できる
活用ポイント
- デフォルトテンプレートでも十分高機能
- オリジナルデザインは
callbackで対応 - コメント数が多い場合は
paginate_comments_links()と組み合わせる
