WordPress自作テーマにページネーションを追加する方法｜paginate_linksの使い方解説

14

Views

WordPress自作テーマでページネーションを作る方法

記事一覧ページで「1 / 2 / 3 … 次へ」といったページ送り（ページネーション）を表示したいとき、自作テーマでは自分で組み込む必要があります。今回は、初心者向けにWordPressテーマでページネーションを表示する方法をわかりやすく解説します。

まずは functions.php にテンプレート関数を用意

ページネーションの出力処理を関数化しておくと、管理しやすくなります。

function my_custom_pagination() {
  global $wp_query;

  $big = 999999999;

  echo paginate_links(array(
    'base'    => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
    'format'  => '?paged=%#%',
    'current' => max(1, get_query_var('paged')),
    'total'   => $wp_query->max_num_pages,
    'mid_size' => 2,
    'prev_text' => '« 前へ',
    'next_text' => '次へ »',
  ));
}

表示させたい位置に関数を呼び出す

記事一覧を表示しているテンプレート（例：index.phpやarchive.php）の下部に次のコードを追加します。

<?php if (function_exists('my_custom_pagination')) {
  my_custom_pagination();
} ?>

CSSで見た目を整える（例）

出力されたページ番号には.page-numbersなどのクラスがついています。以下のように装飾できます。

.page-numbers {
  display: inline-block;
  padding: 6px 12px;
  margin: 4px;
  background: #eee;
  color: #333;
  text-decoration: none;
}
.page-numbers.current {
  background: #333;
  color: #fff;
}
.page-numbers:hover {
  background: #555;
  color: #fff;
}

注意点：クエリをカスタマイズしている場合

WP_Queryを使ってカスタムループをしている場合は、'total'に手動で$query->max_num_pagesを指定する必要があります。

<?php
$my_query = new WP_Query(array(
  'post_type' => 'post',
  'paged' => get_query_var('paged') ? get_query_var('paged') : 1
));
if ($my_query->have_posts()) :
  while ($my_query->have_posts()) : $my_query->the_post();
    the_title();
  endwhile;

  echo paginate_links(array(
    'total' => $my_query->max_num_pages
  ));
endif;
wp_reset_postdata();
?>

初心者がつまずきやすいポイント

  • query_posts を使っていると paginate_links が正しく動かない
  • カスタムクエリ使用時は max_num_pages を明示的に指定
  • CSSでリンクをボタン風に整えるとクリックしやすくなる

おわりに

ページネーションがあると記事一覧のナビゲーションがしやすくなり、SEOやユーザー体験の面でも効果的です。 自作テーマでも、数行のコードで実装できるので、ぜひ取り入れてみてください。

関連記事