【ワードプレス】コメント表示（wp_list_comments）をカスタマイズする【サンプル付き】

コメント表示欄のカスタマイズ方法解説ページのアイキャッチ

SHARE

このページにはプロモーションが含まれています

下記のページで wp_list_comments 関数を用いて基本的な受付フォームとコメントを表示する方法を解説しました。

コメント受付とコメント表示を行う方法の解説ページのアイキャッチ 【ワードプレス】テーマの作り方⑩：コメントの受付とコメントの表示を行う

このページではさらに、wp_list_comments 関数で表示するコメント欄のカスタマイズを行う方法について、サンプルソースコード付きで解説していきたいと思います。

コメント表示欄のスタイルを設定する

下記の comments.php により出力されるコメント表示欄には、

comments.php 
<?php
echo '<ul class="my-comments">';
wp_list_comments();
echo '</ul>';
?>

下図のように HTML タグにクラスが設定されています。

wp_list_commentsが出力するタグとクラス

MEMO

一番外側の <ul class=”my-comments”> は comments.php で wp_list_comments 関数を呼び出す前に明示的に出力したものですが、それ以外は wp_list_comments 関数によってデフォルトで出力されるものになります

これらのクラスに対してスタイルを設定すれば、コメント表示欄の見た目を変更することができます。

例えば style.css に下記のスタイル設定を追加すると、

style.css 
.my-comments {
    background-color: #AAAAAA;
    padding: 10px;
}

.my-comments ul,
.my-comments li {
  list-style: none;
}

.my-comments li {
	margin: 10px 0px 10px 0px;
}

.comment-body {
	padding: 10px;
	background-color: #FFFAFA;
}

.comment-author {
	font-size: 1.2em;
}

.comment-meta a {
	text-decoration: none;
	color: #222222;
}

.reply {
	text-align: right;
}

コメント表示欄は下の図のような見た目に変わります。

コメント表示欄へスタイル設定を行った結果

コメントが無い場合の表示を変更する

これは have_comments 関数を使用することで実現することができます。

have_comments 関数は、そのページに表示するコメントが存在するかどうかを判断する関数で、存在する場合は true を、存在しない場合は false を返却します。

したがって、下記のように comments.php にプログラムを記述することで、コメントが存在しない場合は「まだコメントがありません」等といったメッセージを表示することができます。

comments.php 
<?php
if ( have_comments() ) {
	wp_list_comments();
} else {
	echo 'まだコメントがありません';
}
?>

表示結果は下のようになります。

コメントがない時の表示結果

当然文字列である必要はなく、画像などを表示しても良いです。

スポンサーリンク

「返信」テキストを変更する

「返信」部分の表示テキストは wp_list_comments 関数の引数で指定することができます。

wp_list_comments 関数の第１引数 $args は連想配列となっており、この $args の ‘reply_text’ キーに設定した文字列が「返信」部分に置き換わって表示されます。

例えば「返信」部分の表示テキストを「回答する」に変更したい場合は、下記のように comments.php を記述します。

comments.php 
<?php
$args = array(
	'reply_text' => '回答する',
);

echo '<ul class="my-comments">';
wp_list_comments( $args );
echo '</ul>';

表示結果は下の図のようになります。

「返信」を変更した例

リスト表示をやめる

wp_list_comments 関数で出力されるコメントは「リスト形式」で表示されます。つまり li タグにより表示されます。

wp_list_comments 関数の第１引数への指定により、このリスト形式表示をやめることができます。具体的には li タグではなく、div タグにより出力することができるようになります。

前述の通り wp_list_comments 関数の第１引数は連想配列 $args であり、この $args の ‘style’ キーに ‘div’ を指定すれば、コメントが div タグで出力されるようになります。

comments.php 
<?php
$args = array(
	'style' => 'div'
);

echo '<div class="my-comments">';
wp_list_comments( $args );
echo '</div>';
?>

コメントが li タグではなく div タグで出力されるようになるので、wp_list_comments 関数の前後は ul タグでは過去まず div タグで囲むようにしましょう。

表示するコメントの種類を変更する

デフォルトのコメント欄では、純粋なコメントだけでなく、ピンバックやトラックバックも表示されるようになっています。

この表示するコメントの種類は wp_list_comments 関数の引数で指定することができます。

