【WordPress】コピペで使える条件分岐付きページナビ「次のページ・前のページ」

スポンサードリンク

【Wordpress】コピペで使える条件分岐付きページナビ「次のページ・前のページ」

SEO的には「ページナビゲーション」は

 

[ 1 ][ 2 ][ 3 ][ 4 ]…[100]

 

みたいな感じの数字の表示が好ましい(ユーザーの操作回数も軽減できる)と聞いてたのでPCテーマのほうは数字で表示させているのですが、どうも同じやり方だとモバイルテーマでの収まりが悪いというか操作し難いというか、とにかく色々やりにくく感じたので、最終的には

 

[ 次のページ ] [ 前のページ ]

 

というスタンダードな表示で落ち着きました(妥協とも言うけど)

で、その時に使ったコードです。

ページ送り用(TOPページやカテゴページなど)

<div class="page-navi">
	<?php
	 global $paged;
	 $max_page = $wp_query->max_num_pages;
	 if($paged > 1){
	 /* 次のページがあるよ */ ?>
		<?php previous_posts_link('<span class="to-previous-page">次のページ</span>'); ?>
	<?php }else{
	 /* 次のページがない */ ?>
	<?php } ?>
	<?php  if($paged < $max_page){
	 /* 前のページがある */ ?>
		<?php next_posts_link('<span class="to-next-page">前のページ</span>'); ?>
	<?php }else{
	 /* 前のページがない */ ?>
	<?php } ?>
</div>

 

記事送り用

<div class="page-navi">
	<?php
	    $prev_post = get_previous_post();
	    $next_post = get_next_post();
	?>
			<?php if( $prev_post) : ?>
				<?php  previous_post_link('%link','<span class="to-previous-page-single">前の記事</span>'); ?>
			<?php else : ?>
			<?php endif; ?>
			<?php if( $next_post  ) : ?>
				<?php next_post_link('%link','<span class="to-next-page-single">次の記事</span>'); ?>
			<?php else : ?>
			<?php endif; ?>
</div>

上記コードを表示したい場所にコピペすると基本的にはOKで、見栄えは各classにCSSで指定して適当に中央揃えしたり文字色変えたりお好みでどうぞ。

ちなみにページ送り用のほうにはコメントを入れてます、もし先頭ページで処理が必要な場合などはコメント部分(else)に処理を差し込むといけると思います。

この記事をサイトに埋め込む
スポンサードリンク
この記事をシェアする
RSSリーダーに登録する

 RSSリーダーで購読する

Facebookの反応