WordPress の静的フロントページでページネーションを作る

  • WordPress

WordPress でフロントページを固定ページに設定することができますが、この時メインクエリの posts には固定ページの情報しか入ってこないため、投稿の一覧を表示させる場合は別のクエリを作成する必要があります。

この時にページネーションでハマったので残しておきます。

クエリの作成

まずフロントページで記事を出力するためのクエリを作ります。get_posts()でも記事は取得できますが、ページネーション生成には全記事数などの情報が必要なので、そちらも一緒に取得するためnew WP_Query()を使用します。

例) 「投稿」6記事を取得するクエリ

// 現在のページ
$paged = ( get_query_var( 'page' ) ) ? absint( get_query_var( 'page' ) ) : 1;

// クエリ
$my_query = new WP_Query([
  'post_type' => 'post',
  'posts_per_page' => 6,
  'paged' => $paged,
  'page' => $paged,
]);

// ループ
if ($my_query->have_posts()) {
  while ($my_query->have_posts()) {
    $my_query->the_post();
    ... コードをかく ...
  }
  wp_reset_postdata();
}

これで記事を取得できるようになったはずです。

現在のページ数(page プロパティ)について

現在のページ数は$wp_query->query_vars->pagedに格納されています。こちらの値は大抵get_query_var('paged')を使って取得すると思いますが、フロントページを固定ページに設定している場合のみ、pagedではなくpageの値を使うようです。そのためページ数の取得は

get_query_var('page')

となります。なぜpageを使わなくてはならないのか、なぜpagedも必要なのかは調べていませんが…。そのあたりは公式のリファレンスを参照してみてください。

ページネーションの出力

ページネーションの出力にはpaginate_links()を使用します。通常のアーカイブページなら、そのまま echo すればページネーションが生成されるのですが、固定ページで一覧を作成するときは引数をいくつか加えます。

コード

echo paginate_links([
  'total' => $my_query->max_num_pages, 
  'current' => max( 1, $paged ),
]);

これで次のページへ遷移できれば成功です。