WordPressのコメント一覧をカスタマイズ！タイトルやHTMLとCSS変更＆無限スクロール風表示など

2021年1月27日WordPressカスタマイズ・基礎知識

WordPressのコメント一覧は、コメントって大事なんだけど他の投稿も見てもらいたいのにちょっと邪魔だったり、タイトルや配置がださかったり…色々と変えたいところがある人も多いのでは？

でもWordPressの中では簡単にできるカスタマイズがあまりなく、限定されている部分でもあります。

そんなコメント欄を、自分の望み通りにカスタマイズする方法を徹底解説！

プログラミング知識がなくても、プラグインなしでも、コメント欄の表示が自在に変えられます。

後半では、例としてコメント一覧をぜんぶ表示して見たい人が表示／非表示を切り替えられるカスタマイズを紹介していますが、それ以外のカスタマイズをしたい場合でも方法がわかる内容になっているので、ぜひ確認してください。

コメント一覧のタイトルを変更する方法

コメント一覧のタイトルが「ディスカッション」になっていて「コメント」に変えたかったり、「コメント」ではなく「質問板」として使いたかったりする場合もありますよね。

ここでいうタイトルは、コメントを入力するコメントフォームのタイトルではなく、コメント一覧のタイトルです。

コメントフォームのタイトルは[file_name]functions.php[/file_name]でフックを使って簡単に変えられますが、肝心のコメントセクション全体のタイトルが変えられない…なんてことも。

意外と、カスタマイズ機能が充実しているテーマでもここは変えられなかったりします。

結論からいうと、[file_name]comment.php[/file_name]を編集するしか方法はない場合が多いです。

comment.phpの見つけ方

comment.phpは通常はWordPressのテーマファイルの直下にあります。

[folder]public_html[/folder]>[folder]wp-content[/folder]>[folder]themes[/folder]>[folder]luxeritas[/folder]>[file_name]comment.php[/file_name]

テーマによっては、[file_name]comment.php[/file_name]が無い場合もあるらしいですが、一般的なテーマならあります。ない場合はご相談ください。

[file_name]comment.php[/file_name]を親テーマからダウンロードしたら、テキストエディタで開きます。

[balloon-simple]テーマファイルをダウンロードするFTPソフトやテキストエディタについてはコチラ[/balloon-simple]

そしてまず、自分のサイトのコメント欄があるページを開いて、デベロッパーツールで要素を調査してください。

変えたい部分の見出しを調査して、classやidがないか見てみましょう。なければ、<h2>なのか<h3>なのかだけでも見ておきます。

要素を特定できそうな情報がわかったら、[file_name]comment.php[/file_name]を開いてクラス名やID名、HTMLでファイル内のコードを検索してみましょう。

Luxeriasの[file_name]comment.php[/file_name]

