WordPressのthe_posts_pagination()でページャーを実装する

2024.03.02

WordPressのthe_posts_pagination()を使って、ページャーの実装をしてみます。

サンプルコード

the_posts_pagination()はページ送りを表示するための関数で、記事一覧や検索結果など、一覧系のテンプレート内で使用されます。
今回は記事一覧のテンプレートで、ページ数が10件ある状態で試してみます。

まずは引数を指定しない場合です。

<?php if(have_posts()): while(have_posts()): the_post(); ?>
  <p>the_title:<?php the_title(); ?></p>
<?php endwhile; endif; ?>

<?php the_posts_pagination(); ?>

1ページ目の場合、以下のようなコードが出力されます。
現在のページと次のページ、最後の10ページ目が表示され、その間のページは省略して表示されました。

<nav class="navigation pagination" aria-label="投稿">
  <h2 class="screen-reader-text">投稿ナビゲーション</h2>
  <div class="nav-links">
    <span aria-current="page" class="page-numbers current">1</span>
    <a class="page-numbers" href="https://XXXXX/xxx/page/2/">2</a>
    <span class="page-numbers dots">&hellip;</span>
    <a class="page-numbers" href="https://XXXXX/xxx/page/10/">10</a>
    <a class="next page-numbers" href="https://XXXXX/xxx/page/2/">次へ</a>
  </div>
</nav>

5ページ目の場合です。
現在のページとその前後のページ、最初と最後のページが表示され、その間のページが省略表示になります。

<nav class="navigation pagination" aria-label="投稿">
  <h2 class="screen-reader-text">投稿ナビゲーション</h2>
  <div class="nav-links">
    <a class="prev page-numbers" href="https://XXXXX/xxx/page/4/">前へ</a>
    <a class="page-numbers" href="https://XXXXX/xxx/">1</a>
    <span class="page-numbers dots">&hellip;</span>
    <a class="page-numbers" href="https://XXXXX/xxx/page/4/">4</a>
    <span aria-current="page" class="page-numbers current">5</span>
    <a class="page-numbers" href="https://XXXXX/xxx/page/6/">6</a>
    <span class="page-numbers dots">&hellip;</span>
    <a class="page-numbers" href="https://XXXXX/xxx/page/10/">10</a>
    <a class="next page-numbers" href="https://XXXXX/xxx/page/6/">次へ</a>
  </div>
</nav>

ページャーの上部に.screen-reader-textというクラス名で「投稿ナビゲーション」という見出しがついていますが、これはスクリーンリーダー用の要素になります。
.screen-reader-textというクラスはWordPress側で用意されているスタイルで非表示になります。
設定なしの場合のデモページ

現在のページ数の前後に表示される件数を設定してみます。

<?php
$args = array(
  'mid_size' => 2,
);
the_posts_pagination($args);
?>

1ページ目の場合、現在のページから2ページ先の3ページまでが表示されるようになりました。

<nav class="navigation pagination" aria-label="投稿">
  <h2 class="screen-reader-text">投稿ナビゲーション</h2>
  <div class="nav-links">
    <span aria-current="page" class="page-numbers current">1</span>
    <a class="page-numbers" href="https://XXXXX/xxx/page/2/">2</a>
    <a class="page-numbers" href="https://XXXXX/xxx/page/3/">3</a>
    <span class="page-numbers dots">&hellip;</span>
    <a class="page-numbers" href="https://XXXXX/xxx/page/10/">10</a>
    <a class="next page-numbers" href="https://XXXXX/xxx/page/2/">次へ</a>
  </div>
</nav>

5ページ目の場合、現在のページから前後2ページの3〜7ページが表示されるようになりました。

<nav class="navigation pagination" aria-label="投稿">
  <h2 class="screen-reader-text">投稿ナビゲーション</h2>
  <div class="nav-links">
    <a class="prev page-numbers" href="https://XXXXX/xxx/page/4/">前へ</a>
    <a class="page-numbers" href="https://XXXXX/xxx/">1</a>
    <span class="page-numbers dots">&hellip;</span>
    <a class="page-numbers" href="https://XXXXX/xxx/page/3/">3</a>
    <a class="page-numbers" href="https://XXXXX/xxx/page/4/">4</a>
    <span aria-current="page" class="page-numbers current">5</span>
    <a class="page-numbers" href="https://XXXXX/xxx/page/6/">6</a>
    <a class="page-numbers" href="https://XXXXX/xxx/page/7/">7</a>
    <span class="page-numbers dots">&hellip;</span>
    <a class="page-numbers" href="https://XXXXX/xxx/page/10/">10</a>
    <a class="next page-numbers" href="https://XXXXX/xxx/page/6/">次へ</a>
  </div>
</nav>

mid_sizeを設定した場合のデモページ

途中を省略しないで表示したい場合、show_allを使用します。

<?php
$args = array(
  'show_all' => true,
);
the_posts_pagination($args);
?>

