WPコメント欄の分割(ページネーション)を新しい順で実装

Wordpress

ワードプレスを運営していると、コメント欄をカスタマイズしたくなる時ってありますよね。

こんな風に

 

  • コメント欄にページネーションをつけたい
  • 新しいコメントを先頭にソートして表示させたい

ただそれだけなのに、結構はまってしまい2日くらい悩んだので備忘録として。

*テンプレートはCocoonで、子テーマを使用しています

ワードプレスのコメント欄をカスタマイズする

こちらのサイト様のおかげで希望通りの実装ができました。

WordPressのコメント欄を新着順（降順）にしてページ分割をおこなう方法
他にもいろんなサイトを見てワードプレスのコメントページ送りについて調べたのですが、

私のWPに対する知識が乏しすぎて自サイトに活かすことができず・・・上記サイト様の解説がどんぴしゃでした！本当にありがとうございます。

ある程度理解できてからリファレンスを見てみると、こちらもとても有意でした。

関数リファレンス/get comments
テンプレートタグ/wp list comments
関数リファレンス/paginate comments links

「設定」の設定

まず、ダッシュボードの「設定」から「ディスカッション」を選択。

「他のコメント設定」の項にて

 1ページあたり２０件のコメントを含む複数ページに分割し、 最初のページをデフォルトで表示する
にチェックを入れて、その下を
新しいコメントを各ページのトップに表示する

にセット。

コメントの並びを日付の新しい順にし、その新しいページをデフォルトで表示する、という設定です。

最初のページってなんだ？？と最初は意味がよくわからなかったのですが、WPの設定によってはコメント欄の最後のページをデフォルト表示させることもできるようです。
例えばコメントが５ページに渡っていたら５ページ目をデフォルトで表示させる。ということ。

ディスカッションでの設定はその２箇所になります。

comments.phpを開く

ダッシュボードの「外観」から「テーマの編集」を選んで、comments.phpを開きます。

・子テーマの中になければFTPソフトなどで親テーマからコピーして子テーマに入れてください。
・直接編集するといざというとき戻せなくなるので、ローカルにコピーしてからテキストエディタなどで編集することをおすすめします。

コメントを取得

いよいよcomments.phpを修正してゆきます。

$comments = get_comments( array( 'status' => 'approve', 'post_id' => $post->ID ) );

まず　get_comments()　でコメントを取得して変数$commentsへ代入。

その際にパラメーターを渡して

  • 承認済みのコメント
  • 指定したポスト(id)に対するコメント

のみに絞ります。

この時点で取得したコメントの並びはデフォルトで降順(新ー＞古)になります！！

コメント一覧を表示

次にテンプレートダグである wp_list_comments()　を使ってコメント一覧をタグ付きで表示させます。

wp_list_comments(
array(
'per_page' => 20,
'reverse_top_level' => false
),
$comments
);

パラメーターで１ページあたりの表示数と、コメントを古い順か新しい順かを設定。

配列と、先ほど取得したコメントを入れてる$commentsも渡します。

ディスカッション設定で１ページあたりのコメント数はもうセットしてるし’per_page’ の意味は？と感じたので、試しにディスカッションを「１ページあたり１０件のコメント」と修正してみたところ、
コメントは１ページにつき２０件表示されつつ、ページネーションは１０件表示の計算に基づいて算出されてしまいました。どちらもきちんと設定した方が良いようです・・・

ページネーション表示

 <?php
if(get_comment_pages_count() > 1){
echo '<div class="myPage">';
paginate_comments_links();
echo '</div>';
}
endif;
?>

最後はページネーションの表示。

もしコメントが１ページ以上あったら、というif文でくくって、paginate_comments_links()でページネーションをタグも含めて出力させます。

この関数をクラスつきのdivタグで囲っているのはcssをいじる時他のページに影響させないようにしたかったからなので、なくても大丈夫です。

 

これで、ページネーションは希望どおりの挙動になりました！

コメント取得〜ページネーションのコード

まとめるとこんなコードになります。

<ol class="commets-list">
<?php
$comments = get_comments( array( 'status' => 'approve', 'post_id' => $post->ID ) );

wp_list_comments(
array(
'per_page' => 20,
'reverse_top_level' => false
),
$comments
); 
?>
</ol>　//ここまでがコメント取得&出力

//ここからページネーション
<?php
if(get_comment_pages_count() > 1){
echo '<div class="myPage">';
paginate_comments_links();
echo '</div>';
}
endif;
?>

これはコメント一覧表示とページネーションに関する部分のコードです。フォーム表示は含まれていませんので適宜環境に合わせてフォームを置いてください。

コメント投稿後の遷移先を変える

無事にできたと思いきや、一難去ってまた一難。

コメントのテスト投稿をしてみたところ、なんだかおかしなことになりました。

カスタマイズ前は投稿したコメントIDのパーマリンクがついたURLでページが遷移して、投稿したコメントが表示されていたのですが

カスタマイズ後はなぜか一番最後のページ(現状だと一番古いコメントのページ)に遷移してしまいます。

最新が表示されるコメントトップに遷移してもらいたいので、いじりたくなかったfunction.phpを触ることに。

add_filter('comment_post_redirect', 'comment_redirect');

function comment_redirect(){
wp_redirect('http://任意のアドレス');
exit();
}

【WordPress】記事へのコメントを送信した後にサンクスページを表示させる方法

こちらのサイト様を参考に上記コードをfunction.phpに追加したら、無事にコメントトップへ遷移させることができました。

comment_post_redirect()という関数が発動したらcomment_redirect()という関数の挙動にスイッチする。

そのcomment_redirect()の遷移先はwp_redirect(‘http://任意のアドレス’)だよ〜

という内容になります。

今回は特定の固定ページに対しての挙動を変えたかったのでアドレスを特定のものに変更すればOKですが、各記事のコメント欄となると、上記のコードでは対応できません(；；)

 

遷移先のURLにつけるパラメーターを修正すればもっとスマートかな？とも考えたのですが、wp-comments-post.phpの内容がハードル高かったので諦めました。

いつかリベンジするぞ！！

タイトルとURLをコピーしました