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()でページネーションを表示する手順は、非常にシンプルですが、サイトのユーザビリティを大きく向上させることができます。