ワードプレスで完全自作のページネーションを実装した時の話

2021.05.06

今回は自作のページネーションを実装した時の話を書いていきます。過去最大レベルで詰まった部分なので備忘録的に書き残すことにしました。

やりたかった事

自作した固定ページで自作ページネーションを動かしたい。表示するデータも自分で用意したもの、つまりfunctions.phpの中にデータがある。

自作した固定ページで自作ページネーションを動かしたい

表示したいデータはfunctions.phpの中に配列の中などに入っている

固定ページではfunctions.phpに記載した関数を呼び出すだけにしたい

この上記がやりたい事です。

作ったページネーションの関数

この関数がページネーション処理をしたい時に呼ばれる関数です。

function get_pagination($items) {
	
$current_link = $_SERVER['REQUEST_URI'];
 if(strstr($current_link, 'page')==true) {
   $ele = explode("/", $current_link);
   $now = $ele[3];
   } else {
   $now = 1;
 }
 
 // 初期値
 $first_num = 1;

 // 1ページに何個表示するか
 define('MAX','2');

 // 全件数を取得
 $items_num = count($items);

 // 最大値のページネーション数を、celiで小数点切り上げで求める
 $max_page = ceil($items_num / MAX);

 // いくつから取得していくかを決める	
 $start_no = ($now - 1) * MAX;

 // 表示するデータの作成	
 $disp_data = array_slice($items, $start_no, MAX, true);
 
 // [初期値, 最大値, そのページで表示するデータ, 現在のページ番号, 全件数]
 return [$first_num, $max_page, $disp_data, $now, $items_num];
	
}

この関数の役割としては渡された$itemsを利用してページネーションで必要な要素を出して配列の形で返すということをしています。

ポイントは$itemsに何が入っているか？を理解するのと返り値の値の使用方法です。

$itemsに何が入っているか？

$itemsには表示したいデータが配列の形で入っています。

下記、例、$photosの部分

※写真についてはワードプレス内のメディアにダウンロードしている前提です

function get_photos() {
		// 	['写真', '国', '大きさ', 'イメージ'],
		//　上記のように内容を埋める
	
	$photos = [
		['https://hoge.com/wp-content/uploads/2021/02/20200403-_R2A9019のコピー-scaled.jpg', 'アメリカ', '広い', '自由の国'],
		['https://hoge.com/wp-content/uploads/2021/02/20200403-_R2A9019のコピー-scaled.jpg', 'ロシア', '広すぎ', '寒い'],
		['https://hoge.com/wp-content/uploads/2021/02/20200403-_R2A9019のコピー-scaled.jpg', 'イギリス', '狭い', 'ジェントルマン'],
		['https://hoge.com/wp-content/uploads/2021/02/20200403-_R2A9019のコピー-scaled.jpg', '日本', '島国', 'サムライ'],
		['https://hoge.com/wp-content/uploads/2021/02/20200403-_R2A9019のコピー-scaled.jpg', 'ニュージーランド', '日本と同じくらい', 'Kiwi!'],
	];
	
	$item_array= get_pagination($photos);
};

上記のように書くと$photosの情報を持ってget_pagination関数が呼び出されます。

処理が終わると返り値は$item_arrayとして配列の形で返ってきます。この$item_arrayの中に実際に表示する値が入っているイメージです。

ちなみに表示する固定ページに記載するコードは下記

<?php
/*
Template Name: Photo-list（カスタムテンプレートの名前）
*/
?>

<?php get_header(1); ?>

  <?php
     echo get_photos();           // この部分
  ?>
  
<?php get_footer(); ?>

次は返り値の使用方法について

ここは大きく分けて２つの事を行います。どちらも返り値を使ってviewに表示する作業です。

データの表示

と

ページネーション番号の表示

まず、データの表示から。

最初に理解する必要があるのは返り値($item_array)には何が入っているのか？という事。　簡単には下記のイメージ

// [初期値, 最大値, そのページで表示するデータ, 現在のページ番号, 全件数]
 return [$first_num, $max_page, $disp_data, $now, $items_num];

今回はデータの表示なので使用するのは$disp_dataの部分。つまり返り値から使う場合は$item_array[2]となる。

少し複雑になりますが、$item_array[2]の中には$photosの中身が入っています。その都度確認し、どのように表示したいのかを考えながらhtmlを書いていきましょう。

例, データをforeachで回し、中身を表示している。

      $parents = '<div class="row col-md-12 mb-lg-5 ml-0">';
		foreach ($item_array[2] as $index => $v) {
		  $parents .= '<div class="container container-fluid col-md-5 mb-5">';
            $parents .= '<div class="image-box mb-3">';
              $parents .= '<img src='.$v[0].' alt="" class="d-block w-100 h-100" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">';
			$parents .= '</div>';

            $parents .= '<div class="container photo-info">';
			  $parents .= '<p class="text-white">Country / '. $v[1] .'</p>';
              $parents .= '<p class="text-white">Scale / '. $v[2] .'</p>';
              $parents .= '<p class="text-white">Impression / '. $v[3] .'</p>';
            $parents .= '</div>';
		  $parents .= '</div>';
        }
       $parents .= '</div>';
       
       return $parents;

次はページネーション番号の表示

ここが結構つまづいた所。大事なのは現在ページを取得する事、数字をクリックした時にページネーションが働くようにする事の２つです。

現在ページを取得する事は$_SERVER[‘REQUEST_URI’];で全体を取得してから必要な部分だけを使うようにしています。

そして数字をクリックした時にページネーションが働くようにするが何を言っているかと言うと、ページネーション番号が変わることを指しています。

ここで良く起きがちなのが、ページが404になってしまう、やホームページに遷移してしまうなどの現象。

これを防ぐために自分はリンクの作り方を間違えないようにすることが大事です。自分はここで上手く遷移させることが出来ずにかなり詰まりましたw

下記、例

使用するのは$item_array[1]と$item_array[3]です。言い換えると最大ページと現在のページです。$item_array[4]は全件数として使います。

　　for($i = 1; $i <= $item_array[1]; $i++){ // 最大ページ数分リンクを作成
     
     //　現在のページ番号はリンクを書かない 
     if($i == $item_array[3]) {
       $parents .= '<a tabindex="-1" class="text-light active">'.($i).'</a>';
     } else if($i != 1 && $i != $item_array[1]) {
       // 番号が最初のページと最大値以外の番号を使用するようにしている
         $parents .= '<a href="/movies/page/'.($i).'">'.($i).'</a>';
     }
    };
    
    $parents .= '<p class="text-white mt-2">All '. $item_array[4] .' items</p>';
    
    return $parents;

気おつけるのはaタグの部分。ここで他の記載にしてしまうとページ遷移が上手くいかなくなってしまいました。(自分がこの方法なだけで、他にも書き方はあるかと思います)

上記のように記載するとページネーション番号が作成され、数字をクリックした時にurlの数字だけが変化し、ページ自体は他のページに遷移しない状態かつ表示されるデータも変化している形になってると思います。

この状態まで来れたら自作のページネーションは実装できた状態と捉えて良いかと思います。