WordPressの投稿記事ページの下部に表示される「前の記事」「次の記事」というナビゲーション。

「前の記事」「次の記事」

この並びに違和感を覚えたことはないでしょうか。

たとえば、左側が「新しい記事」、右側が「前の記事」に見えることがあります。
ですが実際は、左側に「古い記事」、右側に「新しい記事」が表示される仕様になっています。

少し直感とズレているように感じますが、これはWordPressのデフォルトの挙動です。
ではなぜ、このような仕様になっているのでしょうか。今回はその理由を掘り下げてみたいと思います。


WordPressテーマ「GLUE」
WordPressテーマ「GLUE」
無料で高機能なWordPressテーマが手に入る。

なぜ「前の記事」「次の記事」が逆に感じるのか

WordPressのナビゲーションが逆に感じたり、違和感があるのは、ユーザーの操作感覚とWordPressの表示仕様にズレがあるためです。

ユーザーは「左=新しい」という感覚で見ている

たとえば、一覧ページでは最新記事が左側(または上)に表示されており、ページネーションでは「右へ進む=より古い記事」という並びが一般的です。

一覧ページのページネーション

こうしたレイアウトやUIの慣習から、「左側=新しい記事」という感覚が無意識に身についてしまっているのかもしれません。

WordPressは時系列で並べている

一方で、WordPressの「次の記事」は、時間の前後を基準に設計されています。

WordPressのようなCMSは、投稿日時を基準にコンテンツを管理し、記事同士の前後関係もその時間軸で決まる構造になっているためです。

時間の流れを左右で表現した場合、一般的には左が過去、右が未来として扱われることが多いですよね。WordPressもこの考え方に沿って、左側に古い記事(過去)、右側に新しい記事(未来)が配置される設計になっています。

この仕様はどう扱うべきか?

ブログならそのままでもOK

WordPressはもともとブログとして設計されているため、時系列で前後関係を示す仕様になっています。

単に、記事詳細ページから前の記事や次に記事にリンクさせたいだけなら、特に変更する必要はないでしょう。WordPressのデフォルトの仕様に則っていた方が無難でもあります。

回遊を重視するなら見直す価値あり

ユーザーの回遊を重視するデザインの場合は、ナビゲーションの直感性を改善できる可能性があります。

たとえば、写真やデザインのギャラリーサイトなどでは、両端の矢印のように直感的に前後へ移動できる設計もあります。時系列ではなく閲覧の流れに合わせている形です。

一覧ページでは左側が新しい記事なので、その感覚に合わせた画像スライダーのようなUI設計です。

サイトのデザインや目的によっては、左右の入れ替えや文言変更などで、より直感的なナビゲーションに調整することも検討するとよいでしょう。

「前の記事」「次の記事」は変更できる?

WordPressでは previous_post_link / next_post_link を使って、投稿ナビゲーション(「次の記事」)を出力しています。これらは主にテーマ側で制御されているため、テーマファイルを編集することで変更できます。

多くのWordPressテーマでは、single.php や、template-parts フォルダ内のファイルに記述されていますが、開発者に確認するかバックアップをとってから慎重に編集してください。

たとえば、左右の並びを入れ替えたい場合は、出力する順番を逆にするだけで対応できます。

<div class="post-nav">
  <div class="prev">
    <?php next_post_link('%link', '新しい記事'); ?>
  </div>
  <div class="next">
    <?php previous_post_link('%link', '前の記事'); ?>
  </div>
</div>

上記例では、next_post_link を左側に、previous_post_link を右側に配置することで、「左=新しい」「右=古い」という感覚に合わせたナビゲーションになります。

テキストも指定できるため、「新しい記事」「一つ前の記事」など、より直感的な表現に調整可能です。

まとめ

WordPressの「前の記事」や「次の記事」に違和感がある理由は、ユーザーの感覚とWordPressの設計がズレているからです。

  • ユーザーの感覚:閲覧の流れ(操作の直感)
  • WordPressの設計:時間の前後関係(データ構造)

WordPressでは、時間軸を基準に記事の前後関係を定義しているため、このような並びになっています。

UIとしては自由に変えられるため、サイトの目的やデザインに合わせて設計すると、自然なナビゲーションを実現できるかもしれません。

世界最高品質のデザインの
WordPressテーマ集
WordPressテーマ「ISSUE」
WordPressテーマ「ISSUE」
人材不足を解決する求人採用サイトを。
WordPressテーマ「SEEED」
WordPressテーマ「SEEED」
Webサービスを販売するLP型テーマ。
WordPressテーマ「GENESIS」
WordPressテーマ「GENESIS」
スタイリッシュな企業サイトの決定版。
WordPressテーマ「SOLARIS」
WordPressテーマ「SOLARIS」
一流の企業のための一流の企業サイトを。