この記事ではアーカイブページでページネーション（ページャー）を実装する方法について解説します。
今回は下記に分けて解説するので、お好きな方法で実装してみてください！
- プラグイン「WP-PageNavi」を利用する方法
- プラグインを利用せずにコードを書いて実装する方法
- WordPressの関数（
the_posts_pagination()もしくはget_the_posts_pagination()）を使う方法 functions.phpに書いて自作する方法
- WordPressの関数（
プラグインを利用する
まずは、プラグインで簡単に実装する方法です。
この記事ではページネーション実装によく使われる「WP-PageNavi」を紹介します。
プラグインのインストール
プラグインの新規追加から「WP-PageNavi」と検索して、インストールします。
インストールが完了したら有効化にします。
テンプレートファイルの編集
ページネーションを表示したい箇所に出力用のコードを記述します。
<?php wp_pagenavi(); ?>上記のコードを設置すると、以下の構造でページネーションが出力されます。
<div class="wp-pagenavi" role="navigation">
<span class="pages">1 / 11</span>
<span aria-current="page" class="current">1</span>
<a class="page larger" title="ページ 2" href="#">2</a>
<a class="page larger" title="ページ 3" href="#">3</a>
<a class="page larger" title="ページ 4" href="#">4</a>
<a class="page larger" title="ページ 5" href="#">5</a>
<span class="extend">...</span>
<a class="larger page" title="ページ 10" href="#">10</a>
<span class="extend">...</span>
<a class="nextpostslink" rel="next" aria-label="次のページ" href="#">»</a>
<a class="last" aria-label="Last Page" href="#">最後 »</a>
</div>管理画面で細かい設定
設定に「PageNavi」という項目が追加されているので、こちらから表示するテキストやページ数などの設定が可能です。
コードを書く
続いては、プラグインを使わずに実装する方法です。
WordPress関数を利用する
ワードプレスには便利な関数がいくつもありますが、以下の関数でページネーションを実装することができます。
the_posts_pagination()
ページネーションを表示したい箇所に出力用のコードを記述します。
<?php the_posts_pagination(); ?>この1行だけで、以下の構造でページネーションが出力されます。
<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="#">2</a>
<span class="page-numbers dots">…</span>
<a class="page-numbers" href="#">11</a>
<a class="next page-numbers" href="#">次へ</a>
</div>
</nav>あらかじめパラメーターが用意されいるので、ある程度はカスタマイズすることが可能です。
<?php
$args = array(
'mid_size' => 3,
'prev_text' => '前のページへ',
'next_text' => '次のページへ;',
'screen_reader_text' => ' ',
);
the_posts_pagination($args);
?>上記のようにパラメーターを指定することで、表示するテキストや、左右に何ページ分数字を表示させるかなどを調整できます。
用意されているパラメーターは以下です。
| キー | 初期値 | 解説 |
| mid_size | 1 | 現在のページの左右にそれぞれ表示するページ番号の数。 |
| prev_text | Previous | 投稿の前のセットへのリンクテキスト。 |
| next_text | Next | 投稿の次のセットへのリンクテキスト。 |
| screen_reader_text | Posts navigation | スクリーンリーダー用テキスト。 |
また、この関数では内部でpaginate_links()を使用しているため、paginate_links()のパラメーターも設定することができます。
| キー | 初期値 | 解説 |
| base | %_% | ページ番号付きのリンクを生成するために使われるベースの URL を指定。 |
| format | ?page=%#% | ページネーションの構造を指定するために使用。 |
| total | 1 | 全体のページ数 |
| current | 0 | 現在のページ番号 |
| show_all | false | trueの場合、すべてのページ番号が表示。falseの場合、end_sizeとmid_sizeでコントロール。 |
| end_size | 1 | ページ番号のリストの両端にいくつの数字を表示するか。 |
| type | plain | 戻り値の形式を指定。plain、array、list |
| add_fragment | なし | それぞれのリンクに付け加える文字列 |
| before_page_number | なし | ページ番号の直前に付け加える文字列 |
| after_page_number | なし | ページ番号の直後に付け加える文字列 |
詳しくは関数リファレンスをご確認ください。
get_the_posts_pagination()
こちらも上記のthe_posts_pagination() とほぼ同じの関数です。
ただ、そのままでは出力はしてくれないので echo を使って出力指示を追加する必要があります。
自作する
最後にfunctions.phpにて自作して、実装する方法です。
functions.phpにページネーションを出力する関数を作成します。
/*
* $pages : 全ページ数
* $paged : 現在のページ
* $range : 左右に何ページ表示するか
*/
function pagenation( $pages = '', $range = 2 ) {
// 現在のページ番号を取得
global $paged;
// ページ番号が空であれば1をセット
if ( empty($paged) ) $paged = 1;
if ( $pages == '' ) {
// 全ページ数を取得
global $wp_query;
$pages = $wp_query->max_num_pages;
// 取得できなければ1をセット
if ( !$pages ) {
$pages = 1;
}
}
// 2ページ以上ある場合に表示
if( 1 != $pages ) {
// 現在のページ数と全ページ数を表示
echo "<div class=\"page-count\">"."<span class=\"result\">".$paged."</span>"."/"."<span class=\"total\">".$pages."</span>"."</div>";
echo "<ul class=\"pagenation\">";
// 最初へ
if ( $paged > $range + 1 ) {
echo "<li class=\"first\"><a href='".get_pagenum_link(1)."'>最初へ</a></li>";
}
// 前へ
if ( $paged > 1 ) {
echo "<li class=\"prev\"><a href='".get_pagenum_link($paged - 1)."'>前へ</a></li>";
}
// ページ番号を表示
for ( $i = 1; $i <= $pages; $i++ ) {
if ( $i <= $paged + $range && $i >= $paged - $range ) {
if ( $paged == $i ) {
echo "<li class=\"current\">".$i."</li>";
} else {
echo "<li><a href='".get_pagenum_link($i)."'>".$i."</a></li>";
}
}
}
// 次へ
if ( $paged < $pages ) {
echo "<li class=\"next\"><a href='".get_pagenum_link($paged + 1)."'>次へ</a></li>";
}
// 最後へ
if ( $paged + $range < $pages ) {
echo "<li class=\"last\"><a href='".get_pagenum_link( $pages )."'>最後へ</a></li>";
}
echo "</ul>";
}
}ページネーションを表示したい箇所で先ほどの関数を呼び出します。
<?php
// 「pagenation」という関数が定義されていれば呼び出す
if( function_exists('pagenation') ){
pagenation();
}
?>上記のコードを設置すると、以下の構造でページネーションが出力されます。
<div class="page-count">
<span class="result">1</span>/<span class="total">12</span>
</div>
<ul class="pagenation">
<li class="first"><a href="#">最初へ</a></li>
<li class="prev"><a href="#">前へ</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li class="current">4</li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li class="next"><a href="#">次へ</a></li>
<li class="last"><a href="#">最後へ</a></li>
</ul>プラグインやWordPress関数を利用してページネーションを作成すると、不要なコードまで生成されてしまいますが、自作する場合はHTML構造を自由にカスタマイズできます。
固定ページやサブループで使用する際の注意
今回ご紹介した方法は、メインループでは正常に機能しますが、固定ページやサブループではうまく機能しません。
機能させるためには、WP_Query を使いページ番号情報を取得する必要があります。
<?php
// 現在のページ番号を取得
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array(
'post_type' => 'post',
'posts_per_page' => 12,
'paged' => $paged,
);
$the_query = new WP_Query( $args );
// 全ページ数を取得
$pages = $the_query->max_num_pages;
// 取得したページ数を渡す
$wp_query->max_num_pages = $pages;
if ( $the_query->have_posts() ): while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>">
<p><?php the_title(); ?></p>
</a>
</li>
<?php endwhile; endif; ?>なお、WP_Queryについては下記記事で紹介しているので、是非合わせて見てみてください！
まとめ
以上、アーカイブページでのページネーションについて解説しました。
前後の記事へのページネーションについても下記記事で紹介しているので、こちらも参考にしてみてください！
