WordPressの記事の最下部などに表示される「前の記事」「次の記事」のリンクを簡単に出力する方法を紹介します。

標準的なナビゲーション表示

最も簡単なのはテンプレートタグ「the_post_navigation()」を使う方法。
これを使うと次のようにナビゲーションが表示されます。

<?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>

the_post_navigation()のオプション

the_post_navigation()で指定できるパラメータについて解説します。
これで出力結果をカスタマイズできます。

属性名 デフォルト 説明 詳細
prev_text 前の記事 前の記事のリンクテキスト 記事タイトルを表示する場合は「%title」
next_text 次の記事 次の記事のリンクテキスト 記事タイトルを表示する場合は「%title」
in_same_term false 取得対象を同じタクソノミーの記事に限定 例）同じカテゴリーの記事に限定する場合は「true」
excluded_terms なし 取得対象から外したいタクソノミーのIDを指定 例）IDが21のカテゴリーを除外する場合は「21」（配列可）
taxonomy category in_same_termが「true」の場合に限定するタクソノミー 例）’category’と入力すると投稿カテゴリーの記事に限定
screen_reader_text Post navigation マークアップ内のh2見出しに表示されるテキスト 例）「次の記事」や「前の記事」など視覚補助用テキスト
aria_label Post navigation nav要素のaria-label属性 例）「ページナビゲーション」などのアクセシビリティ用テキスト
class なし nav要素に任意のクラスを指定 例）「custom-navigation」など

使い方は the_post_navigation( $args ); です。

<h2 class="screen-reader-text">投稿ナビゲーション</h2> 表記を削除する

h2タグで囲われている「投稿ナビゲーション」の表示が不要な場合、「the_post_navigation()」ではなく「get_the_post_navigation()」を使います。

<?php
	$args = array(
		'prev_text' => '« 前の記事',
		'next_text' => '次の記事 »',
	);
	$navigation = get_the_post_navigation($args);
	$navigation = preg_replace("/]*?>.*?<\/h2>/i", '', $navigation);
	echo $navigation;
?>

これで、h2タグを削除し、カスタム表示が可能になります。

シンプルな「前の記事」「次の記事」の表示

「previous_post_link」と「next_post_link」で、リンクを個別にカスタマイズできます。

<?php previous_post_link(); ?>
<?php next_post_link(); ?>

次のようにHTMLが出力されます。

<a href="前の記事のリンクURL" rel="prev">前の記事のタイトル</a>
<a href="次の記事のリンクURL" rel="next">次の記事のタイトル</a>

テキストを変更して表示

リンクテキストを変更する場合は、テンプレートタグの第2引数にテキストを指定します。

<?php previous_post_link('%link', '前の記事へ'); ?>
<?php next_post_link('%link', '次の記事へ'); ?>

同じカテゴリー内での前後の記事リンク

同じカテゴリー内の前後記事にリンクするには、第3引数にtrueを設定します。
デフォルトでは「FALSE」となっています。

<?php previous_post_link('%link','%title', true); ?>
<?php next_post_link('%link','%title', true); ?>

前後の記事が無い場合は非表示にする

リンクを条件分岐で囲み、前後の記事がない場合は非表示にします。

<?php if (get_previous_post()): ?>
    <p><?php previous_post_link(); ?></p>
<?php endif; ?>
<?php if (get_next_post()): ?>
    <p><?php next_post_link(); ?></p>
<?php endif; ?>

ナビゲーション表示の比較まとめ

タグ 役割 表示場所 出力内容
the_post_navigation 前後の投稿リンクをまとめて表示 単一投稿ページ全般 前後の投稿リンク
previous_post_link 前の投稿リンクを表示 単一投稿ページ 前の投稿リンクのみ
next_post_link 次の投稿リンクを表示 単一投稿ページ 次の投稿リンクのみ

以上。「前の記事」「次の記事」の出力方法でした。
頻繁に使うテンプレートタグですので覚えておきましょう。