WordPressにプラグイン無しでページネーション(ページナビゲーション)を実装する

この記事が良ければ、ぜひシェアお願いします

ページの下や上の方にある、”次のページ”や”前のページ”、”○○ページ目”のようなページナビゲーションがありますよね。私自身、呼び方は何が正しいのか分からず、『ページナビゲーション』や『ページング』と呼んでいたのですが、『Pagination(ページネーション)』が一般的なようです。(笑)

外見部分については、そのサイトのテーマに沿うものにした方がよいと思いますので、プラグインよりもテーマとして組み込んでおいて、あとでそのサイトの雰囲気に合うように外観をCSSで変更するのが良いと考えていました。プラグインとしては”WP-PageNavi”が有名ですが、それと同じ機能をfunctions.phpに書くことで持たせることができるので、おおもとの記事を元に紹介されているColissさんの記事を参考にページネーションを実装してみました。(同時に、”WP-PageNavi”のプラグインも停止しています。)

参考サイト : WordPressにプラグイン無しでページネーションを設置する方法 | Coliss

ページネーションを実装する

ページネーションを実装するためには、PHPでWordPressのコアとなる部分に対して、対象となるページが何枚あって、それを元に投稿表示機能で何ページと表示するか設定している値をもとに、何ページあるか計算させます。それをもとに、ページ数や次/前、最初/最後を出力してあげる必要があります。当サイトではColissさんの記事を参考に、『ページ数/ページ総数』『前/次』『最後』『ページ数目』を表示できるようにしました。

まずは、【ページネーションの機能】をfunctions.php(無ければ新規に作成してください。文字コードはもちろんUTF-8です)にコードとして追加します。

//ページネーション
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="http://blog.info-architecture.jp/wordpress/&quot;.get_pagenum_link(1).&quot;">&laquo; First</a>";
         if($paged > 1 && $showitems < $pages) echo "<a href="http://blog.info-architecture.jp/wordpress/&quot;.get_pagenum_link($paged - 1).&quot;">&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="http://blog.info-architecture.jp/wordpress/&quot;.get_pagenum_link($i).&quot;" 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="http://blog.info-architecture.jp/wordpress/&quot;.get_pagenum_link($pages).&quot;">Last &raquo;</a>";
         echo "</div>n";
     }
}

次に、ページネーション機能の外観となるスタイルをCSSに追加してあげます。(一般的なテーマだと、style.cssですね)

.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:#fff;
	background: #555;
}

.pagination a:hover{
	color:#fff;
	background: #3279BB;
}

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

あとは、ページネーション機能を使いたいテンプレートファイル、『index.php』『page.php』『post.php』『search.php』『tag.php』などページネーションが必要なテンプレートファイルに下記の出力コードを追記してください。

★どのテンプレートがどのテンプレートファイル(.php)に紐付くかのルールについてはこちらを参照ください。

<?php if (function_exists("pagination")) {
    pagination($additional_loop->max_num_pages);
} ?>

外観はサイトの雰囲気に合わせて使ってもらえればと思います。ご参考にどうぞ!

スポンサーリンク

この記事が良ければ、ぜひシェアお願いします

もぐ
年齢 : 30代半ばの1児の新米パパ。ITネットワークから始まり、WEBディレクター、WEBシステム系のプロマネ、データ分析など色々やってるエンジニアです。WordPress、Webサービス構築、BIツール、IoTなどがトレンド。新しくて面白い仕事募集中。
スポンサーリンク