テーマ作り

2019.07.29 2024.07.03 まろん

コメント機能の前後ページ用ページネーションを実装（the_comments_navigation）

WP4.4以降で、コメントの前後ページ用ページネーションを実装する方法。
the_comments_navigation()の使い方説明。

設定

コメント設定情報

設定＞ディスカッション＞他のコメント設定をこのようにして、10ページ中5ページ目を表示して検証しています。
1ページあたり50件のコメントを含む複数ページに分割し、最後のページをデフォルトで表示する
古いコメントを各ページのトップに表示する

仕様

<?php the_comments_navigation( $args ); ?>

パラメータ	初期値	説明
prev_text	Older comments （JP:過去のコメント）	リンクの文字列
next_text	Newer comments （JP:新しいコメント）	リンクの文字列
screen_reader_text	Comments navigation	スクリーンリーダー用テキスト

※表示は利用言語によって異なる。日本語は（JP:）

初期値

<?php
	the_comments_navigation( array(
		'prev_text'          => __( 'Older comments', 'textdomain' ),
		'next_text'          => __( 'Newer comments', 'textdomain' ),
		'screen_reader_text' => __( 'Comments navigation', 'textdomain'),
	) );
?>

get_the_comments_navigation()も同様ですが出力しないため、echoが必要になります。

標準のコードと出力されるHTML

get_the_comments_navigation()の出力サンプル

<?php the_comments_navigation(); ?>

<nav class="navigation comment-navigation" role="navigation">
	<h2 class="screen-reader-text">コメントナビゲーション</h2>
	<div class="nav-links">
		<div class="nav-previous"><a href="https://example.com/category-name/post-slug/comment-page-4/#comments">過去のコメント</a></div>
		<div class="nav-next"><a href="https://example.com/category-name/post-slug/comment-page-6/#comments">新しいコメント</a></div>
	</div>
</nav>

装飾用CSS

.comment-navigation {}
.comment-navigation .nav-links {}
.comment-navigation .nav-links a.nav-previous,
.comment-navigation .nav-links a.nav-next {}
.comment-navigation .nav-links a.nav-previous:hover,
.comment-navigation .nav-links a.nav-next:hover {}

.navigation / .screen-reader-text / .nav-links これらのクラスは、他でも使われているため、単独で指定するより継承された方が良い。

Codex

the_comments_navigation() WP4.4〜
get_the_comments_navigation() WP4.4〜