WordPressでブログやメディアサイトを運営していると、記事が増えるにつれてページネーション（ページ送り）の設置が必要になってきます。多くの方はプラグインを導入して実装しますが、プラグインに頼りすぎるとサイトの表示速度が低下したり、カスタマイズの自由度が制限されたりすることがあります。そこで本記事では、WordPressでページネーションをプラグインなしで自作する方法を詳しく解説します。基本的なコードの書き方から、デザインのカスタマイズ、さらには実装時の注意点まで、初心者の方でも理解できるように段階を追って説明していきます。
- WordPressでページネーションを自作する基本的な方法
the_posts_pagination関数やpaginate_links関数を使うことで、プラグインなしでも簡単にページネーションを実装できます
- ページネーションのデザインカスタマイズ手法
CSSを使ったスタイリングにより、サイトのデザインに合わせた見た目に調整できます
- 実装時のトラブル対処法と最適化のポイント
ページネーションが表示されない場合の原因特定や、SEOを意識した設定方法を理解できます
WordPressのページネーションとは
ページネーションとは、大量のコンテンツを複数のページに分割して表示する仕組みのことです。WordPressサイトにおいて、投稿一覧ページやアーカイブページで記事数が多くなった際に、ユーザーが快適に閲覧できるようにするために欠かせない機能となっています。
ページネーションを適切に設置することで、ユーザーは目的の記事を見つけやすくなり、サイトの回遊率向上にもつながります。また、検索エンジンのクローラーがサイト内のページを効率的に巡回できるようになるため、SEO対策としても重要な要素です。
ページネーションの基本的な役割
ページネーションの最も重要な役割は、ユーザー体験の向上とサーバー負荷の軽減にあります。一度に大量の記事を読み込むと、ページの表示速度が遅くなり、ユーザーの離脱につながる可能性があります。
ページネーションを導入することで、1ページあたりの読み込み量を適切にコントロールできます。これにより、スムーズなページ遷移が実現し、ユーザーはストレスなくサイトを閲覧できるようになります。
プラグインを使わないメリット
ページネーションをプラグインなしで実装することには、いくつかの明確なメリットがあります。以下の表で、プラグイン利用時との違いを比較してみましょう。
| 項目 | プラグイン利用 | 自作実装 |
|---|---|---|
| 表示速度 | やや遅くなる傾向 | 軽量で高速 |
| カスタマイズ性 | 設定項目に依存 | 完全に自由 |
| 保守性 | 更新依存 | 自己管理可能 |
| 学習効果 | 低い | 高い |
自作でページネーションを実装することで、WordPressの仕組みへの理解が深まり、他のカスタマイズにも応用できるスキルが身につきます。
ページネーションの種類
WordPressで実装できるページネーションには、いくつかの種類があります。目的やサイトの特性に応じて、適切な方式を選択することが重要です。
最も一般的なのは数字付きのページネーションで、現在のページ位置と総ページ数が一目でわかります。シンプルな「前へ」「次へ」のリンクのみのタイプや、無限スクロール形式もありますが、SEOの観点からは数字付きページネーションが効果的とされています。
ページネーションを自作すると、サイトの軽量化とカスタマイズ自由度の両立が実現できますよ。
WordPressでページネーションを自作する手順
WordPressでページネーションを自作するには、主に2つの関数を使用する方法があります。ここでは、それぞれの実装方法を具体的なコードとともに解説していきます。
実装を始める前に、まずは子テーマを作成しておくことを強く推奨します。親テーマを直接編集すると、テーマの更新時にカスタマイズ内容が失われてしまう可能性があるためです。
the_posts_pagination関数の使い方
WordPress 4.1以降で使用できるthe_posts_pagination関数は、最も簡単にページネーションを実装できる方法です。この関数は、メインクエリのページネーションを自動的に出力してくれます。
基本的な使い方は非常にシンプルで、テンプレートファイルのループの後に1行コードを追加するだけで実装できます。以下がその基本形です。
the_posts_pagination関数の基本パラメータ
- mid_size：現在のページの前後に表示するページ番号の数
- prev_text：前のページへのリンクテキスト
- next_text：次のページへのリンクテキスト
- screen_reader_text：スクリーンリーダー用のテキスト
index.phpやarchive.phpなどのテンプレートファイルに、WordPressループの終了直後に関数を記述します。パラメータを配列で指定することで、表示内容を細かく調整できます。
paginate_links関数での実装
より細かいカスタマイズが必要な場合は、paginate_links関数を使用します。この関数はページネーションのHTMLを文字列として返すため、出力前に加工することが可能です。
paginate_links関数では、総ページ数や現在のページ番号を明示的に指定できるため、カスタムクエリを使用する場合にも対応できます。WP_Queryを使って独自のループを作成している場合は、この関数を使用する必要があります。
関数の引数には、total（総ページ数）、current（現在のページ）、format（URLフォーマット）、type（出力形式）などを指定します。typeパラメータにlistを指定すると、リスト形式のHTMLが出力されます。
カスタムクエリでの注意点
WP_Queryを使用してカスタムクエリを作成する場合、ページネーションを正しく動作させるためにはいくつかの注意点があります。
まず、WP_Queryの引数にpagedパラメータを正しく設定する必要があります。get_query_var関数を使って現在のページ番号を取得し、それをクエリに渡します。この設定を忘れると、ページネーションのリンクは表示されても、実際にページを移動した際に常に同じ内容が表示されてしまいます。
また、posts_per_pageの値は、WordPress管理画面の「表示設定」で設定した値と整合性を取ることが推奨されます。
functions.phpへの記述方法
ページネーション用のカスタム関数をfunctions.phpに定義しておくと、複数のテンプレートから呼び出すことができ、コードの再利用性が高まります。
関数名の先頭にテーマ固有のプレフィックスを付けておくと、他のプラグインやテーマとの名前の衝突を防ぐことができます。例えば「mytheme_pagination」のような命名規則を採用するとよいでしょう。
作成した関数は、テンプレートファイル内で任意の場所から呼び出せます。これにより、一覧ページだけでなく、検索結果ページや特定のカテゴリーアーカイブページなど、様々な場所で統一されたページネーションを表示できます。
まずはthe_posts_pagination関数から試してみて、カスタマイズの必要性に応じてpaginate_links関数に移行するのが効率的です。
バクヤスAI 記事代行では、
高品質な記事を圧倒的なコストパフォーマンスでご提供！
ページネーションのデザインカスタマイズ
ページネーションを実装しただけでは、デフォルトのシンプルなスタイルで表示されます。サイト全体のデザインに合わせてカスタマイズすることで、より洗練された見た目を実現できます。
CSSを使ったスタイリングは、ページネーションの自作において最も自由度の高い部分です。ここでは、実際に使えるデザインパターンとそのCSSコードを紹介します。
基本的なCSSスタイリング
WordPressのページネーション関数が出力するHTMLには、いくつかの共通クラス名が付与されています。これらのクラスを利用してCSSを記述することで、見た目を調整できます。
the_posts_pagination関数の場合、nav要素にnavigation paginationというクラスが付与され、各ページリンクはpage-numbersクラスを持ちます。現在表示中のページには、currentクラスが追加されます。
以下は、よく使用されるスタイリングのポイントです。
CSS調整の基本項目
- リンク要素の配置（flexboxを使用した中央揃え）
- 各リンクの余白とサイズ設定
- 現在ページの強調表示
- ホバー時のエフェクト
レスポンシブ対応のポイント
スマートフォンやタブレットでの表示を考慮したレスポンシブデザインは、現代のWebサイトには必須です。ページネーションも例外ではありません。
モバイル端末では画面幅が限られるため、表示するページ番号の数を減らすなどの工夫が必要です。CSSのメディアクエリを使用して、画面幅に応じたスタイルを適用できます。
タップしやすいサイズを確保することも重要なポイントです。モバイルでのタップターゲットは、最低でも44px×44px以上を確保することが推奨されています。
デザインパターンの具体例
サイトのデザインに合わせて、様々なスタイルのページネーションを実装できます。以下の表で代表的なパターンを紹介します。
| デザインパターン | 特徴 | 適したサイト |
|---|---|---|
| シンプルテキスト | 装飾を最小限に抑えた形式 | ミニマルデザインのサイト |
| ボタン型 | 各番号をボタン風に装飾 | コーポレートサイト |
| 丸型アイコン | 円形の背景で番号を囲む | カジュアルなブログ |
| アンダーライン | 現在ページを下線で強調 | モダンなメディア |
選択したパターンに合わせて、border-radius、background-color、box-shadowなどのプロパティを調整していきます。
アクセシビリティへの配慮
デザインをカスタマイズする際には、アクセシビリティにも配慮することが重要です。視覚的な装飾だけでなく、すべてのユーザーが利用しやすいページネーションを目指しましょう。
色のコントラスト比を十分に確保することで、色覚に特性のあるユーザーや、明るい屋外で閲覧するユーザーにも読みやすくなります。WCAGガイドラインでは、通常のテキストで4.5対1以上のコントラスト比が推奨されています。
また、フォーカス状態の視覚的なフィードバックを設定することで、キーボード操作でサイトを閲覧するユーザーにも配慮できます。outlineプロパティやbox-shadowを使って、フォーカス時のスタイルを明確に設定しましょう。
デザイン性とアクセシビリティの両立が、優れたページネーションの条件です。
バクヤスAI 記事代行では、高品質な記事を圧倒的なコストパフォーマンスでご提供！
バクヤスAI 記事代行では、SEOの専門知識と豊富な実績を持つ専任担当者が、キーワード選定からAIを活用した記事作成、人の目による品質チェック、効果測定までワンストップでご支援いたします。
ご興味のある方は、ぜひ資料をダウンロードして詳細をご確認ください。
サービス導入事例
株式会社ヤマダデンキ 様
生成AIの活用により、以前よりも幅広いキーワードで、迅速にコンテンツ作成をすることが可能になりました。
親身になって相談に乗ってくれるTechSuiteさんにより、とても助かっております。
▶バクヤスAI 記事代行導入事例を見る
ページネーションが動作しない場合の対処法
ページネーションを実装しても、期待通りに動作しないケースがあります。よくある問題とその解決方法を知っておくことで、トラブルシューティングの時間を大幅に短縮できます。
問題が発生した際には、まず原因を切り分けることが重要です。PHPのコードに問題があるのか、CSSの問題なのか、それともWordPressの設定に起因するものなのかを順番に確認していきましょう。
表示されない主な原因
ページネーションが全く表示されない場合、いくつかの原因が考えられます。最も多いのは、投稿数が1ページ分に満たないケースです。
ページネーションは、総投稿数がposts_per_page（1ページあたりの表示件数）を超えない限り出力されません。テスト段階では、表示件数を一時的に減らすか、テスト投稿を追加して動作確認を行いましょう。
また、静的フロントページを設定している場合、URLの構造が変わるため、ページネーションのリンクが正しく生成されないことがあります。この場合は、パーマリンク設定を更新することで解決する場合があります。
404エラーが発生する場合
ページネーションのリンクをクリックすると404エラーが表示される場合は、パーマリンク設定に問題がある可能性が高いです。
WordPress管理画面の「設定」から「パーマリンク」を開き、何も変更せずに「変更を保存」ボタンをクリックしてください。これにより、リライトルールが再生成され、問題が解決することがあります。
それでも解決しない場合は、.htaccessファイルの内容を確認します。WordPressのリライトルールが正しく記述されているかどうかを確認することで、404エラーの原因を特定できます。
カスタムクエリでの問題解決
WP_Queryを使用したカスタムクエリでページネーションが動作しない場合は、以下のチェックポイントを確認してください。
カスタムクエリのトラブルシューティング
- pagedパラメータが正しく取得されているか
- paginate_links関数のtotalパラメータが正しいか
- currentパラメータに現在のページ番号が渡されているか
- wp_reset_postdataを呼び出しているか
特にpagedパラメータの取得方法は、フロントページとアーカイブページで異なる場合があります。フロントページではpageを、アーカイブページではpagedを使用する必要があります。
デバッグの方法
問題の原因が特定できない場合は、デバッグモードを有効にして詳細なエラー情報を確認することが有効です。
wp-config.phpファイルでWP_DEBUGをtrueに設定すると、PHPエラーが画面に表示されるようになります。ただし、本番環境では必ずfalseに戻してください。エラーメッセージには、問題のあるファイルと行番号が含まれているため、原因の特定に役立ちます。
また、var_dump関数やprint_r関数を使って、変数の中身を確認することも有効なデバッグ手法です。クエリオブジェクトのmax_num_pagesプロパティを出力して、総ページ数が正しく計算されているかを確認できます。
エラーが発生したら焦らず、原因を一つずつ切り分けて確認していきましょう。
ページネーションのSEO対策
ページネーションは、適切に設定することでSEOにも好影響を与えます。検索エンジンがサイトを正しく理解し、効率的にクロールできるようにするための設定について解説します。
特に大規模なサイトでは、ページネーションの設定がインデックス効率に大きく影響することがあります。基本的な考え方を理解して、適切な設定を行いましょう。
canonical設定の重要性
ページネーションを使用する場合、各ページのcanonical URLの設定が重要になります。canonicalタグは、重複コンテンツの問題を回避し、検索エンジンに正規のURLを伝える役割を果たします。
ページネーションの各ページには、それぞれ固有のcanonical URLを設定することが推奨されます。すべてのページを1ページ目に正規化してしまうと、2ページ目以降のコンテンツがインデックスされにくくなる可能性があります。
多くのWordPressテーマやSEOプラグインでは、この設定が自動的に行われますが、自作テーマの場合は明示的に設定する必要があります。
rel属性の活用方法
以前はrel=”prev”とrel=”next”属性を使用して、ページネーションの連続性を検索エンジンに伝えることが推奨されていました。
しかし、Googleは2019年にこれらの属性をランキングシグナルとして使用していないことを発表しました。そのため、現在ではこれらの属性を設定する必要性は低くなっています。
ただし、他の検索エンジンや一部のツールではまだ参照されている可能性があるため、設定しておいても害はありませんし、将来的に再び重要になる可能性もあります。
クロール効率の最適化
ページネーションの設計は、検索エンジンのクロール効率にも影響します。以下の表で、クロール効率を意識した設計のポイントを確認しましょう。
| 設計項目 | 推奨設定 | 理由 |
|---|---|---|
| 1ページあたりの表示件数 | 10〜20件程度 | ページ数を適度に抑えつつ、1ページの読み込み負荷を軽減 |
| ページ番号の表示数 | 現在ページ前後2〜3件 | クローラーが各ページにアクセスしやすい構造を維持 |
| 最初・最後へのリンク | 設置を推奨 | 深いページへのアクセスを容易にする |
また、XMLサイトマップにページネーションの各ページを含めることで、検索エンジンのクロール漏れを防ぐことができます。
SEOを意識したページネーション設計で、サイト全体のインデックス効率を高めていきましょう！
よくある質問
- ページネーションとページャーの違いは何ですか
-
ページネーションとページャーは、基本的に同じ機能を指す言葉です。ページネーション（pagination）は英語由来の表現で、ページャー（pager）はより短縮された呼び方として使われています。WordPressの公式ドキュメントでは主にpaginationという表現が使用されていますが、どちらを使っても問題ありません。
- プラグインを使う場合と自作する場合、どちらがおすすめですか
-
サイトの目的と技術的なスキルによって選択が変わります。手軽に導入したい場合や、高度なカスタマイズが不要な場合はプラグインが便利です。一方、サイトの軽量化を重視したい場合や、デザインを完全にコントロールしたい場合は自作がおすすめです。WordPressの仕組みを学びたい方にとっても、自作は良い学習機会になります。
- 投稿ページ内の改ページ（複数ページに分割）にも対応できますか
-
投稿本文を複数ページに分割する場合は、wp_link_pages関数を使用します。本記事で解説したthe_posts_paginationやpaginate_links関数は、一覧ページ（アーカイブ）のページ送りに使用するものです。投稿内の改ページには、投稿エディタで改ページブロックを挿入し、テンプレートファイル内でwp_link_pages関数を呼び出すことで実装できます。
まとめ
WordPressでページネーションを自作することで、プラグインに頼らない軽量で柔軟なサイト運営が可能になります。the_posts_pagination関数を使えば基本的な実装は数行のコードで完了し、paginate_links関数を使えばより高度なカスタマイズにも対応できます。
デザインのカスタマイズはCSSで自由に行え、サイトの雰囲気に合わせたページネーションを作成できます。レスポンシブ対応やアクセシビリティへの配慮も忘れずに行うことで、すべてのユーザーに使いやすいサイトを実現できるでしょう。
問題が発生した場合は、投稿数の確認やパーマリンク設定の更新など、基本的なチェックポイントから順番に確認してください。SEO対策としてはcanonical設定を適切に行い、クロール効率を意識したページ設計を心がけることが重要です。ぜひ本記事を参考に、自分だけのオリジナルページネーションを実装してみてください。
