WordPressの記事一覧ページに、the_posts_pagination関数でページネーションを設定する

概要

WordPressには、ページネーションを設定するための関数「the_posts_pagination」が用意されています。サクッと実装したいので利用したのですが、正しく表示されない事態に陥ったので、いくつか注意点を書こうと思います。

関数リファレンス/the posts pagination – WordPress Codex 日本語版

この記事が役に立つかもしれない人

WordPress の記事一覧ページで、１ページ目（デフォルトで10記事）は表示できている
２ページ目以降を表示するために、ページネーションを設定したい
WordPress で用意されている関数を使って簡易に実装したい
記事一覧をトップページにしている（or したい or しても良い）
スタイルの調整は他のサイトを参考にする（ひとまず機能を実装したい）

環境

WordPress 5.2.3
Google Chrome 77.0.3865.90（表示を確認したブラウザ）

正しく表示されたコードと設定

注意点を述べる前に、正しく表示されたコードや設定のイメージを載せます。

1. コード（index.php）

<?php
$paged = get_query_var('paged', 1);
$args = array(
'post_type' => 'post',
'paged' => $paged
);
$the_query = new WP_Query($args);
?>
<?php get_header(); ?>
<?php get_template_part('content','menu'); ?>
<divid="main">
<sectionid="blog-list">
<divclass="content">
<?php if($the_query->have_posts()): ?>
<!-- 記事ごとにループ -->
<?php while($the_query->have_posts()):
$the_query->the_post(); ?>
<article>
<!-- 記事の内容を取得する処理（省略） -->
</article>
<?php endwhile; ?>
<!-- ページネーション -->
<?php the_posts_pagination(); ?>
<?php endif; ?>
</div>
<!-- サイドバー -->
<?php get_sidebar(); ?>
</section>
</div>
<?php wp_reset_postdata(); ?>
<?php get_footer(); ?>

2. 管理画面での設定

f:id:ishii-akihiro:20191002122202p:plain

3. 記事一覧ページに表示されたページネーション（ブラウザでの表示）

f:id:ishii-akihiro:20191002122500p:plain

知っておくべきこと

1. ページネーションが表示される条件

管理画面の「設定＞表示設定」にある「1ページに表示する最大投稿数」以下の記事しか保存されていない場合は、<?php the_posts_pagination(); ?>を記述してもページネーションが表示されないようです。
記事が少ない場合は最大投稿数を減らして確認するのが良さそうです。

2. the_posts_pagination 関数が参照する変数

最大ページ数と現在のページが正しく取得されている必要があります。上述したコードの冒頭部分（以下に再掲）で、これらの情報を取得しています。

$paged = get_query_var('paged', 1);
$args = array(
'post_type' => 'post',
'paged' => $paged
);
$the_query = new WP_Query($args);

上記コードの直後に下記のコードを書き加えれば、ブラウザで確認できます。

//ページの情報が取得できているか確認
echo ' 現在のページ：'.$paged;
echo ' 最大ページ数：'.$the_query->max_num_pages;

なお、私の環境では1ページ目の $paged が 0 でした。動作上は問題ないので、本記事ではスルーします。
関数の詳細はリファレンスを参照してください。

関数リファレンス/WP Query – WordPress Codex 日本語版

関数リファレンス/get query var – WordPress Codex 日本語版

3. 投稿ページと固定ページでは動作が異なると思われる

the_posts_pagination関数のリファレンスを見ると、説明欄には次のように書かれています。

投稿ページネーション関数は投稿の前と次のページへリンクするページ番号のセットを出力します。投稿リスト（index.php など）やアーカイブ（archive.php など）で使われます。

関数リファレンス/the posts pagination – WordPress Codex 日本語版

index.php や archive.php 以外のファイルに記載している場合は、期待した通りに動作しない可能性があります。
また、管理画面の表示設定で「最新の投稿」ではなく「固定ページ」を指定している場合も同様です。Webで調べると、固定ページにページネーションを付ける場合のやり方なども見つかります（私は試してないですが）。

the_query_var関数のリファレンスにも、静的フロントページ（いわゆる固定ページだと思います）は ‘paged’ ではなく ‘page’ を使うようにと書かれています。