ページナビゲーションのカスタマイズ WordPressカスタマイズ
京都のホームページ制作会社 株式会社ファンフェアファンファーレでは、ページナビゲーションのカスタマイズをはじめ、WordPressで制作されたウェブサイト・ホームページのカスタマイズサービスとして、WordPressテーマ（テンプレート）やプラグインのカスタマイズサービスを提供しております。
このページでは、WordPressのカスタマイズサービスのうち、「WordPressサイトのページナビゲーションのカスタマイズ」について掲載しております。WordPressテーマをカスタマイズすることで、投稿等における配信順の前後ページへリンクである「ページナビゲーション」の表示方法を変更することができます。ページナビゲーションのリンクデザインの変更はもちろん、「投稿全体ではなく同一カテゴリーに絞り込んだページナビゲーション」を自動生成する機能を設置することもできます。
弊社では、WordPressテーマファイルの編集によるWordPressサイトのページナビゲーションのカスタマイズをはじめ、お客さまのニーズに合わせたWordPressのカスタマイズを手がけております。
「WordPressサイトのページナビゲーションの表示の仕方を変更したい」
「全投稿の公開日時順のページ送りだけでなく、同一カテゴリーの公開日時順のページナビゲーションを追加したい」
「ページナビゲーションのデザインを変更したい」
「カテゴリーページやタグページでのページ送りを前後だけでなくページ番号の数字表記でリンク設置したい」
といった場合に、WordPressテーマファイルを編集することで、WordPressサイトのページナビゲーションをカスタマイズさせていただいております。
WordPressのカスタマイズのうち、WordPressサイトの「ページナビゲーション」のカスタマイズについてご紹介します。
WordPressサイトのページナビゲーション
WordPressをベースとしたホームページ（WordPressサイト）には、ページナビゲーション機能がついています。
このページナビゲーションは、WordPressの「投稿」といったコンテンツページなどにおいて、前後ページヘのリンクを設置する機能です。投稿において配信順の前後ページを示したり、分割されたページのページ送りなどで利用されています。
一般的にはページのコンテンツ部分のフッターに設置され、前後の投稿のタイトルにリンクが設定されています。またアーカイブページでは、前後のリストへのリンクが設定されています。
WordPressサイトのカテゴリーページやタグページ、検索結果ページなど、各種アーカイブページでは表示件数の設定に応じてページが分割され、該当ページの数がアーカイブページで表示する1ページあたりの表示件数を超えた場合は、アーカイブページは複数ページに分割されるためページ送りが始まります。
この時、アーカイブページのコンテンツフッターなどに分割されたページへのリンクである「ページナビゲーション」が表示されます。
アーカイブページのページナビゲーションは、基本的に「次のページ」・「前のページ」、「next」・「back」、「次へ」・「前へ」・「＞」・「＜」といった表示がなされ、原則的に前後ページへのリンクのみが表示されます。
前後ページのタイトルとテキストリンク
WordPressサイト ページナビゲーション
投稿ページのコンテンツフッターには、前後ページへのリンクが設定されています。
通常は投稿の公開日に応じた前後ページが反映されています。
（WordPressカスタマイズ済みのため、分類なしの全体的なページナビゲーションと、同一カテゴリの前後ページへのナビゲーションが表示されています）
ページナビゲーションの対応・未対応
しかしながらWordPressテーマによっては、ページナビゲーションに対応していないものもあり、また、通常ページナビゲーションは、投稿の前後ページへのリンクの表示になっていたり、カテゴリーページ・タグページなででも前後ページのみのリンク表示になっています。
テーマによって様々なページナビゲーションのバリエーションがありますが、WordPressをカスタマイズすることで、ページナビゲーションの新規設置、同一カテゴリーに属するページヘのページナビゲーションの設置、リンクパターンのバリエーション化などを行うことができます。
未対応テーマにページナビゲーションを追加
ページナビゲーション機能がついていないWordPressテーマに新規でページナビゲーションを設置させていただくことも可能です。
このページナビゲーションの実装は、WordPressテーマファイルを編集する必要があるため、管理画面の設定などでは行うことはできません。
弊社では、このWordPressサイトのページナビゲーション未対応テーマに、ページナビゲーション機能を追加するカスタマイズも手がけております。
ページナビゲーションのカスタマイズ
WordPressテーマの仕様によって、ページナビゲーションのパターンは様々です。一般的には投稿の最下部にページナビゲーションが設置されています。
基本的には、WordPressの投稿の時系列に応じて前後ページへのリンクが設置されています。
WordPressテーマをカスタマイズすることで、この投稿順の前後ページヘのナビゲーションに加えて、投稿の所属カテゴリーの前後ページなどへのページナビゲーションを追加して設置することも可能です。
また、カテゴリーページやタグページ、検索結果ページといったアーカイブページにおけるページ分割後のページナビゲーションリンクの表示変更（前後ページの表示のみから複数ページの表示へ）もできます。
弊社では、こうしたWordPressサイトのページナビゲーションの各種カスタマイズに対応しております。
該当カテゴリーや該当タグによる投稿のページナビゲーション
該当カテゴリーや該当タグによる投稿のページナビゲーション
WordPressの投稿ページのコンテンツフッターなどに表示されるページナビゲーションを投稿の公開日順ではなく、該当カテゴリーや該当タグといった分類で前後ページへのリンクへと変更するカスタマイズが可能です。
例えば、ページナビゲーションが投稿の公開日順になっていた場合、製品紹介コンテンツと休業日のお知らせなどが混在する形となりますが、このWordPressカスタマイズを実装することで、製品紹介コンテンツのコンテンツフッターのページナビゲーションは、製品紹介コンテンツの前後ページのみが表示される形となります。
こうしたページナビゲーションのカスタマイズによって、コンテンツフッターのリンクが関連性の高いページへのナビゲーションとしての機能をもつようになるため、WordPressサイトを見るユーザーのユーザービリティが向上すると考えることができます。
アーカイブページでのページナビゲーションリンクを複数ページに
ページナビゲーション アーカイブページでの数字リンク
カテゴリーページやタグページ、検索結果ページといったアーカイブページでのページナビゲーションリンクは基本的には前後ページへのページ送りになりますが、ページ番号順に並ぶページナビゲーションへとWordPressテーマをカスタマイズし、複数ページへのリンクへと変更することも可能です。
ナビゲーションデザイン・表記の変更
また、WordPressサイトのナビゲーションデザインにつきましても、前後ページのアンカーテキストの出し方、配色、配置箇所など、あらゆる面でカスタマイズが可能です。
これらページナビゲーションの仕様（機能）、表示デザインは、WordPressテーマファイルによって設定されているため、変更にはWordPressテーマのカスタマイズが必要です。
WordPressサイトのページナビゲーションの追加、ページナビゲーションのカスタマイズをお求めの場合は、ぜひ弊社までお問い合わせください。
ページネーションが担うSEO内部構造とクロールバジェットの最適化
Webマーケティングの観点から見ると、ページネーションはサイトの「深さ」と「広がり」を制御するコントロールタワーの役割を果たします。
多くの記事を抱えるオウンドメディアや、多数の商品を扱うECサイト（ホームページ）において、トップページやカテゴリトップから数クリックで全てのコンテンツに到達できる構造を作ることが理想です。これを「フラットなディレクトリ構造」と呼びますが、現実的にはページネーションなしには不可能です。
私たち専門家は、ページネーションの設計において「クリック深度（Click Depth）」を意識します。ユーザーやGoogleのクローラーが、何回のクリックで目的のページに到達できるかという指標です。適切なページネーション（例えば、1ページずつ送るだけでなく、最後尾や中間ページへジャンプできる機能）を実装することで、深い階層にある古い記事への到達経路を確保し、サイト全体のインデックス率を向上させます。
また、Googleには「クロールバジェット（クローラーがサイトを巡回するリソースの上限）」という概念があります。無限スクロール（Infinite Scroll）はユーザーにとっては快適かもしれませんが、実装方法を誤るとクローラーが下層コンテンツを認識できないリスクがあります。確実なインデックス登録を目指す場合、静的なリンクとして機能するページネーションの実装は、現在でも非常に強力なSEO施策の一つです。
データベースパフォーマンスとSQLクエリの「OFFSET」問題
技術的な側面、特に大規模サイトにおけるデータベースの挙動からページネーションを見てみます。
WordPressの標準的なページネーションは、MySQLの LIMIT 句と OFFSET 句を使用してデータを取得します。例えば、1ページあたり10件表示の設定で100ページ目を表示しようとすると、データベース内部では「1000件目から10件を取得する」という処理が走ります。
記事数が数千件程度なら問題ありませんが、数十万件規模になると、この「OFFSET」処理が急激に重くなります。データベースは先頭から1000件のレコードをスキャンして読み飛ばす必要があるため、ページ番号が大きくなればなるほど、読み込み速度が低下するのです。これを「OFFSET問題」と呼びます。
トップクラスのエンジニアが大規模サイトを構築する場合、標準のページネーションロジックをバイパスし、「Keyset Pagination（シーク法）」と呼ばれる手法を採用することがあります。これは「前のページの最後のIDよりも小さいIDを持つ記事を10件取得する」というクエリを発行する方法で、どれだけページが進んでも爆速のレスポンスを維持できます。ユーザーに待ち時間を感じさせないための、バックエンド側の高度な配慮です。
モバイルファーストインデックス（MFI）とタップターゲットの設計
現代のWeb閲覧の主役はスマートフォンです。Googleもモバイルサイトの内容を基準に評価を行う「モバイルファーストインデックス（MFI）」を完全に導入しています。
デスクトップ画面では「1 2 3 … 10」といった番号リンクが横に並んでいてもクリックできますが、スマートフォンの狭い画面では、隣接するリンク同士が近すぎると「タップエラー」を誘発します。Google Search Consoleでも「クリック可能な要素同士が近すぎます」という警告が出ることがあります。
プロフェッショナルなカスタマイズでは、CSSやJavaScriptを用いて、デバイス幅に応じた表示の切り替えを行います。例えば、PCでは数字の羅列を表示し、スマホでは「前へ」「次へ」の大きなボタンと、現在のページ数を示すドロップダウンメニューに切り替えるといったUI設計です。指の太さを考慮し、44px以上のタップ領域を確保することは、ユーザビリティの基本であり、SEOの加点要素でもあります。
アクセシビリティ（a11y）標準に準拠したマークアップ
Webの公共性が高まる中、アクセシビリティ（障がい者や高齢者を含む全ての人が情報にアクセスできること）への配慮は、企業の社会的責任（CSR）としても重要です。
標準的なテーマの中には、ページネーションが単なる div タグで囲まれているだけのものも存在します。しかし、私たちはWAI-ARIA（Web Accessibility Initiative – Accessible Rich Internet Applications）の標準に基づき、意味論的なマークアップを行います。
具体的には、ページネーション全体を <nav role=”navigation” aria-label=”ページ送り”> で囲み、現在のページには aria-current=”page” 属性を付与します。これにより、スクリーンリーダー（音声読み上げソフト）を使用しているユーザーに対して、「ここがナビゲーションであり、現在2ページ目にいる」という情報を正確に伝えることができます。こうした細部へのこだわりが、Googleなどのプラットフォームからも「品質の高いサイト」として評価される要因となります。
the_posts_pagination 関数の徹底活用と引数カスタマイズ
WordPress 4.1以降、コア関数として the_posts_pagination() が推奨されていますが、多くの制作現場ではデフォルトのまま使われがちです。しかし、この関数は配列（引数）を渡すことで高度な制御が可能です。
例えば、mid_size や end_size を調整することで、現在地の前後にいくつの数字を表示するか、最初と最後にいくつの数字を表示するかを細かく設定できます。デザインのバランスを整えるだけでなく、ユーザーが迷子にならないための心理的なアンカーを提供するために、これらの数値を慎重に決定します。
また、prev_text や next_text には、単なる文字だけでなく、SVGアイコンやスクリーンリーダー用のテキストを含めることも可能です。私たちは、テーマのデザインシステムに合わせてこれらの出力をフックし、HTML構造を完全にコントロールすることで、デザイン性と機能性を高次元で融合させます。
重複コンテンツ問題と rel=”prev/next” の扱い
SEOの専門的なトピックとして、ページネーションによって生成されるページ（2ページ目、3ページ目…）の扱いがあります。これらはタイトルやディスクリプションが1ページ目と同じになりがちで、検索エンジンから「重複コンテンツ」と見なされるリスクがゼロではありません。
かつては <link rel=”prev” …> と <link rel=”next” …> タグをヘッダーに出力することでページの関係性を示していましたが、Googleは現在、これらをランキングシグナルとしては使用していないと明言しています。しかし、Bingなど他の検索エンジンや、サイト構造の理解を助けるためには依然として有効なマークアップです。
より重要なのは、各ページネーションページの <title> タグをユニークにすることです。「ブログ一覧 | サイト名」ではなく、「ブログ一覧（2ページ目） | サイト名」のように動的にページ番号を付与することで、検索結果画面での重複を避け、ユーザーにとっても現在の位置を明確にします。wp_title フィルターやSEOプラグインのAPIを利用して、こうしたメタデータの最適化を行います。
Ajaxによる非同期遷移とURLの履歴管理
ユーザー体験をさらに向上させる手法として、Ajax（非同期通信）を利用したページ遷移があります。ページネーションのリンクをクリックした際、画面全体をリロードするのではなく、記事一覧部分だけをふわっと切り替える演出です。
これにより、ページ遷移のストレスが軽減され、アプリのような操作感を提供できます。ただし、単純にJavaScriptでコンテンツを書き換えるだけでは、URLが変わらないため、ユーザーがブラウザの「戻る」ボタンを押したときに期待通りの動作をしないという問題が発生します。
トップエンジニアは、HTML5の History API（pushState）を併用することでこの問題を解決します。コンテンツを非同期で読み込みつつ、ブラウザのURLも /page/2/ に更新し、履歴に追加します。これにより、高速な動作と、ブックマークやシェアが可能なURL構造の両立を実現します。
「もっと見る」ボタン（Load More）との使い分け
近年、ページ番号（1, 2, 3…）ではなく、「もっと見る」ボタンを設置するデザインも増えています。これは特にスマートフォンでの閲覧において、タップ数を減らし、フロー体験を維持するのに有効です。
しかし、全てのケースで「もっと見る」が優れているわけではありません。ユーザーが「さっき見たあの記事に戻りたい」と思ったとき、無限に読み込まれたリストの中から再度探すのは困難です。
事業の目的やコンテンツの性質に合わせて選択することが重要です。最新のニュースを流し読みさせたいなら「もっと見る」や無限スクロール、データベース的に過去のアーカイブを検索させたいなら従来のページネーション、といった具合に、ユーザーのインテント（意図）に合わせてナビゲーションの種類を選定・実装します。場合によっては、PCではページネーション、スマホでは「もっと見る」ボタンというハイブリッドな実装を行うこともあります。
404エラーを防ぐリライトルールの理解
カスタム投稿タイプや複雑なパーマリンク設定を行っている場合、ページネーションの2ページ目をクリックすると「404 Not Found」エラーになるというトラブルは、WordPressカスタマイズのあるあるです。
これはWordPressのリライトルール（URL解釈の仕組み）と、メインクエリの取得件数設定の不整合によって起こります。例えば、管理画面の「1ページに表示する最大投稿数」が10件で、テンプレート側で posts_per_page を5件に指定しているような場合に発生しがちです。
私たちは、pre_get_posts アクションフックを使用して、メインクエリが発行される前に条件を統一し、ページネーションの計算が狂わないように制御します。また、必要であれば rewrite_rules_array をデバッグし、正しい正規表現でURLがマッピングされているかを確認します。表面上のデザインだけでなく、WordPressのコア動作を深く理解しているからこそ、堅牢なシステムを構築することができます。
ページネーションのカスタマイズは、ユーザビリティ、デザイン、SEO、そしてサーバーパフォーマンスが交差する、Web制作の総合格闘技のような領域です。
ただリンクが繋がっていれば良いというものではありません。ユーザーがストレスなく情報を巡回でき、検索エンジンがサイトの価値を正しく評価できる構造を作る。そのために、私たち専門家は1ピクセルのデザイン、1行のコードにまで意味を持たせています。
あなたの事業が持つ膨大なコンテンツ資産を埋もれさせることなくユーザーに届けるために。ページネーションという「サイトの動線」を見直すことは、非常に費用対効果の高い施策となります。高度な設計や実装に関するご相談は、いつでも株式会社ファンフェアファンファーレにお寄せください。
WordPressサイトの「投稿ページ」・「固定ページ」カスタマイズ
