MENU
  1. ホーム
  2. WordPress
  3. WordPressのページネーション完全ガイド！自作からプラグイン活用まで徹底解説！

WordPressのページネーション完全ガイド！自作からプラグイン活用まで徹底解説！

広告
WordPress ページネーション

「記事一覧が長すぎて読みづらい……」
「自分でコードを書いてみたけど、エラーが出て全然動かない……」
「プラグインを入れたけど、デザインがサイトに合わない……」

  • 記事がずらーっと並んでスクロールが大変
  • カスタマイズしたいのにテンプレート編集がハードル高い
  • SEOやUXの観点から正しい実装方法を知りたい

こんな悩みを抱えている方は多いはず。

本記事では、

  1. 自作コードで手軽にページネーションを組み込む手順
  2. 代表的なプラグインの導入＆デザイン調整方法
  3. 自作 vs プラグイン、選び方のポイント

といった内容を、初心者にもわかりやすくステップごとにご紹介します。

これを読めば、あなたのサイトにぴったりのページ送りがサクッと実装でき、読者の回遊率アップやSEO強化にもつながります！✨

目次

ページ送り（ページネーション）とは何か

概要解説

ページ送り（ページネーション）とは、大量のコンテンツを複数のページに分割し、ユーザーが番号や「次へ」「前へ」ボタンを使って移動できる仕組みです。

Webサイトには以下のような場面で用いられます。

  • ブログ記事一覧や商品の一覧ページ
  • コメント一覧や検索結果

この仕組みにより、1ページあたりの情報量を制御し、ページ読み込みの高速化と見やすさを両立できます。

サイト運営における役割

ページ送りはただのナビゲーション機能ではなく、サイト運営において重要な役割を担います。

  • 🎯 ユーザー体験（UX）の向上
    • ページが重くならず、快適にスクロールできる
    • 必要な情報に素早くアクセスできる
  • 🚀 表示速度の最適化
    • サーバーへの負荷を分散し、ページ読み込み時間を短縮
    • 画像やスクリプトを段階的に読み込むことで初期表示が速くなる
  • 🔍 SEO対策の一環
    • クローラーがコンテンツを効率的に巡回しやすくなる
    • 適切にrel=”next”/”prev”を設定することで評価を分散させずに階層構造を伝達
  • 📈 サイト内回遊率の向上
    • 分割された各ページへの訪問数が増え、総PVが伸びやすい
    • ユーザーが関連記事や次のコンテンツにスムーズに誘導される
スクロールできます
項目ページネーション無限スクロール
読み込み性能高い（分割読み込み）低下しやすい（連続読み込み）
ユーザー制御明確な「次へ」「前へ」操作スクロールのみ
SEO親和性良好（URL分割で構造化しやすい）やや不向き（URL構造が複雑化）
回遊率ページごとに誘導しやすいコンテンツ接触は連続的

このように、ページ送りは「見やすさ」「速度」「SEO」「回遊率」のバランスを取る上で非常に有効な手法です。

ページ送りを導入するメリット・デメリット

主な利点

ユーザーが目的の情報にたどり着きやすくなる

サイト内のコンテンツを小分けにすることで、読みたい内容へ最短ルートで辿り着けます。

  • 検索やフィルタとの組み合わせで目的の記事にすぐ到達
  • 「1 → 2 → 3…」と段階的にナビゲートできる

ページ読み込みが軽快になる

一度に表示するデータ量を制限することで、初期表示速度が大幅にアップします。

  • 画像やスクリプトが分散読み込みされる
  • モバイル回線や低スペック端末でも快適

サイト内の回遊率アップ

分割されたそれぞれのページへの誘導がしやすく、総ページビュー（PV）の増加につながります。

  • 「次へ」ボタンで関連記事へ誘導
  • ページ下部におすすめ記事を並べる工夫も◎

注意すべき課題

コンテンツ評価の分散リスク

SEO観点では、コンテンツ価値が複数URLに分散されることで、個々のページ評価が下がる可能性があります。

  • rel=”next”/”prev” を適切に設定して評価を関係付ける
  • メインコンテンツは最初のページに集約する工夫が有効

