wordpressの次のページへのナビゲーションをカスタマイズ

wordpressで記事が増えてくると次のページへだけでは、ユーザービリティ上あまりやさしくありません。
今回は、下のような次のページへだけではなくページ数できりかえれる様にする方法を解説します。

wordpressでのタグ

<?php $pagemax = $wp_query->max_num_pages; 
$current = $paged;
if(!$current){$current = 1; } ?>
<?php previous_posts_link('&lt;'); ?>
<?php for($i=1; $i <= $pagemax; $i++): ?>
<?php if( $i == $current): ?>
<span><?php echo $i; ?></span>
<?php else: ?>
<a href="<?php echo get_pagenum_link($i); ?>"><?php echo $i; ?></a>
<?php endif; ?>
<?php endfor; ?>
<?php next_posts_link('&gt;'); ?>

それでは一つ一つ解説していきます。

<?php $pagemax = $wp_query->max_num_pages; 

$pagemaxは$wp_query->max_num_pages; を使って総ページ数を取得します。

$current = $paged;

$pagedを使って、現在ユーザーが見ているページの番号を変数に保存します。

if(!$current){$current = 1; } ?>

1ページ目のときは$pagedが空なので$currentに1を保存します。

<?php previous_posts_link('&lt;'); ?>

現在のページよりも前のページへのリンクを表示します。

<?php for($i=1; $i <= $pagemax; $i++): ?>
<?php if( $i == $current): ?>
<span><?php echo $i; ?></span>
<?php else: ?>
<a href="<?php echo get_pagenum_link($i); ?>"><?php echo $i; ?></a>
<?php endif; ?>
<?php endfor; ?>

ifによって現在のページとそれ以外のページで表示方法を変更し、それを全ページ数分繰り返します。

<?php next_posts_link('&gt;'); ?>

現在のページよりも次のページへのリンクを表示します。

スタイルシート

このサイトで使っているスタイルシートです。

.pagenum{text-align:center; padding-top:20px;}
.pagenum a{border: solid 1px #aaaaaa; margin:0 5px;}
.pagenum a:hover{background:#f7e29e;}
.pagenum span{background-color:#dddddd; color:#888888; margin:0 5px;}
.pagenum a,.pagenum span{padding:5px 10px;}