コメント一覧表示部分のカスタマイズの紹介になります。
今回は、コールバックで行う各コメントの表示部分に関しては含まれていません。
仕様
<?php wp_list_comments( $args, $comments ); ?>
パラメータ | 初期値 | 説明 |
$args | 下記項目参照 | |
$comments | get_comments を呼び出したときの戻り値 | (オプション)get_commentsクエリで取得した配列 |
$args
2019年末時点での、Codex日本語版に掲載されている内容になります。
現在の最新版である、5.3.2では一部異なる部分があります。
<?php
$args = array(
'walker' => null,
'max_depth' => '',
'style' => 'ul',
'callback' => null,
'end-callback' => null,
'type' => 'all',
'reply_text' => 'Reply',
'login_text' => 'Log in to Reply',
'page' => '',
'per_page' => '',
'avatar_size' => 32,
'reverse_top_level' => null,
'reverse_children' => '',
'format' => 'html5',
'short_ping' => false,
'echo' => true,
);
?>
max_depth
入れ子にするコメントの階層の深さを指定。
通常は、ダッシュボードのディスカッション設定で行います。
ダッシュボードの設定を上書きしたい場合に指定する。
style
ul
ol
div
のいずれか。
ここでの指定とは別に、外側のタグはここで指定したものを書く必要があります。
指定が無い場合、各コメントはli
に内包されるため、外側のタグは、ul
かol
を指定します。div
を指定する場合は、外側のタグもdiv
にします。
<ol class="comment list">
<?php wp_list_comments( array( 'style' => 'ol' ) ); ?>
</ol>
<div class="comment list">
<?php wp_list_comments( array( 'style' => 'div' ) ); ?>
</div>
callback
各コメントの開始タグと内容を表示するカスタム関数の名前
end-callback
各コメントの終了タグを出力するカスタム関数の名前
type
表示するコメントの種類。all
comment
pings
trackback
pingback
のいずれか。
pingsは、trackbackとpingbackを含みます。
reply_text
各コメントの返信用リンクとして表示する文字を指定
login_text
コメントの返信に登録が必要な場合に表示する文字列を指定。
デフォルトでは、「ログインして返信する」となる。
page
ページ分けした場合に表示対象とするページ
per_page
1ページに表示するコメントの数
avatar_size
表示するアバターの大きさをピクセル数で指定。1〜512まで。
0の場合、アバターを表示しません。表示しない場合は、ダッシュボードから表示をオフにした方が良い。
reverse_top_level
true
最新のコメントを先頭にして表示false
古いコメントを最初に表示
通常は、空にしてダッシュボードで指定する。
reverse_children
true
新しい返信がついたコメントを先頭に表示
format
デフォルトでは、current_theme_supports()
の設定が適用されます。
short_ping
short_ping
を使うかどうか。デフォルトではfalse
echo
コメントのリストを表示するか、表示せずに値として返すかの設定。
デフォルトではtrue
で表示。
カスタム例
使いそうなのは、style
type
short_ping
avatar_size
callback
あたりでしょうか?max_depth
per_page
などは基本的にダッシュボードから設定します。
styleを変更する
styleの使用例は、上記の繰り返しになりますが、
指定が無い場合、各コメントはli
に内包されるため、外側のタグは、ul
かol
を指定します。div
を指定する場合は、外側のタグもdiv
にします。
下記のいずれかです。
<ul class="comment list">
<?php wp_list_comments( array( 'style' => 'ul' ) ); ?>
</ul>
<ol class="comment list">
<?php wp_list_comments( array( 'style' => 'ol' ) ); ?>
</ol>
<div class="comment list">
<?php wp_list_comments( array( 'style' => 'div' ) ); ?>
</div >
コメントとピングを分けて表示する
コメントとピングが一つのツリーに混在していると見にくくなるため分けたい方用。wp_list_comments
をコメント表示用とピング表示用に指定します。
<h3 class="discussion-title">Comments</h3>
<ul class="comments-list">
<?php wp_list_comments( array( 'type' => 'comment' ) ); ?>
</ul>
<h3 class="discussion-title">Pings</h3>
<ul class="pings-list">
<?php wp_list_comments( array( 'type' => 'pings' ) ); ?>
</ul>
ピングの表示を短くする
指定しない場合はfalse
になりますが、長くなりすぎて困る場合はtrue
にしてタイトル表示のみにします。
<?php wp_list_comments( array( 'short_ping' => true ) ); ?>


アバターサイズを変更する
アバターのサイズを1px〜512pxの間で指定します。
高密度なモニターに対応する場合は、大きめなサイズを取得しCSSで表示サイズを指定するなどの工夫が必要になります。
<?php wp_list_comments( array( 'avatar_size' => 128 ) ); ?>
各コメント表示のカスタマイズ
ここまでコメント表示の全体部分についてでしたが、1件1件のコメント表示部分のカスタマイズは、callback
とend-callback
で行います。
コールバックの使い方は、近日別記事で紹介予定。