webtips

function.php

/** ページネーション */
 function pagination($pages = '', $range = 4)
 {
 $showitems = ($range * 2)+1;

global $paged;
 if(empty($paged)) $paged = 1;

if($pages == '')
 {
 global $wp_query;
 $pages = $wp_query->max_num_pages;
 if(!$pages)
 {
 $pages = 1;
 }
 }

if(1 != $pages)
 {
 echo "<div class=\"pagination\"><span>Page ".$paged." of ".$pages."</span>";
 if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo; First</a>";
 if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo; Previous</a>";

for ($i=1; $i <= $pages; $i++)
 {
 if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
 {
 echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."#news' class=\"inactive\">".$i."</a>";
 }
 }

if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">Next &rsaquo;</a>";
 if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last &raquo;</a>";
 echo "</div>\n";
 }
 }

テーマファイル

<div class="navigation">
 <?php if (function_exists("pagination")) { pagination($additional_loop->max_num_pages); } ?>
</div>

スタイルシート

下記のスタイルシートで、自由なデザインに。。。

.navigation{
 width: 100%;
 height: auto;
 float: left;
}

 .pagination {
 clear:both;
 padding:20px 0;
 position:relative;
 font-size:11px;
 line-height:13px;
 }

.pagination span, .pagination a {
 display:block;
 float:left;
 margin: 2px 2px 2px 0;
 padding:6px 9px 5px 9px;
 text-decoration:none;
 width:auto;
 color:#555555;
 background: #cccccc;
 }

.pagination a:hover{
 color: #fff;
 background-color: #555555;
 }

.pagination .current{
 padding:6px 9px 5px 9px;
 background: #555555;
 color:#fff;
 }

<p align="center">
 <?php previous_post_link('&laquo; %link', '前の記事', TRUE, ''); ?>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <?php next_post_link('%link &raquo;', '次の記事', TRUE, ''); ?>
 </p>