【WordPress】固定ページにページネーションを表示する方法

WordPressでは、通常投稿の一覧にページネーションが表示されますが、固定ページにも同じ機能を追加したい場合、少しカスタマイズが必要です。この記事では、WP_Queryを使用して固定ページを取得し、the_posts_pagination()やpaginate_links()を使ってページネーションを表示する方法を紹介します。

WP_Queryを使用して固定ページを取得する

まず、固定ページにページネーションを追加するために、WP_Queryを使って固定ページの一覧を取得する必要があります。この例では、1ページに5つの固定ページを表示するように設定しています。

<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

$args = array(
  'post_type'      => 'page',
  'posts_per_page' => 5, // 1ページあたりの表示数
  'paged'          => $paged
);

$query = new WP_Query($args);
?>

$pagedには、現在のページ番号が設定され、posts_per_pageで1ページあたりに表示する固定ページ数を指定しています。

ループ処理で固定ページを表示する

次に、取得した固定ページをループで表示します。以下のコードを使用して、固定ページのタイトルをリンクとして表示します。

<?php if ($query->have_posts()) : ?>
  <div class="pages-list">
    <?php while ($query->have_posts()) : $query->the_post(); ?>
      <article class="page-item">
        <h2 class="page-title">
          <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </h2>
      </article>
    <?php endwhile; ?>
  </div>
<?php endif; ?>

ページネーションを表示する

ページネーションを追加するには、the_posts_pagination()またはpaginate_links()を使います。どちらも簡単にページナビゲーションを表示できる便利な関数です。

the_posts_pagination()を使用する場合

the_posts_pagination()は、ページネーションをスタイル付きのリストとして簡単に出力できます。以下のコードでページネーションを表示します。

<?php
the_posts_pagination(
  array(
    'mid_size'  => 2,
    'prev_text' => __('« 前へ'),
    'next_text' => __('次へ »'),
    'screen_reader_text' => __('ページナビゲーション'),
  )
);
?>

paginate_links()を使用する場合

paginate_links()を使用する場合、ページネーションをより細かくカスタマイズできます。以下はその例です。

<?php
$pagination = paginate_links(
  array(
    'total'        => $query->max_num_pages,
    'current'      => max(1, get_query_var('paged')),
    'prev_text'    => __('« 前へ'),
    'next_text'    => __('次へ »'),
    'type'         => 'list',
  )
);
if ($pagination) {
  echo '<nav class="pagination">' . $pagination . '</nav>';
}
?>

クエリのリセット

WP_Queryを使用した後は、wp_reset_postdata()を使ってクエリをリセットしておくことが重要です。これにより、WordPressのメインクエリが他の部分に影響を与えないようにします。

<?php wp_reset_postdata(); ?>

サンプルコード

<?php
// ページネーション用の現在のページ番号を取得
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

// WP_Queryで固定ページを取得
$args = array(
  'post_type'      => 'page',         // 固定ページを指定
  'posts_per_page' => 5,              // 1ページあたりに表示する固定ページ数
  'paged'          => $paged          // 現在のページ番号
);

$query = new WP_Query($args);

// 固定ページのループを開始
if ($query->have_posts()) : ?>
  <div class="pages-list">
    <?php while ($query->have_posts()) : $query->the_post(); ?>
      <article class="page-item">
        <h2 class="page-title">
          <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </h2>
      </article>
    <?php endwhile; ?>
  </div>

  <?php
  // ページネーションの表示 (the_posts_paginationを使用)
  the_posts_pagination(
    array(
      'mid_size'  => 2,
      'prev_text' => __('« 前へ'),
      'next_text' => __('次へ »'),
      'screen_reader_text' => __('ページナビゲーション'),
    )
  );
  
  // または、paginate_links()を使用する場合
  /*
  $pagination = paginate_links(
    array(
      'total'        => $query->max_num_pages,
      'current'      => max(1, get_query_var('paged')),
      'prev_text'    => __('« 前へ'),
      'next_text'    => __('次へ »'),
      'type'         => 'list',
    )
  );
  if ($pagination) {
    echo '<nav class="pagination">' . $pagination . '</nav>';
  }
  */
  
  // クエリのリセット
  wp_reset_postdata();
  
else :
  // 固定ページがない場合のメッセージ
  echo '<p>表示する固定ページがありません。</p>';
endif;
?>

まとめ

WordPressの固定ページにページネーションを追加することで、ユーザーが固定ページを簡単にナビゲートできるようになります。WP_Queryを使用してカスタムクエリを作成し、the_posts_pagination()またはpaginate_links()でページネーションを表示する手順は、非常にシンプルですが、サイトのユーザビリティを大きく向上させることができます。