2026年5月20日

WordPressのページネーションをカスタマイズする方法

テーマ・デザイン

はじめに

WordPressのページネーションは the_posts_pagination() または paginate_links() で出力します。表示テキスト・ページ数・CSSを調整することで、デザインに合ったページャーが作れます。

症状・原因

ページネーションが「前へ」「次へ」だけで数字が表示されない
ページネーションのデザインをテーマに合わせたい
表示するページ数（前後の数）を変えたい
「...」の省略表示をカスタマイズしたい

解決手順

ステップ1：`the_posts_pagination()` の基本

// archive.php・category.php・search.php などに追加
the_posts_pagination([
    'mid_size'           => 2,       // 現在ページの前後に表示するページ数
    'prev_text'          => '← 前へ',
    'next_text'          => '次へ →',
    'before_page_number' => '<span class="screen-reader-text">ページ </span>',
    'screen_reader_text' => 'ページナビゲーション',
]);

出力されるHTML（デフォルト）:
<nav class="navigation pagination" ...>
  <div class="nav-links">
    <a class="prev page-numbers" href="...">← 前へ</a>
    <a class="page-numbers" href="...">1</a>
    <span class="page-numbers current">2</span>
    <span class="page-numbers dots">…</span>
    <a class="page-numbers" href="...">5</a>
    <a class="next page-numbers" href="...">次へ →</a>
  </div>
</nav>

ステップ2：`paginate_links()` で完全カスタマイズ

// テンプレート内で使用
$pagination = paginate_links([
    'base'      => str_replace(999999999, '%#%', esc_url(get_pagenum_link(999999999))),
    'format'    => '?paged=%#%',
    'current'   => max(1, get_query_var('paged')),
    'total'     => $wp_query->max_num_pages,
    'mid_size'  => 2,
    'end_size'  => 1,
    'prev_text' => '‹',
    'next_text' => '›',
    'type'      => 'array',  // 配列で返す
]);

if ($pagination) {
    echo '<nav class="pagination" aria-label="ページナビゲーション"><ul class="page-numbers">';
    foreach ($pagination as $page) {
        echo '<li>' . $page . '</li>';
    }
    echo '</ul></nav>';
}

ステップ3：CSSでスタイルを設定する

/* ページネーション */
.pagination {
    margin: 40px 0;
    text-align: center;
}

.pagination .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 8px;
    border: 1px solid var(--border-color, #c3c4c7);
    border-radius: 4px;
    color: var(--text-color, #1d2327);
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.2s, color 0.2s;
}

.pagination .page-numbers:hover {
    background: var(--color-primary, #2271b1);
    border-color: var(--color-primary, #2271b1);
    color: #fff;
}

.pagination .page-numbers.current {
    background: var(--color-primary, #2271b1);
    border-color: var(--color-primary, #2271b1);
    color: #fff;
    font-weight: bold;
    pointer-events: none;
}

.pagination .page-numbers.dots {
    border: none;
    pointer-events: none;
}

.pagination .prev.page-numbers,
.pagination .next.page-numbers {
    font-weight: bold;
    padding: 0 16px;
}

ステップ4：カスタムクエリのページネーション

// カスタムWP_Queryを使っている場合
$paged = get_query_var('paged') ?: 1;
$query = new WP_Query([
    'posts_per_page' => 10,
    'paged'          => $paged,
    'post_type'      => 'post',
]);

// ループ後にページネーションを出力
if ($query->have_posts()) {
    while ($query->have_posts()) {
        $query->the_post();
        // 表示処理
    }
    wp_reset_postdata();

    // カスタムクエリのページネーション
    echo paginate_links([
        'total'   => $query->max_num_pages,
        'current' => $paged,
    ]);
}

ステップ5：無限スクロールの実装（簡易版）

// js/infinite-scroll.js
let loading = false;
let page = 2;

window.addEventListener('scroll', function() {
    if (loading) return;
    const bottom = document.documentElement.scrollHeight - window.innerHeight - 200;
    if (window.scrollY < bottom) return;

    loading = true;
    fetch(`?paged=${page}`)
        .then(r => r.text())
        .then(html => {
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, 'text/html');
            const posts = doc.querySelectorAll('.post-item');
            if (!posts.length) return;
            posts.forEach(p => document.querySelector('.posts-list').appendChild(p));
            page++;
            loading = false;
        });
});

注意事項

カスタム WP_Query を使用している場合、paginate_links() に total パラメータとして $query->max_num_pages を渡してください。デフォルトのグローバルクエリが参照されます
ページネーションが表示されない場合、パーマリンク設定が「基本」になっていないか確認してください
フロントページで is_front_page() が true の場合、paged の代わりに page クエリ変数を使う必要があります

まとめ

the_posts_pagination() に mid_size・prev_text・next_text を渡すだけで数字付きページネーションが実装できます。完全なカスタムHTMLが必要な場合は paginate_links(['type' => 'array']) で配列取得してラップしてください。

Post Views: 14