Mylife-clip

最新ガジェットやサービ、旅行関係の情報を配信しています。

Wordpressでページネーションをつける方法

Wordpressでページネーションを実装する方法についてご紹介。
まず初めにページネーションの実装に当たって固定ページでページネーションを実装しようとするとうまくいかない話。
ページネーションの機能はarchive.phpのファイルに記述することで簡単に実装できた話。

固定ページでページネーションを実装しようとして失敗した話

初めは固定ページに投稿したカテゴリー別の記事を一覧表示するようにphpで書き出していましたが、
ページネーションのコードを埋め込んでもページネーションは表示されるがページネーションを利用してページを変更しても、
初めに表示されている投稿の繰り返しとなってしまう。

archive.phpに記述することで簡単にページネーションの機能を実装できた話。

ページネーションの機能はarchive.phpを作成して、任意の表示したい場所にページネーションの記述をするだけで
ページネーションの機能を実装することができました。
この方法でページネーションを実装するとプラグインを利用することなく、ページネーションを実装できるのでWordpressのバージョン管理も楽になります。

※ちなみにarchive.phpは記事の一覧みたいなもので、ブログ系に適したwordpressだとほとんどindex.phpと代わりがないかもしれません(笑

下記に記載したコードをarchive.phpでページネーションを表示したい場所に記述

	<div>
	<?php global $wp_rewrite;
	$paginate_base = get_pagenum_link(1);
	if(strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()){
		$paginate_format = '';
		$paginate_base = add_query_arg('paged','%#%');
	}
	else{
		$paginate_format = (substr($paginate_base,-1,1) == '/' ? '' : '/') .
		user_trailingslashit('page/%#%/','paged');;
		$paginate_base .= '%_%';
	}
	echo paginate_links(array(
		'base' => $paginate_base,
		'format' => $paginate_format,
		'total' => $wp_query->max_num_pages,
		'mid_size' => 4,
		'current' => ($paged ? $paged : 1),
		'prev_text' => '«',
		'next_text' => '»',
	)); ?>
</div>

CSSに関しては下記のコードを自分のCSSに記述して、自分のサイトデザインに合うようにアレンジしてください。

.pager{
	text-align:center;
}
a.page-numbers,
.pager .current{
	background:rgba(0,0,0,0.02);
	border:solid 1px rgba(0,0,0,0.1);
	border-radius:5px;
	padding:5px 8px;
	margin:0 2px;
}
.pager .current{
	background:rgba(0,0,0,1);
	border:solid 1px rgba(0,0,0,1);
	color:rgba(255,255,255,1);
} <||