遅延があると離脱率が増加

ユーザーが次ページを開くまでの待ち時間が長いと、離脱につながりやすいです。

  • ページネーションのクリック時はローディングインジケーターを表示
  • Ajax読み込みでスムーズにデータを取得

利点・課題の比較

スクロールできます
分類メリットデメリット
UX✔️ 情報への到達が直感的❌ 読み込み遅延時にストレス
パフォーマンス✔️ 初期表示が高速❌ 次ページ取得に時間がかかる場合あり
SEO✔️ クローラーが構造を把握しやすい❌ ページ評価が細分化するリスク
回遊率✔️ 関連ページへの誘導が自然にできる—

表を参考に、自サイトの特性やユーザー層に合わせて最適な設計を検討しましょう。

手動でページ送りを組み込む方法

WordPress標準関数を使った基本実装

WordPressにはページネーションを手軽に追加できる関数が用意されています。

以下の手順で組み込みましょう。

  1. ループの直後に関数を呼び出す
    通常はテーマの archive.php や index.php、home.php 内のメインループ終了後に配置します。
   <?php if ( have_posts() ) : ?>
     <?php while ( have_posts() ) : the_post(); ?>
       <!-- 記事の出力 -->
     <?php endwhile; ?>

     <!-- ここにページネーションを追加 -->
     <?php
       the_posts_pagination( array(
         'mid_size'  => 1,
         'end_size'  => 1,
         'prev_text' => '« 前へ',
         'next_text' => '次へ »',
       ) );
     ?>
   <?php endif; ?>
  1. パラメータ調整のポイント
    the_posts_pagination() では、下記のようなオプションを変更できます。
スクロールできます
オプション名説明例
mid_size現在ページの前後に表示するページ番号の数1 → … 2 [3] 4 …
end_size先頭と末尾に表示するページ番号の数1 → [1] … 5 6 … [10]
prev_text「前へ」リンクのテキスト'« Back'
next_text「次へ」リンクのテキスト'Next »'
screen_reader_text画面読み上げ用のラベル（空文字で非表示化）''

⚙️ ヒント：screen_reader_text => '' を指定すると、視覚のみの表示にできます。

テンプレートの編集における注意点

親テーマ vs 子テーマ

  • 親テーマを直接編集しない
    • テーマ更新で上書きされるリスクがあります。
  • 子テーマを作成してカスタマイズ
    • functions.php や archive.php を子テーマにコピーし、編集を行いましょう。

作業前のバックアップ推奨

  • 💾 ファイルのバックアップ
    • FTPやホスティングのファイルマネージャーで編集前にダウンロードしておく。
  • 🔄 テスト環境での検証
    • 本番サイトへ反映する前にローカル環境やステージングサイトで動作確認を。

CSSで見た目を整える手順

汎用スタイル例

/* 全体の余白とフォント */
.page-numbers {
  margin: 0 4px;
  padding: 6px 10px;
  font-size: 14px;
  text-decoration: none;
}

