WordPressのページネーションを自作する方法【プラグイン無し】

アーカイブページに並ぶ記事の量が多いと、ページネーションが必要になります。

ページネーションとは、記事が30件あった場合に1ページあたり10件ずつ表示されるページ送りのことです。基本的には、記事一覧の下に以下のような形で表示されることが多いですね。

当サイトのページネーション

当記事では、WordPressでページネーションを自作する方法についてご紹介します。また、コピペで使えるPHPとCSSの記述もご紹介してますので、ぜひお役立てください。

ページネーションを自作する方法

WordPressでページネーションを作る時は、the_posts_pagination()を使う方法が最も簡単です。この関数1つでページネーションを構成するHTMLを出力することができるんですね。

the_posts_pagination()

ページネーションを出力

公式ページ

以下に作成する方法を3つのステップで解説してますので、順番にご覧ください。

the_posts_pagination()を書く場所
the_posts_pagination()のパラメータを設定
the_posts_pagination()を表示

the_posts_pagination()を書く場所

the_posts_pagination()は、そのまま使ってもアーカイブページ以外で動作しません。どのPHPファイルに書いても動作するわけではないことが覚えておきましょう。

一般的にアーカイブページで呼び出される代表的なテンプレートファイルは以下になります。

index.php	ベースとなるページ（アーカイブ以外では動作しない）
archive.php	ベースとなるアーカイブ
home.php	投稿アーカイブ
archive-$posttype.php	カスタム投稿アーカイブ
author.php	著者アーカイブ
category.php	カテゴリーアーカイブ
tag.php	タグアーカイブ
taxonomy.php	カスタムタクソノミーアーカイブ
data.php	日付アーカイブ

一度、これらのファイルに「the_posts_pagination()」と書き込んでみてください。すでにページネーションが表示されるようになったはずです。

パラメータを工夫すればアーカイブページ以外でも使えるようになります。

the_posts_pagination()のパラメータを設定

次に出力されるページネーションを自分好みにカスタマイズしていきましょう。the_posts_pagination()の引数には、配列形式で様々なパラメータを指定できるようになっています。

このパラメータを変更することで出力する内容に変更を加えることができるんですね。以下に代表的なパラメータををご紹介します。

total	最大ページ数（ナビゲーションの数を制限）
show_all	trueにするとナビゲーションを省略表示しない
mid_size	現在のナビゲーションの前後に何個表示するか
prev_next	「前へ」「次へ」の有無（falseを指定で非表示）
prev_text	「前へ」部分のテキストを指定
next_text	「次へ」部分のテキストを指定
type	出力形式（’list’を指定でリスト形式に）
before_page_number	各ナビゲーションの前にテキストを挿入可能
after_page_number	各ナビゲーションの後にテキストを挿入可能

他にもパラメータが存在しますが、複雑なカスタマイズをする時にしか利用する機会がないため、ここでは割愛します。詳しくは公式ページをご覧ください。

the_posts_pagination()を表示

それではアーカイブページの記事一覧下にページネーションを表示してみましょう。以下は、一般的なページネーションを生成する時用にパラメータを設定した記述になりますので、ぜひコピペして使ってみてください。（不要なものは省略）

<?php
// 基本のページネーション
the_posts_pagination( array(
  'mid_size' => 1,
  'prev_next' => false,
  'type' => 'list',
) );
?>

上記をスタイリングすれば、基本的なナビゲーションとして利用できるはずです。

ページネーションの汎用スタイルもご紹介

先程ご紹介したページネーションに1からスタイリングするのも面倒ですよね。以下にどのサイトでも汎用的で使えるようなCSSをご紹介します。これもコピペで利用できますので、ぜひセットでお使いください。

完成イメージ

/* ページネーションの汎用スタイル */
.nav-links ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.nav-links li > * {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  height: 45px;
}
.nav-links li > *:not(.dots) {
  width: 45px;
  border-radius: 50%;
  color: #000000;
  background: #efefef;
  transition: color 0.3s ease, background 0.3s ease;
}
.nav-links li > .current,
.nav-links li > a:hover {
  color: #ffffff;
  background: #000000;
}