具体的には wp_list_comments 関数の第１引数である $args の ‘type’ キーで設定できます。

例えばコメント表示欄に表示するコメントを、純粋なコメントのみに限定する場合（ピンバックやトラックバックは表示しない）、下記のように comments.php を記述します。

comments.php 
<?php
$args = array(
	'type' => 'comment'
);

echo '<ul class="my-comments">';
wp_list_comments( $args );
echo '</ul>';
?>

スポンサーリンク

複数ページに分けてコメントを表示する

コメントが多い場合に、複数ページに分けてコメントを表示するための方法について解説します。

これは previous_comments_link 関数と next_comments_link 関数を使用することで簡単に実現することが可能です。

  • previous_comments_link：古いコメントへのリンクテキストを出力する
  • next_comments_link：新しいコメントへのリンクテキストを出力する

コメントを複数分けてページ表示するためには comments.php を下記のように記述します。

comments.php 
<?php
echo '<ul class="my-comments">';
wp_list_comments();
echo '</ul>';
previous_comments_link();
next_comments_link();
?>

表示結果は下図のようになり、

複数ページにコメントを分けた場合の例

「古いコメント」をクリックすると古いコメントのページが表示され、「新しいコメント」をクリックすると新しいコメントのページが表示されるようになります。

１ページあたりに表示するコメント数は、ワードプレスの管理画面（ダッシュボード）の「設定」→「ディスカッション」から設定可能です。

ページあたりのコメント数の設定

コメントが上記コメント数を超えた場合には、コメントのページ分けをワードプレス本体が自動的に行い、管理してくれてます。

wp_list_comments 関数はこのうちの一つのページのコメントを表示するようになっています。

さらに、wp_list_comments 関数 は previous_comments_link 関数で出力したリンクをクリックされた場合は一つ古いページのコメントを、next_comments_link が出力したリンクをクリックされた場合は一つ新しいページのコメントを表示してくれるようになっています。

ですので、上記の comments.php に previous_comments_link 関数と next_comments_link 関数の実行を追加してリンクテキストを出力するだけで、複数ページに分けてコメントを表示することを実現することができます。

previous_comments_link 関数と next_comments_link 関数共に、引数はリンクテキストの文字列を指定することができます。また、両関数ともに class 出力などは行われませんので、スタイル設定を行いたい場合は、下記のように HTML タグに class を設定したもので囲むようにして実行すると良いです。

comments.php 
<?php
echo '<ul class="my-comments">';
wp_list_comments();
echo '</ul>';
echo '<div class="my-previous-comment">';
previous_comments_link( '<< 古いコメント' );
echo '</div>';
echo '<div class="my-next-comment">';
next_comments_link( '新しいコメント >>' );
echo '</div>';
?>

スタイル設定を下記のように style.css で行えば、

style.css 
.my-previous-comment {
	text-align: left;
}
.my-next-comment {
	text-align: right;
}

表示は下記のように変わります。

古いコメントと新しいコメントのスタイル設定結果

参考ウェブページ

このページ作成時には、下記のウェブページを参考にしました。

参考 テンプレートタグ/wp list commentsWordPressCodex日本語版

wp_list_comments 関数の引数のデフォルト値などが記載されていますので、これを参考にしながらコメント受付フォームの更なるカスタマイズをすることもできると思います。

よく分からない点などありましたら、是非コメントやツイッター等で質問をいただければと思います。

まとめ

このページではコメント表示欄のカスタマイズ方法やそのサンプルの紹介を行いました。

コメント表示欄は  wp_list_comments 関数を実行するだけで簡単に表示することができますが、引数やスタイル設定によって様々なカスタマイズが行うことができます。

是非このページを参考にして、より自分好みのコメント表示欄にカスタマイズしてみてください！

コメント受付フォーム（comment_form）のカスタマイズについては下のページで解説していますので、是非こちらもご覧ください。

コメントフォームカスタマイズ方法解説ページのアイキャッチ 【ワードプレス】コメントフォーム（comment_form）をカスタマイズする【サンプル付き】

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

サムネ付き関連記事カード自作方法解説ページのアイキャッチ
ワードプレスで「サムネ付き関連記事カード」を自作する

次の記事

【ワードプレス】コメントフォーム（comment_form）を…
コメントフォームカスタマイズ方法解説ページのアイキャッチ