WordPressで「前の記事 / 次の記事」を表示する最も簡単な方法（カスタマイズ方法も紹介）

記事の最後には、前後のページに遷移できるナビゲーションが表示されますよね。例えば、当サイトでは、各記事の下部に以下のナビゲーションを表示しています。

次の記事、前の記事の例

当記事では、このように次の記事、前の記事に遷移できるナビゲーションを表示する方法について解説します。より高度なカスタマイズしたい方向けの関数も紹介してますので、最後までご覧ください。

最も簡単に次の記事/前の記事を実装する方法

WordPressには、次の記事と前の記事のナビゲーションのマークアップを生成する関数the_post_navigation()が用意されています。サクッと実装したい方は、こちらをsingle.phpなどに記入していただくことで簡単に実装できるんですね。

<?php
// 次の記事/前の記事のナビゲーション生成
the_post_navigation();

// 出力結果
?>
<nav class="navigation post-navigation" aria-label="投稿">
  <h2 class="screen-reader-text">投稿ナビゲーション</h2>
  <div class="nav-links">
    <div class="nav-previous">
      <a href="前の記事リンク" rel="prev">前の記事タイトル</a>
    </div>
    <div class="nav-next">
      <a href="次の記事リンク" rel="next">次の記事タイトル</a>
    </div>
  </div>
</nav>

関数1つで実装できるので非常に簡単ですよね。ここからカスタマイズして、実用的なナビゲーションを作るために以下の順に解説していきます。

the_post_navigation()のパラメータ解説
パラメータを編集してカスタマイズ
汎用的なデザインにスタイリング

the_post_navigation()のパラメータ解説

まずは、the_post_navigation()で指定できるパラメータについて解説します。こちらを編集することでマークアップの一部を変更できます。

the_post_navigation( $args );

prev_text	前の記事のリンクテキスト記事タイトルを表示する場合は「%title」
next_text	次の記事のリンクテキスト記事タイトルを表示する場合は「%title」
in_same_term	取得対象を同じタクソノミーの記事に限定するか例）同じカテゴリーの記事に限定する場合は「true」
excluded_terms	取得対象から外したいタクソノミーのIDを記載例）23と入力するとIDが23のカテゴリーに属する記事は表示されない（配列で複数指定可）
taxonomy	in_same_termが「true」の場合に限定するタクソノミー名を入力例）’category’と入力すると投稿カテゴリーの記事に限定
screen_reader_text	マークアップ内のh2見出しの中に表示されるテキスト
aria_label	navのaria-label属性の文言を指定
class	navに任意のクラスを指定可能

the_post_navigation() | Function | WordPress Developer Resources

パラメータを編集してカスタマイズ

さきほど様々なパラメータを解説しましたが、すべてを利用する必要はありません。以下は、代表的なパラメータを利用したカスタマイズ例になります。

// 汎用的なカスタマイズ
the_post_navigation( array(
  'prev_text' => '前の記事', // 次の記事のリンクテキスト変更
  'next_text' => '次の記事', // 前の記事のリンクテキスト変更
  'class' => 'p-post-nav' // お好きなクラス名をココに
) );

これでかなり汎用的な形になりました。次はCSSでスタイルを調整していきましょう。

汎用的なデザインにスタイリング

ナビゲーションのスタイルを調整して、以下のデザインにしていきます。

次の記事、前の記事の完成イメージ

テーマで読み込むスタイルシートに以下のCSSをコピペしてみてください。これで上記のデザインになりますので、ぜひサクッと作りたい方は利用してみてください。

/* 次の記事、前の記事のナビゲーションのスタイル */
.nav-links {
  font-size: 16px;
  display: flex;
}
.nav-links div[class^="nav-"] {
  width: 50%;
}
.nav-links .nav-next {
  margin-left: auto;
}
.nav-links .nav-previous + .nav-next {
  margin-left: -1px;
}
.nav-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 3.5em;
  border: 1px solid #ddd;
}
@media (max-width: 767px) {
  .nav-links {
    font-size: 14px;
  }
}

次の記事/前の記事を自由にマークアップするなら

the_post_navigation()は、簡単にナビゲーションを生成できる便利な関数です。しかし、HTMLが自動生成されてしまうため、自分なりのHTML構造に変えたい、他の要素（画像）も取り入れたい時に不便なんですよね。

そんな時は、以下の4つの関数が便利です。リンク部分だけを表示したり、前後の記事の投稿オブジェクトを取得したりと、知っておくだけで幅広い用途に対応できるので、ぜひ使ってみてください。

previous_post_link()	前の記事のリンク付きのaタグを表示	公式ページ
next_post_link()	次の記事のリンク付きのaタグを表示	公式ページ
get_previous_post()	前の記事の投稿オブジェクトを取得	公式ページ
get_next_post()	次の記事の投稿オブジェクトを取得	公式ページ