固定ページをページネーション付きの一覧ページに

固定ページをページネーション付きの一覧ページに
Image by Markus Winkler from Pixabay

2020.10.23（更新日：2020.11.21）

一覧ページを表示するテンプレートは、通常それ用のテンプレート（category.phpやarchive.phpなど）を使うのだが、これを「固定ページ」を使いページネーション込で何とかする。なお配下に置く記事はカスタム投稿で行う。

この記事は１年以上経過しています。内容的に古い場合があります。

今回の前提

まずは固定ページのスラッグを決めておく。今回は「catalog」とする。
分岐で分けてもいいのだが、間違いないようにここは別途テンプレート「page-catalog.php」を作成する。
（コメントで Template Name:〜 で設定しても可。ちゃんと指定する事が前提）

カスタム投稿は「Custom Post Type UI」あたりでサクッと作成。
今回ポストタイプ名をわかりやすいように「catalogs」とする。

固定ページテンプレートへのコード

以下が編集するベースのコード例。htmlタグやcssは内容に合わせて変更して下さい。

<!-- ///////////////////// start list -->
<?php
$paged = (int)get_query_var('paged');
$args = array(
  'post_type' => 'catalogs',
  'orderby' => 'date',
  'order' => 'DESC',
  'post_status' => 'publish',
  'posts_per_page' => 10,
  'paged' => $paged,
);
?>
<?php $loop = new WP_Query( $args ); ?>
<?php if( $loop->have_posts() ) : ?>
<ul>
<?php while( $loop->have_posts() ) : $loop->the_post(); ?>
  <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
<!-- ///////////////////// end list -->

<!-- ///////////////////// start pagination -->
<div class="pagination">
<?php
if ($loop->max_num_pages > 1) {
  echo paginate_links(array(
    'base' => get_pagenum_link(1) . '%_%',
    'format' => 'page/%#%/',
    'current' => max(1, $paged),
    'total' => $loop->max_num_pages,
    'type' => 'list',
    'prev_text' => '',
    'next_text' => ''
  ));
}
?>
</div>
<!-- ///////////////////// end pagination -->
<?php wp_reset_postdata(); ?>

ポイントは以下

  • get_query_var('paged')を明示しておき、WP_Queryの引数にpagedを含める
  • wp_reset_postdata()の位置

一覧部分をメインクエリからサブクエリに置き換える。ただしページネーションが必要なので解除（wp_reset_postdata）はページネーション内に入れる。これで一覧表示内はページングが可能となる。

「Custom Post Type UI」でのカスタム投稿の調整

該当カスタム投稿（例の場合catalogs）の設定にある「カスタムリライトスラッグ」を固定ページのスラッグ（例の場合catalog）にする。

ページネーション部分

ちなみにページネーション部分の吐き出し例は以下。CSSを充てがう際の参考に。

<div class="pagination">
  <ul class='page-numbers'>
    <li><a class="prev page-numbers" href="https://creatorsclip.com/page/"></a></li>
    <li><a class="page-numbers" href="https://creatorsclip.com/page/">1</a></li>
    <li><span aria-current="page" class="page-numbers current">2</span></li>
    <li><a class="page-numbers" href="https://creatorsclip.com/page/3/">3</a></li>
    <li><a class="next page-numbers" href="https://creatorsclip.com/page/4/"></a></li>
  </ul>
</div>