基本的なページネーション

paginate_links()

テンプレートファイルの書き方

<?php
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array(
    'post_type' => 'post',
    'posts_per_page' => 5,
    'paged' => $paged
);

$the_query = new WP_Query($args);

if ($the_query->have_posts()) :
    while ($the_query->have_posts()) : $the_query->the_post();
        // 投稿の表示コード
        the_title('<h2>', '</h2>');
        the_excerpt();
    endwhile;

    // ページネーションの表示
    echo paginate_links(array(
        'total' => $the_query->max_num_pages,
        'current' => $paged,
        'mid_size' => 2,
        'prev_text' => '« 前へ',
        'next_text' => '次へ »',
    ));

    wp_reset_postdata();
else :
    echo '<p>投稿が見つかりませんでした。</p>';
endif;
?>

functions.php に独自関数を追加する方法

カスタムページネーション

function my_custom_pagination($custom_query = null) {
    global $wp_query;
    $query = $custom_query ? $custom_query : $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'   => $query->max_num_pages,
        'prev_text' => '« 前へ',
        'next_text' => '次へ »',
    ));
}

テンプレートファイルの書き方

<?php my_custom_pagination($the_query); ?>

おまけのCSS・・

基本形

HTML

<div class="pagination">
  <a class="prev page-numbers" href="...">« 前へ</a>
  <a class="page-numbers" href="...">1</a>
  <span class="page-numbers current">2</span>
  <a class="page-numbers" href="...">3</a>
  <a class="next page-numbers" href="...">次へ »</a>
</div>

CSS

/* ページネーション全体 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 30px 0;
  flex-wrap: wrap;
}

/* 各リンクの共通スタイル */
.pagination a,
.pagination span {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid #ddd;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
}

/* 現在のページ */
.pagination .current {
  background-color: #0073aa;
  color: #fff;
  border-color: #0073aa;
  font-weight: bold;
}

/* ホバー時のスタイル */
.pagination a:hover {
  background-color: #f0f0f0;
  border-color: #aaa;
}

/* 前へ・次へボタンの特別スタイル（必要であれば） */
.pagination .prev,
.pagination .next {
  font-weight: bold;
}

丸ボタン

HTML

<div class="pagination">
  <a class="prev page-numbers" href="...">« 前へ</a>
  <a class="page-numbers" href="...">1</a>
  <span class="page-numbers current">2</span>
  <a class="page-numbers" href="...">3</a>
  <a class="next page-numbers" href="...">次へ »</a>
</div>

CSS

.pagination a,
.pagination span {
  display: inline-block;
  padding: 10px 14px;
  margin: 2px;
  border-radius: 50%;
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  color: #333;
  text-decoration: none;
  transition: all 0.2s ease;
}
.pagination a:hover {
  background-color: #0073aa;
  color: #fff;
  border-color: #0073aa;
}
.pagination .current {
  background-color: #0073aa;
  color: #fff;
  font-weight: bold;
  border-color: #0073aa;
}