WordPress

WordPress – ページネーションをページ番号で実装する（プラグインなし）

記事一覧ページなどでページネーション機能を実装したいときWordPressの関数を使用することで実装可能です。よく使用するページネーション機能の関数は2つあり、ページ番号を出力するにはthe_posts_pagination()を使用します。

the_posts_pagination / サンプル

<?php the_posts_pagination( array(
    'mid_size' => 1,
    'prev_text' => '戻る',
    'next_text' => '次へ',
    'screen_reader_text' => '投稿ナビゲーション'
) ); ?>

出力結果

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

パラメーターについて

mid_size 現在のページの左右に表示するページ数。例えば「1」とした場合、5ページを表示していたら4ページと6ページのリンクを出力する。
prev_text 投稿の「前」のリンクテキストを設定（特殊文字も可）。
next_text 投稿の「次」のリンクテキストを設定（特殊文字も可）。
screen_reader_text 投稿ナビゲーションのタイトルの設定。デフォルトは「投稿ナビゲーション」

CSSについて

nav.navigation.paginationナビゲーションの大枠のクラス
a.prev.page-numbers戻るボタンのクラス
a.page-numbersページ番号のリンククラス
span.page-numbers.dots…と表示されない番号のクラス
span.page-numbers.current現在のページのクラス
a.next.page-numbers次へボタンのクラス