投稿ページの前後記事へのページネーション（the_post_navigation）

WP4.1〜使えます。
以前は、previous_post_link(), previous_post_link()を利用していました。

仕様

<?php the_post_navigation( $args ); ?>

パラメータ	初期値	説明
prev_text	%title	リンクの文字列
next_text	%title	リンクの文字列
in_same_term	false	trueにすると同じターム内が対象となる
excluded_terms	（空）	除外したいタームIDを指定する。複数指定する場合は、配列かカンマ区切りで行う。
taxonomy	category	タクソノミーの名前を指定。 ‘in_the_same_term’がtrueの場合のみ有効。
screen_reader_text	Post navigation	スクリーンリーダー用テキスト

初期値

<?php
	the_post_navigation( array(
		'prev_text'          => '%title',
		'next_text'          => '%title',
		'in_same_term'       => false,
		'excluded_terms'     => '',
		'taxonomy'           => 'category',
			'screen_reader_text' => __( 'Posts navigation', 'textdomain'),
	) );
?>

get_the_post_navigation()も同様ですが出力しないため、echoが必要になります。

標準のコードと出力されるHTML

<?php the_post_navigation(); ?>

<nav class="navigation post-navigation" role="navigation">
	<h2 class="screen-reader-text">投稿ナビゲーション</h2>
	<div class="nav-links">
		<div class="nav-previous"><a href="https://example.com/2010/08/07/post-slug/" rel="prev">記事タイトル</a></div>
		<div class="nav-next"><a href="https://example.com/2010/09/09/post-slug/" rel="next">記事タイトル</a></div>
	</div>
</nav>

タイトルの無いエントリーの場合、「過去の投稿へ」「次の投稿へ」となります。

装飾用CSSクラス

.post-navigation {}
.post-navigation .nav-links {}
.post-navigation .nav-links .nav-previous {}
.post-navigation .nav-links .nav-next {}

.navigation / .screen-reader-text / .nav-links これらのクラスは、他でも使われているため、単独で指定するより継承された方が良い。

カスタマイズ例

※翻訳関数は省略しています・・・

サンプルで使っているCSS

.post-navigation {
	display: table;
	width: 100%;
	padding: 8px 0;
	font-size: 1.4rem;
}
.post-navigation .nav-links {
	display: table-row;
	width: 100%;
	word-break: break-all;
}
.post-navigation .nav-links .nav-previous {
	display: table-cell;
	width: 50%;
	padding-right: 48px;
	text-align: left;
}
.post-navigation .nav-links .nav-next {
	display: table-cell;
	width: 50%;
	padding-left: 48px;
	text-align: right;
}

表示文字列を変更する

文字の変更

<?php
	the_post_navigation( array(
		'prev_text'    => '＜ 前の投稿',
		'next_text'    => '次の投稿 ＞'
	) );
?>

htmlタグも使える

<?php
	the_post_navigation(
		array(
			'prev_text'    => '<i class="fa fa-caret-left"></i> %title',
			'next_text'    => '%title <i class="fa fa-caret-right"></i>',
		)
	);
?>

同じカテゴリー内を対象とする

<?php
	the_post_navigation( array(
		'in_same_term' => true,
	) );
?>

同じタグがついた投稿を対象とする

<?php
	the_post_navigation( array(
		'in_same_term' => true,
		'taxonomy'     => 'post_tag',
	) );
?>

Codex

previous_post_link(), next_post_link() WP1.5〜
get_previous_post(), get_next_post() WP1.5〜
the_post_navigation() WP4.1〜
get_the_post_navigation() WP4.1〜

wp4.1までの方法

投稿ページの前後記事へのページネーション（旧版）

仕様

初期値