previous_comments_link()

previous_comments_link()
目次

previous_comments_link()とは?

previous_comments_link()は、
コメントのページ送り(ページネーション)で「前のコメントページへのリンク」を表示するためのテンプレートタグ
です。

具体的には、コメントが複数ページに分かれているときに「新しいコメントへ」「前のページへ」といったリンクを表示できます。

「前へ」「次へ」で移動するナビゲーションを作る場合、
next_comments_link()とセットで使います。

previous_comments_link()のページ送りの仕組み

まず、WordPressのコメントページ送りを利用するためには、設定を有効にする必要があります。

previous_comments_link()の設定方法

  1. WordPress管理画面の
    [設定] → [ディスカッション]
    に移動。
  2. 「1ページあたり○件のコメントを含む」に件数を設定する。
  3. 「デフォルトで新しいコメントをページのトップに表示」など表示順を設定。
  4. 保存。

これで、指定数を超えるコメントがつくとページ分割が行われ、ページ移動用のリンクが必要になります。

previous_comments_link()の基本的な使い方

書式はとてもシンプルです。

previous_comments_link( string $label = '' )

戻り値:
なし(直接echoで出力するだけ)

previous_comments_link()の引数

引数説明
$labelstringリンクテキスト。省略すると「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で装飾して見やすいナビゲーションを作れる

コメントが活発なメディアやブログでは重要な機能です。
使いこなしてユーザー体験を向上させてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

初めてホームページを作成したのは1996年。
2000年よりフリーランスで主に中小企業、学校、各種公的団体、個人事業主のWordPressを活用したホームページ制作を行っています。WordPressテーマはそれぞれのクライアントに合わせて作成しています。
WordPressを活用したサイト運営のための情報発信をしていきます。

目次