TOP / WordPress / 関数の使い方 / 【WordPress】ページネーションを作る

【WordPress】ページネーションを作る

ページネーション、ページャー、ページ送り、呼び方はいろいろありますが、

the_posts_pagination() を使う

WordPressに標準装備の関数でページネーションを実装するやり方。

the_posts_pagination()

the_posts_pagination( $args );

投稿の前と次のページへリンクするページ番号のセットを出力する
mid_size現在のページの左右にそれぞれ表示するページ番号の数。デフォルトは1。
prev_text投稿の前のセットへのリンクテキスト。デフォルトは「Previous」。
next_text投稿の次のセットへのリンクテキスト。デフォルトは「Next」。
screen_reader_textスクリーンリーダー用テキスト。デフォルトは「Posts navigation」。

PHP

<?php the_posts_pagination(
			array(
				'mid_size'      => 1,
				'prev_text' => '<',
				'next_text' => '>',
				'type'          => 'plain'
			)
); ?>

typeをplainに設定すると、リストタグではなくdivで囲まれて出てきます。

2ページ目での出力例は以下

<nav class="navigation pagination" aria-label="投稿">
		<h2 class="screen-reader-text">投稿ナビゲーション</h2>
		<div class="nav-links"><a class="prev page-numbers" href="前ページのURL"><</a>
<a class="page-numbers" href="1ページ目のURL">1</a>
<span aria-current="page" class="page-numbers current">2</span>
<a class="page-numbers" href="3ページ目のURL">3</a>
<span class="page-numbers dots">…</span>
<a class="page-numbers" href="6ページ目（最後のページ）のURL">6</a>
<a class="next page-numbers" href="次ページのURL">></a></div>
	</nav>

スクリーンリーダー用のテキストが出てきて、非表示にしたい場合は下記を追加します。
（2022/03/04現在、WordPress5.9.1では標準で下記のCSSが効いているようです。たぶん…）

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

デザインのCSSはこういう感じ。

/* ページャー */
.nav-links {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5em;
}
.page-numbers {
    display: inline-block;
    background: #fff;
	width: 3em;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
a.page-numbers {
    text-decoration: none;
}
a.page-numbers:hover {
    background: var(--odo);
}
.page-numbers.current {
    background: var(--odo);
}

paginate_links() を使う

WordPress 関数の使い方
WordPress覚書き ページネーション

参考

関連記事