途中を省略せず、全件表示されるようになりました。

<nav class="navigation pagination" aria-label="投稿">
<h2 class="screen-reader-text">投稿ナビゲーション</h2>
  <div class="nav-links">
    <span aria-current="page" class="page-numbers current">1</span>
    <a class="page-numbers" href="https://XXXXX/xxx/page/2/">2</a>
    <a class="page-numbers" href="https://XXXXX/xxx/page/3/">3</a>
    <a class="page-numbers" href="https://XXXXX/xxx/page/4/">4</a>
    <a class="page-numbers" href="https://XXXXX/xxx/page/5/">5</a>
    <a class="page-numbers" href="https://XXXXX/xxx/page/6/">6</a>
    <a class="page-numbers" href="https://XXXXX/xxx/page/7/">7</a>
    <a class="page-numbers" href="https://XXXXX/xxx/page/8/">8</a>
    <a class="page-numbers" href="https://XXXXX/xxx/page/9/">9</a>
    <a class="page-numbers" href="https://XXXXX/xxx/page/10/">10</a>
    <a class="next page-numbers" href="https://XXXXX/xxx/page/2/">次へ</a>
  </div>
</nav>

show_allを設定した場合のデモページ

全体を囲っている.paginationというクラス名を変更してみます。

<?php
$args = array(
  'class' => 'pager',
);
the_posts_pagination($args);
?>

クラス名を.pagerに変更できました。

<nav class="navigation pager" aria-label="投稿">
  <h2 class="screen-reader-text">投稿ナビゲーション</h2>
  <div class="nav-links">
    <span aria-current="page" class="page-numbers current">1</span>
    <a class="page-numbers" href="https://XXXXX/xxx/page/2/">2</a>
    <span class="page-numbers dots">&hellip;</span>
    <a class="page-numbers" href="https://XXXXX/xxx/page/10/">10</a>
    <a class="next page-numbers" href="https://XXXXX/xxx/page/2/">次へ</a>
  </div>
</nav>

classを設定した場合のデモページ

prevとnextのテキストを変更してみます。

<?php
$args = array(
  'prev_text' => '←',
  'next_text' => '→',
);
the_posts_pagination($args);
?>

<nav class="navigation pagination" aria-label="投稿">
  <h2 class="screen-reader-text">投稿ナビゲーション</h2>
  <div class="nav-links">
    <span aria-current="page" class="page-numbers current">1</span>
    <a class="page-numbers" href="https://XXXXX/xxx/page/2/">2</a>
    <span class="page-numbers dots">&hellip;</span>
    <a class="page-numbers" href="https://XXXXX/xxx/page/10/">10</a>
    <a class="next page-numbers" href="https://XXXXX/xxx/page/2/">→</a>
  </div>
</nav>

prev_textとnext_textを設定した場合のデモページ

prevとnextを無くしたい場合、prev_nextにfalseを設定します。

<?php
$args = array(
  'prev_next' => false,
);
the_posts_pagination($args);
?>

<nav class="navigation pagination" aria-label="投稿">
  <h2 class="screen-reader-text">投稿ナビゲーション</h2>
  <div class="nav-links">
    <span aria-current="page" class="page-numbers current">1</span>
    <a class="page-numbers" href="https://XXXXX/xxx/page/2/">2</a>
    <span class="page-numbers dots">&hellip;</span>
    <a class="page-numbers" href="https://XXXXX/xxx/page/10/">10</a>
  </div>
</nav>

prev_nextを設定した場合のデモページ

the_posts_pagination()はページャーを出力まで行いますが、ページャーのタグを取得したい場合はget_the_posts_pagination()を使用します。

<?php
var_dump(get_the_posts_pagination());
?>

string(505) "
	<nav class="navigation pagination" aria-label="投稿">
		<h2 class="screen-reader-text">投稿ナビゲーション</h2>
		<div class="nav-links"><span aria-current="page" class="page-numbers current">1</span>
<a class="page-numbers" href="https://XXXXX/xxx/page/2/">2</a>
<span class="page-numbers dots">&hellip;</span>
<a class="page-numbers" href="https://XXXXX/xxx/page/10/">10</a>
<a class="next page-numbers" href="https://XXXXX/xxx/page/2/">次へ</a></div>
	</nav>"

参考サイト

日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

WordPressのthe_posts_pagination()でページャーを実装する

サンプルコード

コメントを残すコメントをキャンセル

Category

Tag

Recent

WordPressのthe_posts_pagination()でページャーを実装する

サンプルコード

関連記事

Movable Typeで記事のエクスポートを行う

WordPressでfunctions.phpを分割して管理する

custom-blocksで複数のブロックを作成する

WordPressでカスタムブロックを作成する

WP_Query()を使った後にwp_reset_postdata()を使う意味

コメントを残す コメントをキャンセル

Category

Tag

Recent

コメントを残すコメントをキャンセル