HOME  /WordPress(応用)
 /自作のページネーションを作成する
2017年11月22日

自作のページネーションを作成する

ページネーションは一般的にプラグインを使うケースが多いですが、このサイトでは独自のページネーションを作成しています。作成の考え方は下記になります。

①WordPressがデフォルトで持っているページネーションからデータ形式でページネーションデータを取得する。

②上記のデータを1個づつ呼び出し、Bootstrapページネーションフォーマットで出力する。

下記にそのやり方を説明します。

1.基本形

WordPressのページネーションは下記関数で表示されます。

<?php 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'          => __('&laquo; Previous'),
	'next_text'          => __('Next &raquo;'),
	'type'               => 'plain',
	'add_args'           => False,
	'add_fragment'       => '',
	'before_page_number' => '',
	'after_page_number'  => ''
); ?>

※1.上記のtypeを「array」に変更すると、ページ送りのリンク配列を返してくれます。

※3.上記のtotalはページ数です。$wp_query -> max_num_pagesの値をセットします。

※4.上記のshow_allが「False」は省略表示で「True」は総てのページを表示します。

※5.上記のmid_sizeは省略表示の時に、現在のページの前後の表示個数を指定します。

データで受け取る場合のプログラム例

$args=array(
	'type' => 'array',
	'total' => $wp_query -> max_num_pages,
	'show_all' => False,,
	'mid_size' => 2,);
$pages= paginate_links($args);

上記は現在のページの前後を2個にした省略表示データをliリストの配列で返してくれます。

尚、WordPressのページネーションの詳細は下記URLを参照してください。

関数リファレンス/paginate links

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>

※1.<nav>要素内に<ul>要素を配置し、<ul>のクラスにclass=”pagination”を指定する。

※2.サイズ指定には下記の3種類がある。

指定なし  :普通サイズ
pagination-lg :大きいサイズ
pagination-sm :小さいサイズ

※3.アクティブなページは、class=”active”を指定する。

尚、Bootstrapのページネーションの詳細は下記を参照してください。

Bootstrap3日本語リファレンス(ページネーション)

2.関数の開発方針

2-1.下記の様なページネーション関数を作成します。

※1.右上にあるNo=25は、表示対象のドキュメント数です。

3-2.この関数は「my_pagenavi」として、下記パラメータを定義します。

<?php my_pagenavi($wp_query,$show_all,$mid_size) ;?>
引数 説明
$wp_query 必須
一般投稿は$wp_query
カスタム投稿はnew WP_Query( $args )で指定した変数名。
$show_all 省略可
0:省略表示、1:総てのページを表示
$mid_size 省略可
n:現在のページ前後の表示個数
注)$show_allは0を指定する事

3.具体的なプログラム

2-1.functions.phpへの記述

// ページナビゲーション関数
get_template_part('func/my_pagenavi');

※1.上記はfuncフォルダの中にあるmy_pagenavi.phpを取り込め!という命令です。

2-2.func¥my_pagenavi.phpに記述するプログラムは下記になります。

<?php 
function my_pagenavi($wp_query,$show_all,$mid_size=2)
 {
	$num_page = $wp_query -> max_num_pages;  /* ページネーションのページ数 */
 if($num_page == 1){return;}              /* ページ数が1の場合は処理中断*/
	$no = '&nbsp;No='.$wp_query->found_posts;/* 対象ドキュメント数 */
 /* 省略表示か否かの設定 */
 if($show_all == 1){$show_all=true;}
	else{$show_all=false;}
	/* WorPressのpaginate_linksのCALL*/
	$args=array(
		'type' => 'array',
		'total' => $num_page,
		'show_all' => $show_all,
		'mid_size' => $mid_size,);
	$pages= paginate_links($args);
?>

<style>
		#format{
			display:flex;
			align-items:flex-end;
      font-size:14px;font-size:0.875rem;
			color:#337ab7;
			margin:0 0 5px 0;}
</style>

<nav>
	<!-- ul要素指定 -->
	<ul class='pagination pagination-sm' id='format'>
    <!-- li要素指定 -->
    <?php foreach($pages as $page):?>
      <?php if(strpos($page,'current')!==false):?>
					<li class='active'><?php echo $page;?></li>
			<?php else:?>
					<li><?php echo $page;?></li>
			<?php endif;?>
   <?php endforeach; ?>
    <!--ドキュメント数の表示-->
		<li><?php echo $no;?></li>
	</ul>
</nav>

<?php
 }
?>

※1.上記はWordPressのpaginate_links$pagesで取得し、foreach($pages as $page)でページ番号をBootstrapフォーマットで書き出しています。

※2.ページネーションのサイズはXSとし、フォントサイズをrem指定にする事によりレスポンシブ対応としています。

4.この関数の使い方

①基本的な使い方

<?php my_pagenavi($wp_query);?>

※1.カスタム投稿の場合はnew WP_Query( $args )で指定した変数名を指定して下さい。

※1.現在のページは1で、その後ろに2個(2,3)が表示されています。

②ページ前後を1にした省略表示

<?php my_pagenavi($wp_query,0,1);?>

※1.現在のページは1で、その後ろに1個だけ表示されている。

※1.現在のページは4で、その前後に1個だけ表示している。

③ページの総てを表示する

<?php my_pagenavi($wp_query,1);?>