ホーム » ブログ » WordPressでプラグインを使わずページングを設置

2013/11/21

wordpressをカスタマイズするうえで必要不可欠なページング(ページネーション)を簡単に設置するコードです。
今回もプラグインを使用しないで設置します。

まず、fuction.phpに下記のコードを記入します。

function pagination($pages = '', $range = 1) {
 $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=\"paging\"><span class=\"pageIndex\">Page ".$paged." / ".$pages."</span>";
 if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo;</a>";
 if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo;</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)."' class=\"inactive\">".$i."</a>";
 }
 }

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

続いてページングを表示するテンプレートの箇所に下記を記述します。

<?php pagination($additional_loop->max_num_pages); ?>

これで表示は完了です。
後はCSSを記述しデザインを整えれば完成です。

.paging {
	display:block;
	overflow:hidden;
	text-align:center;
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 20px;
	padding-left: 0px;
}
.paging span,.paging a {
	margin:0px 2px;
	padding:8px 14px;
	color:#000000;
	border:1px solid #000000;
	text-decoration:none;
}
.paging span.current,.paging a:hover {
	background-color:
    #000;color:#fff;
    text-decoration:none;
}
.paging span.pageIndex {
	display:none;
}
.paging span.pageIndex {
	display:inline;
}

Related Posts関連記事

BLOGブログのカテゴリー

HOMEPAGEホームページ制作

SEOSEO対策

OTHERその他のサービス

to Top