javascript pagenation – WordPress Snippet

WordPressの固定ページで、ページネーションを行う場合、query_post() は、使わない方がいいとか、諸説入り乱れて、かつ、コーディングも、そこそこ面倒だったりします。

このようなワードプレス界隈の喧騒、の外側には、javascriptによるページネーションが可能だよ、とか　WordPressのコードをもっと簡単にする事ができそうなヒントも意外とあったりします。

このページでは、jQueryでのページネーションを試しています。

ページネーション部分は、jQueryにお任せになるので、テンプレート上で記述するコードは、

<?php
	$paging_contents= get_posts( 'numberposts=-1' );
 
if ( $paging_contents ) {

	$html_structure = '<li><a href="%1$s">%2$s</a></li>';
	$html_list_wrapper= '<ul id="content">%1$s</ul>';
	$html_pagenate_links_wrapper= '<p class="pagenate_links">%1$s</p>';
	$content 					= '';
	
 foreach ($paging_contents as $q){
 
 $content .= sprintf( $html_structure, esc_url( get_permalink( $q->ID ) ), esc_html( $q->post_title ) );
 }
 
 printf( $html_list_wrapper, $content );
}
?>

たったこれだけで、完了。

後は、ヘッダーに

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.pages.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("div.holder").jPages({
	 containerID : "content",
	 perPage: 5
 	});
});
</script>

たったこれだけのコードを、出力するだけで、あの面倒なページネーションが出来てしまいます。

これだけの簡単さなので、投稿にリストについて、ページングを追加するのも、難しい作業ではなくなるのではないかと思います。

Simple client side pagination using jquery

関連