
previous_comments_link()とは?
previous_comments_link()
は、
コメントのページ送り(ページネーション)で「前のコメントページへのリンク」を表示するためのテンプレートタグ
です。
具体的には、コメントが複数ページに分かれているときに「新しいコメントへ」「前のページへ」といったリンクを表示できます。
「前へ」「次へ」で移動するナビゲーションを作る場合、next_comments_link()
とセットで使います。
previous_comments_link()のページ送りの仕組み
まず、WordPressのコメントページ送りを利用するためには、設定を有効にする必要があります。
previous_comments_link()の設定方法
- WordPress管理画面の
[設定] → [ディスカッション]
に移動。 - 「1ページあたり○件のコメントを含む」に件数を設定する。
- 「デフォルトで新しいコメントをページのトップに表示」など表示順を設定。
- 保存。
これで、指定数を超えるコメントがつくとページ分割が行われ、ページ移動用のリンクが必要になります。
previous_comments_link()の基本的な使い方
書式はとてもシンプルです。
previous_comments_link( string $label = '' )
戻り値:
なし(直接echo
で出力するだけ)
previous_comments_link()の引数
引数 | 型 | 説明 |
---|---|---|
$label | string | リンクテキスト。省略すると「Older Comments」(「前のコメント」)が表示される |
previous_comments_link()の使い方の例
単純に「新しいコメントへ」のリンクを表示する例です。
<div class="comment-navigation">
<?php previous_comments_link('« 新しいコメントへ'); ?>
</div>
この場合、もし現在表示中のページが最新コメントのページであれば、リンクは表示されません。
next_comments_link()
との併用
「前へ」「次へ」をセットで表示するのが一般的です。
例:
<div class="comment-navigation">
<div class="nav-previous">
<?php previous_comments_link('« 新しいコメント'); ?>
</div>
<div class="nav-next">
<?php next_comments_link('古いコメント »'); ?>
</div>
</div>
previous_comments_link()が出力されない理由
previous_comments_link()
は条件に合わないと何も出力しません。
主な理由は以下の通りです。
現在ページが最新ページ(最初のページ)
→「新しいコメントへ」リンクは存在しないため出ない。
コメント総数が1ページ内に収まっている
→ページ送りが発生しないのでリンクも不要。
コメントがまだ承認されていない
→非表示コメントはカウントされません。
previous_comments_link()の条件付きで表示を制御
リンクが存在する場合のみHTMLを出したいときは、get_previous_comments_link()
(WordPress 5.3以降)を使います。
get_previous_comments_link()とは?
previous_comments_link()
はその場で出力するだけですが、get_previous_comments_link()
はリンクHTMLを文字列として返します。
例:
$link = get_previous_comments_link('« 新しいコメント');
if ($link) {
echo '<div class="nav-previous">' . $link . '</div>';
}
このように条件分岐が簡単になります。
previous_comments_link()のCSSでの装飾
previous_comments_link()
単体では単純な<a>
タグが出力されます。
例:
<a href="https://example.com/sample-post/comment-page-2/#comments">« 新しいコメント</a>
ここにCSSを当てることで見やすいボタンにできます。
例:
.comment-navigation {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.comment-navigation a {
background: #eee;
padding: 8px 16px;
border-radius: 4px;
text-decoration: none;
color: #333;
}
.comment-navigation a:hover {
background: #ddd;
}
previous_comments_link()はどこで使う?
主に以下のテンプレートで使います。
comments.php
→ コメント表示部分の下部や上部に設置。
single.php
→ コメントをページ分割する場合、テンプレートに直接組み込む。
ページネーションを一括表示する場合
「前」「次」だけでなくページ番号も含めてナビゲーションを作りたいときは、paginate_comments_links()
を使います。
paginate_comments_links()の例
<div class="comment-pagination">
<?php paginate_comments_links(array(
'prev_text' => '« 前へ',
'next_text' => '次へ »',
'type' => 'list',
)); ?>
</div>
これを使うと、
- 前へ
- ページ番号
- 次へ
が一括で表示されます。
previous_comments_link()の出力例
previous_comments_link()
を呼んだときのHTML例:
<a href="https://example.com/sample-post/comment-page-1/#comments">« 新しいコメント</a>
このURLは該当ページのコメント部分にジャンプします。
previous_comments_link()のカスタマイズの実例
「次へ」「前へ」をカード風のUIで表示する例。
<div class="comment-nav">
<?php if (get_previous_comments_link() || get_next_comments_link()): ?>
<div class="comment-nav-inner">
<?php previous_comments_link('« 新しいコメント'); ?>
<?php next_comments_link('古いコメント »'); ?>
</div>
<?php endif; ?>
</div>
CSS:
.comment-nav-inner {
display: flex;
justify-content: space-between;
}
.comment-nav-inner a {
display: inline-block;
padding: 6px 12px;
background: #f1f1f1;
border-radius: 3px;
text-decoration: none;
}
.comment-nav-inner a:hover {
background: #e1e1e1;
}
previous_comments_link()のよくある質問
- リンクが表示されないのはなぜ?
-
ページ送りが有効化されていないか、現在が最初のページだからです。
- URLをカスタム形式にしたい
-
WordPressが自動生成するURLに合わせる必要があります。
パーマリンク設定で変更可能です。 - 前後リンクを一括管理したい
-
paginate_comments_links()
を検討しましょう。
まとめ
previous_comments_link()
は「前のコメントページ」へのリンクを出力する関数- 引数にラベルテキストを指定できる
next_comments_link()
とペアで使うのが基本- 条件分岐には
get_previous_comments_link()
を活用 - CSSで装飾して見やすいナビゲーションを作れる
コメントが活発なメディアやブログでは重要な機能です。
使いこなしてユーザー体験を向上させてください。