<div id="comments" class="grid">
<h2 class="discussion"><i class="<?php echo $awesome['far'], $fa_id_card; ?>"></i><?php echo __( 'Discussion', 'luxeritas' ); ?></h2>
<?php
if( have_comments() ) {

Lightningの[file_name]comment.php[/file_name]


		<?php // You can start editing here -- including this comment! ?>

		<?php if ( have_comments() ) : ?>
			<h2 class="comments-title">
				<?php
					printf( _nx( 'One thought on “%2$s”', '%1$s thoughts on “%2$s”', get_comments_number(), 'comments title', 'lightning' ),
						number_format_i18n( get_comments_number() ), '<span>' . get_the_title() . '</span>' );
				?>
			</h2>

こんな感じで<h2 class="comments-title">ごにょごにょ</h2>みたいな部分を見つけます。

そうしたら、ごにょごにょ部分を削除し、自分の設定したいように普通のHTMLでタイトル設定して、子テーマにアップロードすれば完了です。

特にLightningはコメントタイトルが長すぎてすっごく邪魔だったので、変えられてスッキリしました。

[file_name]comment.php[/file_name]内にコメントタイトル部分がない場合は、コンテンツ表示部分のテンプレート内にある場合があります。

大抵はsingle.phpなので、[file_name]single.php[/file_name]で同じ作業をしてください。

[file_name]single.php[/file_name]でもない場合、面倒ですが親テーマのテーマファイルを丸ごとダウンロードして、テキストエディタでフォルダごと開いてから「ディレクトリ内を検索」し、タイトル部分を見つけましょう。

タイトル部分があったファイルを編集して、子テーマにアップロードすれば完了です。

そのファイルが親テーマ直下ではなく、[folder]template-parts[/folder]などのフォルダ内にある場合があります。その場合は、子テーマの中にも親テーマの構造をそっくり真似して同じ名前でフォルダを作成し、その中にアップロードしましょう。

コメントの件数を表示したい場合

コメントタイトル内でコメントの件数を表示したい場合は、表示したい部分に以下のPHPコードを入れます。

<?php echo get_comments_number(); ?>

タイトル内じゃなくても、タイトルの後にpタグで挿入してもOKです。

<h2 class="comment-title">コメント</h2>
<p><?php echo get_comments_number(); ?>件のコメント</p>

コメント一覧の表示設定

コメント一覧については、WordPressの[site-menu]設定[/site-menu]の[site-menu]ディスカッション[/site-menu]から基本設定ができます。

[check] コメントを □階層までのスレッド (入れ子) 形式にする[/check]

これにチェックを入れると、他のコメントに返信ができるようになり、返信コメントが親コメントの下階層として表示されます。チェックを外すと、返信自体ができなくなります。

コメント一覧の並び順が謎！？最初のページの表示件数がおかしい！？

[check]1ページあたり □件のコメントを含む複数ページに分割し、 [最初/最後]のページをデフォルトで表示する
[古い/新しい] コメントを各ページのトップに表示する[/check]

ここにチェックをいれるとページネーションが表示されます。

これとても分かりづらいのですが、

[最初/最後]のページをデフォルトで表示する

[古いコメントのページ/新しいコメントのページ]のページをデフォルトで表示するの意味です。

古い順からコメントが取得されてページ分けされて、それを最初のページ=古いから表示するか？最後のページ=新しいから表示するか？しか分けられません。

どういうことかというと、新しい順にコメントを並べてからページ分けということは出来ないので、古い順に並べた後最後のページが先に表示されるということです。

そうすると、1ページに10件表示されるはずなのに、デフォルトで表示される新しいコメントのページには少ない件数しか表示されないということが起こりえます。

コメントが52件あり、10件ずつでページネーションして最後のページをデフォルトで表示すると、最新のコメントの2件しか表示されないということです。

すごく残念な仕様ですが、仕方ありません。それを解決するために無限スクロールで表示する方法はこの後紹介します。

[古い/新しい] コメントを各ページのトップに表示する

ここは、各ページ内で並び替えを行います。

つまり最新の投稿から順番に表示するには、最後のページをデフォルトで表示する＆新しいコメントを各ページのトップに表示すると設定します。

コメント一覧を「すべて見る」ボタンで無限スクロール風に表示する

上記の並び順がいまいち上手くいかない問題とか、コメントをもうちょっと見たいだけなのにページネーションだとページが再読み込みされる問題とか、コメント欄をページネーションで一覧表示するのはちょっと不便です。

CSSとjQueryでコメントを全部並べて見たい人だけ全部見られるようにします。

サンプルサイト

[file_name]comment.php[/file_name]のコメント一覧の出力部分を探します。comment.phpの探し方はコチラ

wp_list_commentsと書いてある部分です。

その上付近に、<ul class="commentなんとか">または<ol class="commentなんとか">または<div class="commentなんとか">みたいに、コメント一覧を囲んでいるPHPタグがあります。

例）Ligntningの[file_name]comment.php[/file_name]

					</div><!-- .nav-links -->
				</nav><!-- #comment-nav-above -->
			<?php endif; // check for comment navigation ?>

			<div class="comment-wrap">

			<ol class="comment-list"> //これがコメント一覧のリスト
				<?php
					wp_list_comments( //ここがコメント一覧取得の関数
						array(
							'style'      => 'ol',
							'short_ping' => true,
						)
					);
				?>
			</ol><!-- .comment-list --> //これがコメント一覧の終了タグ

そのコメント一覧のリスト開始タグの直前に、以下のコードを入れます。

			<div class="comment-wrap">
			<!-- コメント続きを読む -->
			<?php if(get_comments_number() > 1){ //1つ以上コメントがあったら ?>
				<input type="checkbox" name="comment-open" class="comment-more" id="comment-more-1">
				<label for="comment-more-1" class="comment-more btn btn-primary">すべて見る</label>
				<label for="comment-more-1" class="comment-close btn btn-primary">コメントを閉じる</label>
			<?php } ?>

それから、コメント一覧の終了タグの</ol>または</ul>または</div>を探して、その下に</div>を追加します。

これを追加して

			</div><!-- .comment-wrap -->

こうしてください。

例）Lightningの場合

					</div><!-- .nav-links -->
				</nav><!-- #comment-nav-above -->
			<?php endif; // check for comment navigation ?>

			<div class="comment-wrap">
			<!-- コメント続きを読む -->
			<?php if(get_comments_number() > 1){ //1つ以上コメントがあったら ?>
				<input type="checkbox" name="comment-open" class="comment-more" id="comment-more-1">
				<label for="comment-more-1" class="comment-more btn btn-primary">すべて見る</label>
				<label for="comment-more-1" class="comment-close btn btn-primary">コメントを閉じる</label>
			<?php } ?>

			<ol class="comment-list"> //これがコメント一覧のリスト
				<?php
					wp_list_comments( //ここがコメント一覧取得の関数
						array(
							'style'      => 'ol',
							'short_ping' => true,
						)
					);
				?>
			</ol><!-- .comment-list -->
			</div><!-- .comment-wrap -->

テーマによっては条件分岐で沢山この部分がある場合があります。

大体テーマなどの設定による条件分岐なので、どれが自分の適用させている設定での部分なのかを見極めてそこにカスタマイズを入れましょう。

わからなければ全ての箇所に入れれば間違いなく達成です。笑

コメント一覧のHTMLをカスタマイズする

個々のコメントの出力はwp_list_commentsで行っています。

array( の中身の配列で、出力に関する設定変更ができます。

[balloon-simple]ここで変更できる部分のカスタマイズはこちらの記事を参照[/balloon-simple]

コメントの一覧全体表示のカスタマイズ wp_list_comments() | WPQW

コメント全体を変更する場合はcallbackを使いますが、それやっちゃうとコメントの出力をすべて自分でコード書かなきゃならなくなり、WordPressやテーマの機能で色々やっている部分がなくなるので不安です。

今回はコメントのHTMLの終わりに要素を追加したいだけなので、end-callbackを使います。

					wp_list_comments(
						array(
							'style'      => 'ol',
							'short_ping' => true,
							'end-callback' => 'add_customize_comments', //オリジナル関数を指定
						)
					);

※まだ[file_name]comment.php[/file_name]の変更は子テーマにアップロードしないでください！！

end-callbackで指定した関数名で[file_name]functions.php[/file_name]に関数を設置しておくと、自分が作ったその関数を読み込んで各コメントの閉じタグを出力できます。

[file_name]functions.php[/file_name]にコチラを追加します。読み込み指定済みなので、普段と違ってadd_filterとかadd_actionとかは必要ありません。

//コメント一覧の各コメントカスタマイズ用関数
function add_customize_comments($comment, $args, $depth) {
?>
  </li>
  <label for="comment-more-1" class="comment-close btn btn-primary">コメントを閉じる</label>
<?php 
}

本来は閉じタグのみ出力される部分で、コメント一覧を閉じるためのボタンを設置しました。

※閉じタグは、各コメントのHTMLで</li>か</div>かを確認し、</div>だった場合は関数の中身を書き換えてください。

閉じタグさえ書いておけば、コメントの中や外に何を追加しても自由なので、大抵のコメントカスタマイズはこの方法で出来ます。

なるべくcallbackで全体のコメント取得を書く方法よりは、end-callbackでの追加スタイルで済ませた方が良いでしょう。

コメント一覧を透かして消し、続きを表示／非表示するCSS

今回は、コメント一覧をそのまま取得し、1～2件目以降をCSSでdisplay:noneにして、透けて消える感じにします。

サンプルサイト

checkboxにチェックが入るlabelで、表示／非表示を切り替えて見たいユーザーのみ続きを見れるようにしていきます。

/* コメント続きを読む */
li.comment{
   clear:both;
}
div.comment-wrap{
	position:relative;
	margin-bottom:30px;
}
ol.comment-list{
	position:relative;
	height:630px; /*デフォルト表示する高さ*/
	overflow:hidden;
}
ol.comment-list:after{
  display: block;
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 200px; /*グラデーションで隠す高さ*/
  background: linear-gradient(rgba(255,255,255,0) 0, #fff 200px);
  content: "";
}
#comment-more-1{
	display:none;
}
/*すべて見るボタン*/
.comment-more{
	position:absolute;
	bottom:-10px;
	left:0;
	width:100%;
	font-size:16px;
	padding:7px;
	z-index:200;
}
/*コメント一覧を閉じるボタンを非表示に*/
.comment-close{
	display:none;
	float:right;
}
/*5番目だけ表示してスタイル指定*/
label.comment-close:nth-of-type(5n){
	display:inline-block;
	font-size:1rem;
	padding:0.1rem 0.5rem;
}
.comment-more:checked~ol.comment-list{
	height:unset;
}
.comment-more:checked~ol.comment-list:after,.comment-more:checked~.comment-more{
	display:none;
}

すべて見るボタンやコメント一覧を閉じるボタンは、クラスをbtn-primaryにして基本のボタンスタイルが適用されるようにしています。

オリジナルなボタンデザインをしたい方は追加してください。

デフォルトで表示する部分の高さ調整なども自由です。

5個ごとにコメント一覧を閉じるボタンが表示されるので、もう見なくていいや！と思ったらすぐ閉じられるようになっています。

ただし、これだと閉じたときにスクロール位置が元に戻らず、要素だけが突如消えてページの下部が表示されてしまったりするので、そこはjQueryでスクロールして元の位置に戻します。

[file_name]header.php[/file_name]の</head>の前にこのコードを追加します

    <script type="text/javascript">
    	jQuery(function($){
        $('label.comment-close').click(function(){
          var commenttop = $(this).closest(".comment-wrap");
          var position = $(commenttop).offset().top + 450;
          $("html,body").animate({
            scrollTop : position
          }, {
              queue : false
              });
        });
    		//
    	});
    </script>

これでコメント一覧を閉じたときに、閉じた状態の位置にスクロールして戻るようになります。

Lightningのコメント一覧をコンパクトにするCSS

コメント欄がダラダラ続きすぎてうざい！という人はCSSでなるべくコンパクトにしましょう。

サンプルサイト

今回はLightningですが、大体どのテーマでもクラス名は一緒だったりするので使えそうです。

/* コメント一覧 */
li.comment{
	border:none;
	padding:0 0 0.5em;
}
li.comment p{
	padding-left:6px;
	margin-bottom:0.5em;
}
div.comment-body{
	position:relative;
}
.comment-author{
	padding:0.2em 0 0;
	margin-bottom:2px;
}
.comment-meta{
	font-size:14px;
	border:none;
	margin-bottom:0.5em;
	padding-left:6px;
}
.reply{
	position:absolute;
	right:0;
	top:3em; /*アバターの有無で位置調整してください*/
	text-decoration:underline;
	font-weight:bold;
	display:inline-block;
}
.reply a{
	display:block;
	padding:0 10px;
}

Luxeritasのコメント一覧をコンパクトにするCSS

Luxeritasの場合、元々超シンプルなのですが、ディスカッションの見出しを消し、さらにコンパクト化＆その分わかりやすくしました。このブログのコメント一覧のCSSです。

/* コメント */
h2.discussion{
	display:none;
}
.comment-author{
	border:1px solid #e5d7c7;
	padding:6px;
}
.comment-meta{
	margin-left:6px;
	margin-bottom:1.7em;
}
#comments p{
	margin:0 0 0.5em;
}
.comment-text{
	margin-left:6px;
}
.reply a{
	padding:0.4em;
}

WordPressカスタマイズ・基礎知識コメント

Posted by さや