/* リンク部分 */
.page-numbers a {
  color: #333;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* マウスオーバー時 */
.page-numbers a:hover {
  background-color: #f5f5f5;
}

/* 現在のページ */
.page-numbers .current {
  background-color: #0073aa;
  color: #fff;
  border-color: #0073aa;
}

カスタムデザインのヒント

  • 🎨 カラー調整：ブランドカラーを活かす
  • 📐 角丸・影：border-radius や box-shadow を使い立体感を演出
  • 📱 レスポンシブ対応：モバイルでは番号数を減らす（例：mid_size: 0）
  • 🖋️ アイコン挿入：Font Awesomeなどで左右の矢印をより視覚的に

以上の手順で、初心者の方でも手動によるページ送り機能を安全かつ効果的に実装できます。

ぜひ参考にして、サイトの使い勝手を向上させてください！

プラグインで手軽に導入する方法

人気プラグインの特徴と設定

WP‑PageNavi：導入手順と基本設定

  1. 管理画面の「プラグイン > 新規追加」で WP‑PageNavi を検索し、インストール＆有効化
  2. 有効化後、設定 > PageNavi で以下を調整
    • 「先頭／末尾に表示する番号数」（end_size）
    • 「現在ページの前後に表示する番号数」（mid_size）
    • 「前へ／次へ」ボタンの文言
  3. テンプレート（archive.php など）に以下を追加
   if ( function_exists( 'wp_pagenavi' ) ) {
     wp_pagenavi();
   }
  1. 🎨 デザインカスタマイズ
    • CSSセレクタ：.wp-pagenavi a, .wp-pagenavi .current
    • ボタンの余白・色・ホバー効果などを自由に調整

WP‑Paginate：デザインオプションの活用

  1. 「WP‑Paginate」をインストール＆有効化
  2. 設定 > WP‑Paginate で設定画面を開く
    • 「前へ／次へ」リンクの有無
    • 「最初／最後へ」リンクの表示
    • ページ番号の最大表示数
  3. ショートコード や テンプレートタグ で呼び出し
   if ( function_exists( 'wp_paginate' ) ) {
     wp_paginate();
   }
  1. 📐 デザイン強化
    • 独自の CSS クラスを追加してテーマに馴染ませる
    • アイコンフォント（Font Awesome など）で矢印を差し替える
スクロールできます
プラグイン名特徴カスタマイズ性
WP‑PageNavi情報量多め、細かいページ数設定が可能★★★★☆
WP‑Paginateシンプルで軽量、ショートコード対応★★★☆☆

その他おすすめツール

Pagination by BestWebSoft

  • 使いやすさ重視：インストール後すぐに番号付きナビゲーションを生成
  • 設定画面：番号リンクの数やテキストを直感的に変更可能
  • レスポンシブ対応でスマホでも見やすい

Ajax Load More

  • 無限スクロール形式でページネーション不要
  • ショートコードや PHP コードで任意のクエリを非同期読み込み
  • ✨ UX強化：スクロールに合わせて自動読み込みし、シームレスな体験を提供

これらのプラグインを利用すれば、コードを書くことなく数分でページ送り機能を導入できます。🎉

サイトのデザインやユーザー体験に合わせて、お好みのものを選んでみてください！

自作 vs プラグイン：選択のポイント

自作のメリット・デメリット

メリット

  • 柔軟なカスタマイズが可能
    • コードレベルで細かな動作やデザインを調整できる
  • 軽量化しやすい
    • 余計な機能を削ぎ落とし、必要最小限の実装にできる
  • 学習コストの削減
    • WordPressの仕組みやPHPの理解が深まる

デメリット

  • 🕒 開発時間がかかる
    • テンプレート編集やCSS調整に工数が必要
  • 🛠️ メンテナンス負荷
    • WordPress本体やテーマ更新時の対応が発生
  • 🐞 バグ発生リスク
    • 自前実装による不具合対応はすべて自己責任

プラグイン活用の長所・短所

長所

  • 🚀 素早く導入できる
    • インストール後すぐ機能を利用可能
  • ⚙️ 豊富な設定オプション
    • 管理画面からデザインや表示数を手軽に変更できる
  • 🔄 定期アップデート
    • 開発者からの機能追加やバグ修正が提供されやすい

短所

  • 📦 不要な機能が盛り込まれることがある
    • プラグインによっては使わないオプションも読み込まれる
  • 🎨 カスタマイズの制限
    • テンプレートタグやフックの種類によっては思いどおりに調整しづらい
  • 🔐 セキュリティ懸念
    • 更新が止まったプラグインは脆弱性リスクにつながる

どちらを選ぶべきかの判断基準

スクロールできます
項目自作が向いている場合プラグインが向いている場合
開発リソース十分に時間と技術力があるなるべく短期間で実装したい
カスタマイズ度デザイン・挙動を自由に制御したい標準的な機能で満足できる
保守性・安定性更新対応やデバッグを自分で行える開発者からのサポート・アップデートを重視
パフォーマンス不要な処理を徹底して省きたい一般的なサイト規模で十分
  • ポイント1：目的とリソースのバランスを確認
    自作は“自由度×学習効果”が高い一方、自分で管理する手間も増えます。
  • ポイント2：サイト規模と更新頻度を考慮
    小規模なブログならプラグインで手早く。大規模サイトや複雑要件なら自作も検討。
  • ポイント3：長期運用を見据えた選択
    将来的に機能追加やテーマ変更の予定がある場合は、柔軟性の高い自作が有利になることもあります。

以上を踏まえ、自サイトの運営方針や技術レベルに合わせて最適な方法を選んでください。

SEO・UXを考慮した最適化のコツ

クローラビリティを損なわない設定

ページ送りを導入する際は、検索エンジンのクローラーが正しく各ページを巡回できるように配慮しましょう。

  • rel=”next”/”prev” の設定
    各ページの <link> タグに rel="next" と rel="prev" を組み込むことで、クローラーがページ順序を把握しやすくなります。
  <link rel="prev" href="https://example.com/page/1" />
  <link rel="next" href="https://example.com/page/3" />
  • XMLサイトマップの更新
    ページ番号付きURLを漏れなく登録し、サイトマップを検索エンジンに送信します。
  • 無限スクロールとの差別化
    無限スクロールではURLが変化しない場合があるため、静的ページネーションの方がクローラビリティに有利です。

⚙️ ポイント：JavaScriptに依存しすぎる実装は、クローラーが正しく評価できない可能性があるため注意。

現在ページの視認性を高める工夫

ユーザーが「今どこにいるのか」を一目で理解できるようにデザインしましょう。

  • ARIA属性の活用
    リンク要素に aria-current="page" を追加すると、スクリーンリーダー利用者にも現在ページが明示されます。
  <a href="/page/2" aria-current="page">2</a>
  • ビジュアル強調
    • 背景色やテキスト色 を変えて目立たせる
    • 太字 や 下線 を使ってアクティブページを区別
  • ホバー／フォーカス時のアニメーション
    マウスオーバーやキーボードフォーカスで微細なアニメーションを加えることで、インタラクション性が向上します。

✨ ヒント：アクセシビリティを保つため、コントラスト比はWCAG基準（最低4.5:1）を満たしましょう。

分割タイミングと量のベストプラクティス

どのタイミングでページを分割し、1ページあたりに何件載せるかはUXに大きく影響します。

スクロールできます
目的推奨件数／ページポイント
記事一覧5〜10件読み込み速度と回遊性のバランスを重視
商品カタログ12〜20件商品画像が多いため、やや多めに設定
コメントやレビュー20〜30件ユーザー参加型コンテンツは大容量OK
  • コンテンツ量の目安
    ページ読み込み時間が2秒以内に収まるよう、画像サイズとスクリプトの重量を確認します。
  • ユーザー行動の分析
    アクセス解析ツールで離脱率や滞在時間をチェックし、最適な分割ポイントを見つけましょう。
  • 段階的な調整
    初期設定後も、定期的にデータを見て「○件→□件」へ微調整を行うことで、より良いUXを提供できます。

📊 ワンポイント：頻繁に更新されるページでは、短めの分割がユーザーに好まれる傾向があります。

以上の最適化ポイントを取り入れることで、SEOとユーザー体験を両立したページ送り機能を実現できます。

ぜひ運用データを見ながら、継続的に改善してみてください！

まとめ

  • 自作実装はコードの柔軟性が高く、余分な機能を省いた軽量なページネーションを作れる。
  • プラグイン導入なら短時間で豊富な設定を利用でき、初心者や忙しい方に最適。
  • 判断基準は「カスタマイズ性」「開発リソース」「保守性」の3点。
  • SEO／UX面では、rel=”next/prev” の正しい設定や現在ページ強調で、ユーザーも検索エンジンも満足する仕組みを構築しよう。

どちらの方法を選んでも、「読みやすさ」「速度」「見た目」のバランスを意識することが成功のカギです。

まずは本記事の手順を参考に、あなたのWordPressサイトに最適なページネーションを導入してみてください。🎉

WordPress

関連記事

目次