プラグイン無しでページネーションを設置


追記:2015/05/09
paginate_linksを使用してページ番号付のナビゲーションを作成する【WordPress】

Wordpressでは「paginate_links関数」が使えますので、そちらを使う場合は上記記事を参考にしてください。
当記事は、「paginate_links関数」を使わない場合です。

参考にしたサイト

既存のテンプレートファイルに直に書かれているpaginationのソースの一部を検索にかけると、大元だと思われるところがあったので、そのソースを参考にさせていただくことにした。

@大元:
How to Add WordPress Pagination without a Plugin [Enhanced] - Sparklette Studio
How to Add WordPress Pagination without a Plugin [Enhanced] - Sparklette Studio(インターネットアーカイブ)
@派生:
WordPressにプラグイン無しでページネーションを設置する方法 | コリス
一覧ページネーション を表示する
実際のソースの動作の説明は、ここが詳しいかも。

サンプルソース

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 "
    \n
  • ".$paged." of ".$pages."
  • \n"; if($paged > 2 && $paged > $range+1 && $showitems < $pages) { echo "
  • «最初
  • \n"; } if($paged > 1 && $showitems < $pages) { echo "\n"; } for ($i=1; $i <= $pages; $i++) { if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )) { if ($paged == $i) { echo "
  • ".$i."
  • \n"; } else { echo "
  • ".$i."
  • \n"; } } } if ($paged < $pages && $showitems < $pages) { echo "\n"; } if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) { echo "
  • 最終»
  • \n"; } echo "
\n"; } }
※一部、流行?にあうように書き換えています。

上記をfunctions.phpに追加します。

<?php pagination(); ?>

ページネーションを表示させたいところで、上記のようなコードを書けばOKです。

このソースのロジックは、
$paged :現在のページ数
$wp_query->max_num_pages :最大ページ数
の2つの変数が、Wordpressのグローバル変数であるというのに気付けばわかるかと思います。

スタイルシート

.pagination ul,.pagination li{
	list-style: none;
}
.pagination {
	clear:both;
	padding:20px 0;
	position:relative;
	font-size:11px;
	line-height:13px;
}
.pagination span,.pagination li{
	float:left;
} 
.pagination span, .pagination a {
	display:block;
	margin: 2px 2px 2px 0;
	padding:6px 9px 5px 9px;
	text-decoration:none;
	width:auto;
	color:#fff;
	background: #000; 
}
 
.pagination a:hover{
	color:#fff;
	background: #999;
}

.pagination .current a,
.pagination span.curren{
	color:#fff;
	background: #999;
}

当サイトで利用しているスタイルシートは上記のようになっています。
背景色を変えたい場合は、backgroundの部分の数字を変更してみてくださいね。

スポンサーリンク

コメントを残す

メールアドレスは公開されません。
また、コメント欄には、必ず日本語を含めてください(スパム対策)。