お問い合わせ
お問い合わせ
ホーム > WordPress > テーマ開発 > WordPressでページングを設置する方法

WordPressでページングを設置する方法

WordPress
WordPressでページングを設置する方法を紹介するアイキャッチ画像。WordPressロゴとページ番号のナビゲーションが表示されている。
WordPressでページングを設置する方法を解説する記事のアイキャッチ画像

WordPressで記事一覧を表示する際に便利なのが「ページング（ページ送り）」です。この記事では、WP_Queryとpaginate_links()を使って、ブログ一覧にページングを設置する方法を解説します。

WP_Queryの基本構文と引数

ページングを含むカスタムクエリでは WP_Query を使用します。基本構文は以下の通りです。

$paged = max(1, get_query_var('paged') ? get_query_var('paged') : get_query_var('page'));

$args = array(
  'post_type'      => 'post',        // 投稿タイプ（投稿: post, 固定ページ: page など）
  'posts_per_page' => 10,            // 1ページに表示する記事数
  'paged'          => $paged         // 現在のページ番号
);

$the_query = new WP_Query($args);

よく使う引数一覧

引数名説明
post_type投稿タイプ（post, page, custom_post_type など）
posts_per_page1ページに表示する件数
paged現在のページ番号（必須）
category_nameカテゴリースラッグで絞り込み
orderby / order並び順の設定（例：date, title）

WordPressでページングを設置する方法

以下は、記事一覧を表示し、ページングを設置するサンプルコードです。

<div class="article-list">
  <div class="article-list__inner">
    <h3 class="article-list__title">ブログ記事一覧</h3>
    <?php
    $paged = max(1, get_query_var('paged') ? get_query_var('paged') : get_query_var('page'));
    $args = array(
      'post_type' => 'post',
      'posts_per_page' => 10,
      'paged' => $paged
    );
    $the_query = new WP_Query($args);
    if ($the_query->have_posts()) :
      while ($the_query->have_posts()) : $the_query->the_post();
    ?>
        <a href="<?php the_permalink(); ?>" class="article-list__blog-media blog-media">
          <!-- 記事カードのマークアップ -->
        </a>
    <?php
      endwhile;
      echo '<nav class="pagination">';
      echo paginate_links(array(
        'total' => $the_query->max_num_pages
      ));
      echo '</nav>';
      wp_reset_postdata();
    endif;
    ?>
  </div>
</div>

ページングが機能しない？404エラーになる場合の対処法

よくある原因

  • 固定ページでカスタムクエリを使っている
  • パーマリンク設定が影響している

対処法①：paged の取得方法を調整する

$paged = max(1, get_query_var('paged') ? get_query_var('paged') : get_query_var('page'));

対処法②：パーマリンク設定を再保存する

WordPress管理画面 → 設定 → パーマリンク → 「変更を保存」をクリック。

これにより内部ルールが再構築され、404が解消されることがあります。

ページングにスタイルを適用する（SCSS例）

ページングリンクにスタイルを適用することで、ユーザーにとってわかりやすいナビゲーションになります。

.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.pagination__item a,
.pagination__item span {
  display: inline-block;
  padding: 0.5em 1em;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  background-color: #fff;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.pagination__item a:hover,
.pagination__item span:hover {
  background-color: #f5f5f5;
  border-color: #999;
}

.pagination__item .current {
  background-color: #333;
  color: #fff;
  border-color: #333;
  pointer-events: none;
}

HTML側では paginate_links() の出力をラップして .pagination__item クラスを付与してください。

まとめ

  • WP_Query を使って投稿一覧を取得
  • paginate_links() でページングを設置
  • paged の取得方法に注意（特に固定ページやhome.phpの場合）
  • SCSSでページングの見た目も整える

これで、WordPressのページングを快適に実装できます！

参考サイト

このページング機能を活用すれば、カテゴリページや検索結果ページにも応用が可能です。

関連記事