ページネーションには下記のタイプがあり、特徴は下記になります。
| タイプ | 見た目 | 動作概要 | 向いている場所 |
| PHPタイプ | ページの先頭から書き直す為、画面が変わる | phpプログラムの為、ページネーション操作のたびにサーバから新しいページを読み込む | カテゴリ、検索結果等のリスト系ページ |
| Jqueryタイプ | その場所でページ内容が変わる為、見やすい | 総てのデータをクライアントに送り、Jqueryで何を表示するか？のページ制御を行う。
サーバは見に行かない。 |
投稿、カスタム投稿、固定ページ |
ここでは「Jqueryタイプ」のページネーションの作成方法を解説します。
1.ページネーション関数の開発方針
1-1.ページネーション関数の表示イメージ
■Bootstrapのページネーションスタイルを利用する
■上図の右下にあるNo＝25は、表示対象のドキュメント数
1-2.この関数は「jq_pagenavi」として、下記の引数を設定します。
<?php jq_pagenavi($my_query , $posts_per_page , $taget) ;?>
ページネーション関数は下記の3つの引数を持った関数として開発します。
| 項番 | 引数 | 説明 |
| １ | $mp_query | 必須 カスタム投稿はnew WP_Query( $args )で指定した変数名。 |
| ２ | $posts_per_page | 必須 1ページに表示する投稿数 |
| ３ | $taget | 必須
ページネーションするターゲットのクラス名(例：’.listbox’) |
1-3.この関数を呼ぶ側で行う事
①new WP_Queryの引数の設定で「posts_per_page」を「-1」で指定し、総ての投稿を呼び出してください。
②他のパラメータは任意です。
下記の例を参照してください。
<?php $args = array('posts_per_page' => -1,); $my_query = new WP_Query( $args ); jq_pagenavi($my_query , 4 , '.list-box'); ?>
2.ページネーション関数
この関数はfunctions.phpにそのままダイレクトに記述すれば良いのですが、functions.phpが見づらくなるので下記の様に2つに分けて記述しています。
2-1.functions.phpへの記述
// ページナビゲーション関数 get_template_part('func/jq_pagenavi');
※1.上記はfuncフォルダの中にあるjq_pagenavi.phpを取り込め！という命令です。
3-2.func￥jq_pagenavi.phpに記述するプログラムは下記になります。
<?php /***************************************************************************** jquery操作を前提としてページネーションプログラム ＜引数＞ $my_query ：一般投稿は$wp_query、カスタム投稿はnew WP_Query($args)で指定した変数 $posts_per_page ：1ページに表示する投稿数 $taget ：ページネーションするターゲットクラス(例：'.listbox') *******************************************************************************/ function jq_pagenavi($my_query,$posts_per_page,$taget) { $post = $my_query->found_posts; /* 投稿数の取得 */ $num_page = ceil($post / $posts_per_page) ; /* 投稿数を1ページの表示で割った物を切り上げ処理した値*/ $no = ' No='.$post; /* ドキュメント総数のセット */ if($num_page == 1){return;} /* 1ページしかない場合は処理終了 */ ?> <nav class='jq-pagenavi' <?php echo 'page ='.$posts_per_page.' total ='.$post.' taget='.$taget;?>> <ul class='pagination pagination-sm no-format'> <li><a>« 前へ</a></li> <?php for($i=1; $i <= $num_page; $i++):?> <?php if($i == 1):?> <li class='active'><a><?php echo $i;?></a></li> <?php else:?> <li><a><?php echo $i;?></a></li> <?php endif;?> <?php endfor;?> <li><a>次へ »</a></li> <li><?php echo $no;?></li> <!--ドキュメント数の表示 --> </ul> </nav> <style> .no-format{ /* ドキュメント数のフォーマット */ display:flex; align-items:flex-end; font-size:14px;font-size:0.875rem; color:#337ab7; margin:0 0 5px 0;} </style> <?php } ?>
<プログラムのポイント>
①親プログラムから「1ページに表示する投稿数」と「ページネーションするターゲットクラス」を貰うと共に、下記の形式でJqueryプログラムに属性値と渡している。
<nav class='jq-pagenavi' <?php echo 'page ='.$posts_per_page.' total ='.$post.' taget='.$taget;?>>
これによりJqueryプログラムは、これらの属性値を呼び出すことにより、何をして欲しいかを理解する事ができる。
②ページネーションの作り方の違い
「phpプログラム制御」の時はページデータをWordpressから貰えたので「foreach」で回せたが、「このプログラム」ではページデータが無いので、「for」ループで回しています。
<?php for($i=1; $i <= $num_page; $i++):?> 処理 <?php endfor;?>
3.ページネーションの制御プログラム（jquery）
3-1.開発の基本方針
①このプログラムは1ページに「ページネーション＋リスト」が複数存在していても、動作可能なプログラムにする。
$(function(){ $('.jq-pagenavi').each(function(n,nav){ 処理 }); });
■上記は1ページの中に「‘.jq-pagenavi’」が複数あっても「.each」でループで処理できる様にしています。
②ページネーションコンテンツの表示/非表示は「.show()/.hide()」を利用する。
一般的な表示/非表示制御はCSSの「.css(‘display’,’block’)/.css(‘display’,’none’)」が利用されます。
しかしここで表示/非表示を行うリストは複数のクラスから構成されているのでCSS制御ではフォーマットが崩れます。
＜サンプルHTML構造＞
<div class='relation-box'> <div class='relation-box-thumbnail'> <?php the_post_thumbnail(); ?> </div> <div class='relation-box-contents'> <div class='relation-box-title'> <a href='<?php the_permalink(); ?>'><?php the_title(); ?></a> </div> <div class='contents'> <?php the_excerpt(); ?> </div> </div> </div>
上記の様な構造の場合「.relation-box」のCSSのON/OFFは、このクラスの下位クラスのCSSが機能しません。
よって下記の様な処理を利用します。
if(disp_min <= i && i <= disp_max){ /* i 投稿が表示の範囲に入っているのかの判定 */ $('.relation-box').show();} else{ $('.relation-box').hide()} });
3-2.プログラム全体
今まで、このサイトで紹介したJqueryプログラムは数行レベルで済むプログラムでしたが、ページネーション制御を行うプログラムはかなり色々なテクニックを必要とするプログラムになっています。
プログラムの全体は下記ボタン操作で見て下さい。
/************************************************************/ /* Jqueryによるページネーション制御(jq_pagenaviの制御) */ /************************************************************/ $(function(){ $('.jq-pagenavi').each(function(n,nav){ var post_per_page = parseInt($(nav).attr('page')); /* 1ページに表示する個数 */ var total_post = parseInt($(nav).attr('total')); /* 総投稿数 */ var taget = $(nav).attr('taget'); /* ページネーションのターゲットクラス */ var nav_count = $(nav).find('li').length; /* ナビゲーションの個数 */ var nav_no = nav_count - 1; /* ナビゲーションの[no=××]の位置 */ var nav_next = nav_count - 2; /* ナビゲーションの[次へ]の位置 */ var nav_max = nav_count - 3; /* ナビゲーションの最後の数字の位置 */ var nav_prev = 0; /* ナビゲーションの[前へ]の位置 */ var nav_min = 1; /* ナビゲーションの最初の数字の位置 */ var old_position = 1; /* ナビゲーションの旧ポジション */ var new_position = 1; /* ナビゲーションの新ポジション */ var disp_min = 0; /* 表示する下の番号の初期値 */ var disp_max = disp_min + post_per_page - 1; /* 表示する上の番号の初期値 */ $(nav).find('li').eq(nav_prev).hide(); /* [次へ]のガイドを非表示にする */ $(taget).each(function(i,list){ /* 初期に表示するターゲットクラスの表示 */ if(disp_min <= i && i <= disp_max){ $(list).show();} else{ $(list).hide()} }); $(nav).find('li').click(function() { /********** 以下はクリックされた後の処理 ********/ old_position = $(nav).find('li.active').index(); /* ナビゲーションの旧ポジションの読み込み */ new_position = $(nav).find('li').index(this); /* ナビゲーションの新ポジションの取り込み */ if(new_position == nav_no) /* [no=✖✖]がクリックされた時の処理 */ {new_position = old_position} if(new_position == nav_next) /* [次へ]がクリックされた時の新ページ番号変更 */ {new_position = old_position + 1} if(new_position == nav_prev) /* [前へ]がクリックされた時の新ページ番号変更 */ {new_position = old_position -1} $(nav).find('li').removeClass('active'); /* activeクラスの削除と追加 */ $(nav).find('li').eq(new_position).addClass('active'); if(new_position == nav_min){ /* [前へ]のガイドの表示/非表示 */ $(nav).find('li').eq(nav_prev).hide()} else{ $(nav).find('li').eq(nav_prev).show()} if(new_position == nav_max){ /* [次へ]のガイドのｊ表示/非表示 */ $(nav).find('li').eq(nav_next).hide()} else{ $(nav).find('li').eq(nav_next).show()} disp_min = (new_position - 1) * post_per_page; /* 表示する下の番号の更新 */ disp_max = disp_min + post_per_page - 1; /* 表示する上の番号の更新 */ $(taget).each(function(i,list){ /* ターゲットクラスの表示制御 */ if(disp_min <= i && i <= disp_max){ $(list).show();} else{ $(list).hide()} }); }); }); });
これ位長いJqueryプログラムでは、ブラウザのデバック機能を使いながらの開発が必要になります。
3-3.Jqueryのデバック方法
HTTP画面を右クリックして「検証」を起動する。
検証メニュの中から「Console」を開く。
Jqueryプログラムの中で下記コマンドを入れると、値がコンソールに表示されます。
console.log(変数名,変数名);
4.この関数の使い方
4-1.リストプログラムのサンプル
<?php $args = array( 'category_name' => $cat_slug, 'post__not_in' => array(get_the_ID()), 'orderby' => 'date', 'posts_per_page' => -1,); $my_query = new WP_Query( $args ); ?> <?php if($my_query->have_posts()):?> <?php while($my_query->have_posts()):$my_query->the_post(); ?> <div class='relation-box'> <div class='relation-box-thumbnail'> <?php the_post_thumbnail(); ?> </div> <div class='relation-box-contents'> <div class='relation-box-title'><a href='<?php the_permalink(); ?>'><?php the_title(); ?></a></div> <div class='contents'><?php the_excerpt(); ?></div> </div> </div> <?php endwhile;?> <?php endif;?> <?php wp_reset_postdata(); ?>
■上記のプログラムの場合は、「relation-box」クラスの中に、「relation-box-thumbnail」と「relation-box-contents」が表示されています。
この様な場合の関数のコール方法は下記になります。
<?php jq_pagenavi($my_query,4,'.relation-box');?>
リスト系のプログラムでこの関数を使う場合
リスト系のプログラムではPHPタイプのページネーションで問題ありませんが、どうしてもこの関数を使う場合は下記の様にして下さい。
■デフォルトの$Wp_Queryでなく、new WP_Query( $args )で新しいQueryを作成して利用する
但し、最後で新規に作成したQueryはクリアを忘れないで下さい。