個別記事ページで前後のページャー(ページネーション)を作る【WordPress】

今回は個別記事ページにページャー(ページネーション)を作ります。
｢the_post_navigation()｣を使えば、簡単に作れます。

個別記事にページャー(ページネーション) を設置

ページャー(ページネーション) を設置したい場所に下記のコードを書くだけです。

the_post_navigation(
	array(
		'prev_text'  => '< 前の記事',
		'next_text'  => '次の記事 >',
	)
);

こんな感じで表示されます。

中には｢投稿ナビゲーション｣と表示されることもあります。
WordPressのテーマは、CSSクラス｢.screen-reader-text｣が付与されているものは、CSSで表示されないように設定されているのですが、オリジナルのテーマだったりすると、その設定がなされていなかったりします。
その場合は下記のCSSを追記してください。
表示されなくなります。

■CSS
.screen-reader-text{
	clip: rect(1px,1px,1px,1px);
	overflow: hidden;
	position: absolute!important;
	width: 1px;
	height: 1px;
	word-wrap: normal!important;
}

｢.screen-reader-text｣ は、他でも使用されているクラスなので、影響がないか確認しましょう。
前まで表示されていたのに、いつの間にか消えている！なんてことが起こったりしますので注意してください。

｢%title｣という変数を使うと、記事のタイトルを表示させることも出来ます。

the_post_navigation(
	array(
		'prev_text'  => '< %title',
		'next_text'  => '%title >',
	)
);