インソースマーケティングデザイン
2019.10.25 コーディング
WordPressのアーカイブページ用のページネーションを自作してみる
マリンロードスタッフブログをご覧いただいている皆様、こんにちは。
フロントエンドエンジニアの虎澤です。
WordPressでのサイト組み込みをする際、いつも頭を悩ますのがアーカイブのページネーションだったりします。
サイトによってデザインが変わってくるし、デザインが変わると組み込み側も出力する内容を調整しないといけないからです。
そこで最近、ページネーションのベースデザインは固定しようという流れがでてきました。
そういうことであれば、組み込み側もベースを作ってしまえばこれに係る工数は削減できるはず！
プラグインに頼ろうとすると拡張性が乏しいので、今回自作してみることにしました。
■表示側
$args = array(
’wrapper_class’ => ‘g_pager’,
’wrapper_add_class’ => array(‘l_flex’, ‘l_justifyContentCenter’, ‘mt_30′),
’class’ => ‘g_pager_li’,
’add_class’ => array(),
’prev’ => ”,
’next’ => ”,
);
mr_the_archive_pager($args);
?>
以下各引数について解説。
・「wrapper_class」：ulタグに付与するクラス名。空の場合「g_pager」がクラス名として付与される。
・「wrapper_add_class」：ulタグにクラス名を複数付与したい場合配列で入れる。初期値はnull。
・「class」：liタグに付与するクラス名。空の場合「g_pager_li」がクラス名として付与される。
・「add_class」：liタグにクラス名を複数付与したい場合配列で入れる。初期値はnull。
・「prev」：「前へ戻る」ボタンの中身を設定。初期値はSVGアイコン。HTMLタグは挿入不可。
・「next」：「次へ進む」ボタンの中身を設定。初期値はSVGアイコン。HTMLタグは挿入不可。
■処理側
//ラッパークラス名設定
if(!empty($args[‘wrapper_class’])){
$wrapper_class = sanitize_text_field($args[‘wrapper_class’]);
}else{
$wrapper_class = “g_pager”;
}
//追加のラッパークラス名設定
if(!empty($args[‘wrapper_add_class’])){
foreach($args[‘wrapper_add_class’] as $key => $val){
$val = sanitize_text_field($val);
$wrapper_add_class = “{$wrapper_add_class} {$val}”;
}
}else{
$wrapper_add_class = “”;
}
//要素クラス名設定
if(!empty($args[‘class’])){
$items_class = sanitize_text_field($args[‘class’]);
}else{
$items_class = “g_pager_li”;
}
//追加の要素クラス名設定
if(!empty($args[‘add_class’])){
foreach($args[‘add_class’] as $key => $val){
$val = sanitize_text_field($val);
$items_add_class = “{$items_add_class} {$val}”;
}
}else{
$items_add_class = “”;
}
//前へ戻る設定
if(!empty($args[‘prev’])){
$prev = sanitize_text_field($args[‘prev’]);
}else{
$prev = ‘<svg width=”10.771″ height=”10.543″ viewBox=”0 0 10.771 10.543″><g fill=”none” stroke=”#fff” stroke-linecap=”round” stroke-linejoin=”round”><path d=”M10.064 9.839L5.5 5.275 10.064.711M5.064 9.839L.5 5.275 5.064.711″/></g></svg>’;
}
//次に進む設定
if(!empty($args[‘next’])){
$next = sanitize_text_field($args[‘next’]);
}else{
$next = ‘<svg width=”10.771″ height=”10.543″ viewBox=”0 0 10.771 10.543″><g fill=”none” stroke=”#fff” stroke-linecap=”round” stroke-linejoin=”round”><path data-name=”パス 135″ d=”M.707 9.836l4.564-4.565L.707.707″/><path data-name=”パス 4001″ d=”M5.707 9.836l4.564-4.565L5.707.707″/></g></svg>’;
}
//現在のページ数の設定
if(get_query_var(‘paged’)) {
$current_page = get_query_var(‘paged’);
}else{
$current_page = 1;
}
//現在のターム（カテゴリ）の記事総数、最大表示件数、総ページ数、設定
$post_type = get_post_type();
if(is_tax()){
$post_count = get_queried_object()->count;
$current_url = get_term_link(get_queried_object()->slug, get_queried_object()->taxonomy);
}else{
$post_count = wp_count_posts($post_type)->publish;
$current_url = get_post_type_archive_link($post_type);
}
$page_limit = get_option(‘posts_per_page’);
$max_page = (int)ceil($post_count / $page_limit);
//投稿数が最大表示件数を上回る場合のみページネーション表示
if($post_count > $page_limit){
echo(“<ul class=”{$wrapper_class}{$wrapper_add_class}”>”);
//カレントページ数が2以上のとき
if($current_page > 1){
//最初のページ
echo(“<li class=”{$items_class}{$items_add_class}”><a href=”{$current_url}”>{$prev}</a></li>”);
//最後のページの時、さらにその前のページも表示
if($current_page === $max_page){
$page_num = $current_page-2;
echo(“<li class=”{$items_class}{$items_add_class}”><a href=”{$current_url}page/{$page_num}”>{$page_num}</a></li>”);
}
//前のページ
$page_num = $current_page-1;
echo(“<li class=”{$items_class}{$items_add_class}”><a href=”{$current_url}page/{$page_num}”>{$page_num}</a></li>”);
}
//カレントページ
echo(“<li class=”{$items_class}{$items_add_class} current”><a href=”#”>{$current_page}</a></li>”);
//カレントページ数より最大ページ数が大きいとき
if($current_page < $max_page){
$page_num = $current_page;
$page_num++;
//次のページ
echo(“<li class=”{$items_class}{$items_add_class}”><a href=”{$current_url}page/{$page_num}”>{$page_num}</a></li>”);
//1ページ目の時、さらにその次のページも表示
if($current_page === 1){
$page_num++;
echo(“<li class=”{$items_class}{$items_add_class}”><a href=”{$current_url}page/{$page_num}”>{$page_num}</a></li>”);
}
//最後のページ
echo(“<li class=”{$items_class}{$items_add_class}”><a href=”{$current_url}page/{$max_page}”>{$next}</a></li>”);
}
echo(‘</ul>’);
}else{
return $post_count;
}
}
引数に値が入っていればそちらを反映し、なければ初期値で設定していきます。
あとはページ種別、1ページあたりの最大表示件数として設定されている値などを取ってきて計算し、出力する流れです。
このページネーション用関数の仕様は「現在のページの前後1ページと、最初と最後のページへのリンクを出力する」となります。
デザインも概ね決め打ちとなるため、割と簡単な関数に仕上がってます。
■見た目サンプル
・ページ数が膨大になるとページネーションも増えて、カラム落ちしてしまう
・オリジナルのページネーションにしたいけどプラグインでの実装は限界がある
とかいう場合にこの関数は使えるかと思います。
以上、虎澤でした。
