ページネーションには下記のタイプがあり、特徴は下記になります。
| タイプ | 見た目 | 動作概要 | 向いている場所 |
| PHPタイプ | ページの先頭から書き直す為、画面が変わる | phpプログラムの為、ページネーション操作のたびにサーバから新しいページを読み込む | カテゴリ、検索結果等のリスト系ページ |
| Jqueryタイプ | その場所でページ内容が変わる為、見やすい | 総てのデータをクライアントに送り、Jqueryで何を表示するか？のページ制御を行う。
サーバは見に行かない。 |
投稿、カスタム投稿、固定ページ |
ここでは「phpタイプ」のページネーションの作成方法を解説します。
このページネーション作成の考え方は下記になります。
①WordPressのページネーションからデータ形式でページデータを貰う。
②貰ったデータを1個づつ呼び出し、Bootstrapページネーションフォーマットで出力する。
下記にそのやり方を解説します。
1.関数を作成する前の基礎知識
- WordPressのページネーション
- Bootstrapのページネーション
WordPressのページネーションは下記の様な表示になります。
しかし、あまり綺麗ではないので、この表示をBootstrapのページネーションを使おう！というのが今回のテーマです。
このページネーション呼び出し方は下記になります。
<?php $args=array( /* paginate_linksの条件を指定します */ ); echo paginate_links( $args ); ?>
尚、上記の$argsのパラメータのディフォルト値は下記になります。
<?php $args = array( 'base' => '%_%', 'format' => '?page=%#%', 'total' => 1, 'current' => 0, 'show_all' => False, 'end_size' => 1, 'mid_size' => 2, 'prev_next' => True, 'prev_text' => __('« Previous'), 'next_text' => __('Next »'), 'type' => 'plain', 'add_args' => False, 'add_fragment' => '', 'before_page_number' => '', 'after_page_number' => '' ); ?>
＜パラメータの解説＞
①上記のtypeを「plain」を「array」に変更すると、ページネーション情報を取り出せます。
よってこの機能を利用する事により、ページネーション表示をBootstrapフォーマットで表示する事が可能になります。
②上記のtotalはトータルのページ数です。
よってここにはグローバル変数$wp_queryにあるmax_num_pagesの値をセットします。
③上記のshow_allは表示形式でが「False」は省略表示で、「True」にすると総てのページを表示します。
一般的には省略表示です。
④上記のmid_sizeは省略表示の時に、現在のページの前後の表示個数を指定します。
1に指定すると表示は下記の様になります。下記の表示はBootstrap形式の時です。
データで受け取る場合のプログラム例
<?php $args=array( 'type' => 'array', 'total' => $wp_query -> max_num_pages, 'show_all' => False, 'mid_size' => 2,); $pages= paginate_links($args); ?>
上記は現在のページの前後を2個にした省略表示データをliリストの配列で返してくれます。
これをどの様なフォーマットで書き出すか？は、「Bootstrapのページネーション」タブを参照してください。
尚、WordPressのページネーションの詳細は下記URLを参照してください。
メモ
1ページに何個表示されるか？はダッシュボードの「設定→表示設定」の中の値で決まります。
Bootstrapのページネーションの基本形は下記になります。
<nav> <ul class="pagination サイズ指定"> <li><a href="#">1</a></li> <li class="active"><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </nav>
①<nav>要素内に<ul>要素を配置し、<ul>のクラスにclass=”pagination”を指定します。
②UL要素に指定できるサイズ指定クラスには下記の3種類があります。
| クラス名 | 解説 |
| 指定なし | 普通サイズ |
| pagination-lg | 大きいサイズ |
| pagination-sm | 小さいサイズ |
③アクティブなページは、<li>要素にclass=”active”を指定します。
よって、Wordpressから取得したページネーションデータを上記のBootstrapのページネーションフォーマットで書き出すと下記の様なページネーションフォーマットになります。
尚、Bootstrapのページネーションの詳細は下記を参照してください。
2.ページネーション関数の開発方針
2-1.ページネーション関数の表示イメージ
■上図の右下にあるNo＝25は、表示対象のドキュメント数で、これはBootstrapのフォーマットには無いので、自作で追加します。
2-2.この関数は「my_pagenavi」として、下記の引数を設定します。
<?php my_pagenavi($wp_query , $show_all , $mid_size) ;?>
ページネーション関数は下記の3つの引数を持った関数として開発します。
| 項番 | 引数 | 説明 |
| １ | $wp_query | 必須 一般投稿は$wp_query、 カスタム投稿はnew WP_Query( $args )で指定した変数名。 |
| ２ | $show_all | 省略可 0:省略表示、１:総てのページを表示 |
| ３ | $mid_size | 省略可 n：現在のページ前後の表示個数 |
3.具体的なプログラム
この関数はfunctions.phpにそのままダイレクトに記述すれば良いのですが、functions.phpが見づらくなるので下記の様に2つに分けて記述しています。
3-1.functions.phpへの記述
// ページナビゲーション関数 get_template_part('func/my_pagenavi');
※1.上記はfuncフォルダの中にあるmy_pagenavi.phpを取り込め！という命令です。
3-2.func￥my_pagenavi.phpに記述するプログラムは下記になります。
<?php /***************************************************************************** ページネーションプログラム（WordPreessの基本機能とBootstrap機能を使っている） ＜引数＞ $my_queryは、一般投稿は$wp_query、カスタム投稿はnew WP_Query($args)で指定した変数 $show_allは、１:すべてのページ番号を表示 0:省略表示（デフォルトは省略表示） $mid_sizeは、現在のページ前後の表示個数 デフォルトは２ ※これを変更する場合は$show_allは0にする事 *******************************************************************************/ function my_pagenavi($my_query,$show_all,$mid_size=2) { $num_page = $my_query -> max_num_pages; /* ページネーションのページ数 */ if($num_page == 1){return;} /* ページ数が1の場合は処理中断*/ if($show_all == 1){$show_all=true;} /* 省略表示か否かの設定 */ else{$show_all=false;} $args=array( 'type' => 'array', 'total' => $num_page, 'show_all' => $show_all, 'mid_size' => $mid_size,); $pages= paginate_links($args); /* $pagesにページネーションデータをセット*/ $no = ' No='.$my_query->found_posts; /* ドキュメント総数のセット */ ?> <nav> <ul class='pagination pagination-sm no-format'> <?php foreach($pages as $line):?> <?php if(strpos($line,'current')!==false):?> <li class='active'><?php echo $line;?></li> <?php else:?> <li><?php echo $line;?></li> <?php endif;?> <?php endforeach; ?> <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 } ?>
①上記はWordPressのpaginate_linksを$pagesで取得し、foreach($pages as $page)でページ番号をBootstrapフォーマットで書き出しています。
②strpos関数は「$line」を「current」で検索し、文字位置を数値で返します。
これが「false」でないという事は「current」行であるという意味です。
③ページネーションのサイズは「pagination-sm」を使用しています。
④ドキュメント総数表示はBootstrapには無いので、「$no」変数とし「.no-format」でCSSを設定しています。
4.この関数の使い方
メモ
カテゴリページ（category.php）や検索結果ページ（search.php）等のリスト系ページで利用する場合は、下記関数をCALLするだけです。
しかし投稿ページ（single.php）、固定ページ（page.php）及びカスタム投稿（single-××.php）で利用する場合は下記ドキュメントを参照してください。
①基本的な使い方
<?php my_pagenavi($wp_query);?>
※1.現在のページは１で、その後ろに2個(2,3)が表示されています。
②ページ前後を1にした省略表示
<?php my_pagenavi($wp_query,0,1);?>
※1.現在のページは１で、その後ろに1個だけ表示されている。
※1.現在のページは4で、その前後に1個だけ表示している。
③ページの総てを表示する
<?php my_pagenavi($wp_query,1);?>
