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

今回は個別記事ページにページャー(ページネーション)を作ります。
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 >',
	)
);

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です