プラグインを使わずに自分でページングを実装するfunction.phpのコードサンプル

公開日： 2014/06/14 最終更新日：2015/11/01

ワードプレスページング・ページネーション（wordpress paging）
Wordpressで選んだテーマにページング機能が付いていない場合は「WP-PageNavi」というプラグインを使うか、該当テーマ内のテンプレートファイル（php,css）にコードを追加して自力で実装する事になる。
ページング(Paging)、ページネーション(Pagination)、ページャー(Pager)と人によって言い方が異なるが、ページングとは上の画像の様にページ番号を表示しページ番号にリンクを付けてアクセスしやすくする事をいう。

スポンサードリンク

ページング、ページネーションの設置方法

一般のWordPressサイト（ブログ）であれば、トップページの記事一覧の下部やアーカイブページ（カテゴリーやタグページ）の記事一覧の下部で見かけるもの。尚、投稿ページや固定ページでも記事がすごく長くなりページ分割したい時に、半角で＜!–nextpage–＞と書けばページ分割されページングが表示される。

function.phpにコードを記入する場合

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 "&laquo; First";
         if($paged > 1 && $showitems < $pages) echo "&lsaquo; 

Previous";

         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>":"".$i."";
             }
         }

         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 "Last &raquo;";
         echo "</div>\n";
     }
}

//ページャー機能

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 "« First";

if($paged > 1 && $showitems < $pages) echo "&lsaquo;

Previous";

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>":"".$i."";

}

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 "Last »";

echo "</div>\n";

}

表示エリアの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;
}

.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;

}

テーマファイルの表示箇所に下記のコードを追加
ex) index.php archive.php category.phpなど


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

<?php if (function_exists("pagination")) {

pagination($additional_loop->max_num_pages);

} ?>

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

「WP-PageNavi」というプラグインを使う場合

プラグイン「WP-PageNavi」を使う場合は、プラグインをインストールして設定画面から必要項目を設定して表示したい箇所に下記のコードを書くと表示される。

<?php wp_pagenavi(); ?>

1	<?php wp_pagenavi(); ?>

※プラグインの設定方法を詳しく説明しているページ
参照 http://crossinthenight.com/wordpress/2624/

まとめ

自分でWordpressのテーマを作成する場合には必要ですが、最近のテーマファイルはページング、ページネーション機能が予め実装されているテーマが殆どです。現在使っている「Stinger3」も、一つ前に使っていた「mono-lab | CUBIC」も付いていました。
別サイトで使っているシンプルでレシポンシブ対応した無料テーマの「wsc7」ではページング機能は実装されていませんが「WP-PageNavi」を使う前提でテーマファイルに設定されていますからプラグインをインストールし設定すると表示されます。

表示速度が若干でも早い方がいい場合は、プラグインを使わずにfunction.phpにコードを書く方が余分なcssファイルの読込や条件分岐の多いコードを読む必要がないのでコードを書くべき、既に長く運用していて問題が無い場合はプラグインを止める必要はない。

Post Categories: Wordpress Tags:funcution.php