WordPressのテーマを自作しよう！ ページネーション(ページ送り)をプラグインなしで実装する方法
Satoken
ハメカメ
サトケン
WordPressでページネーション(ページ送り)を実装する時はどのようにしておる？
まぁこんな感じの記事一覧ページで使われるような感じのページネーションじゃ。
サトケン
ハメカメ師匠。
そうですね。。
いろいろなプラグインがあるのでそれを使っています。
「WP-PageNavi」や「WP-Paginate」や「WP Page Numbers」などなど
その中でも僕のお勧めは「WP-PageNavi」で・・・・
ハメカメ
シャババババババババ・・・
シャバい。。 シャバすぎる・・・
お前は何年このWEB業界で働いておるのだ・・・・
相変わらず20万WEBパワーの弱小WEBコーダーじゃのう・・・・
サトケン
がーん・・・・！！
ハメカメ
まぁよい。
そろそろページネーションぐらい自作みぃ。
サトケン
分かりました。
一回挑戦してみます！
プラグイン利用は駄目？
いえ。
全然大丈夫です。
プラグインを利用してデザイン通りのページネーションを作成できていれば問題ないと思います。
- ※WordPressのバージョンアップに伴い不具合が出たり、動作しなくなる恐れはあります。
ですがプラグインを利用せずに、完全オリジナルでページネーションを自作できれば、
ページネーションの概念を理解できているので
- ・WordPressに限らずJavaScriptでAjax的なページネーションも実装できるようになる。
- ・自作なので細かい仕様調節も楽勝。（レスポンシブ対応、プルダウンメニュー化など）
- ・だがそろそろ自分を信じていい頃だ・・・ 今の君はもう十分 あの頃を越えているよ
的な感じで自分を信じて自作したい。。
上記の理由からプラグインを利用するのではなく勉強にもなるのでfunction.phpに関数を一つ作成してページネーションを自作します。
最大投稿数を設定する
まず、1ページにつき何件分の投稿を表示するかを決めます。
- ・WordPressの管理画面から設定する
- ・function.phpに記述して設定する
という2つの方法で設定可能です。
管理画面から設定する
WordPressの管理画面で
設定 > 表示設定 に移動して1ページに表示する最大投稿数の数値を変更する。
(下図赤枠箇所)
メリットは管理画面で変更可能な事です。
デメリットは全てのテンプレートが同じ最大投稿数になります。
function.phpで最大投稿数の設定
各テンプレート別に最大投稿数を変更する事が実現できます。
デメリットは管理画面の最大投稿数は無効になりますのでいくら管理画面の最大投稿数を変更しても反映されません。function.phpで最大投稿数の設定をしているのを忘れないようしましょう。
PHP
コピー
function change_posts_per_page($query) {
//管理画面やメインクエリに干渉しないために必須
if(is_admin() || !$query->is_main_query()){
return;
}
//検索ページ
if ($query->is_search()) {
$query->set('posts_per_page','8');
return;
}
//カテゴリーページ
if ($query->is_category()) {
$query->set('posts_per_page','10');
return;
}
//タグページ
if ($query->is_tag()) {
$query->set('posts_per_page','10');
return;
}
}
add_action('pre_get_posts','change_posts_per_page');
上記設定だと
検索ページは8件
カテゴリーページは10件
タグページは10件
となります。
これだけで最大投稿数の魔術師になる事ができますが
- ・同じ最大投稿数でよい。
- ・お客さまが最大投稿数を変更する可能性がある
上記の場合は管理画面から変更する方が直感的に操作できるのでよさそうですね。
ページネーション関数を自作
今回のページネーション一番シンプルなものにします。
1つ戻る、番号つきページ送りボタン、1つ進むと本当に最低限必要なものとします。
下記が完成図です。
function.php内にオリジナルの関数をsimple_pagination()を記述。
PHP
コピー
function simple_pagination($my_query){
//最大投稿数
$page_range = get_query_var('posts_per_page');
//該当queryの全投稿数
$fonud_posts = $my_query->found_posts;
//ページ数
$pageTotal = ceil($fonud_posts/$page_range);
//現在のページ位置
$pageIndex = get_query_var('paged') ?get_query_var('paged') :1 ;
//上記の変数を元にソースを作成
echo '<div class="cms-pager">';echo "\n";
//1つ戻る
if($pageIndex!= 1) {
echo '<div class="cms-pager__nextPrev -prev"><a href="'.get_pagenum_link($pageIndex - 1).'"><i></i><span>前へ</span></a></div>';echo "\n";
}else{
echo '<div class="cms-pager__nextPrev -prev"><div><i></i><span>前へ</span></div></div>';echo "\n";
}
echo '<nav class="cms-pager__nav">';echo "\n";
echo '<ul>';echo "\n";
//番号つきページ送りボタン
for ($i=1; $i <= $pageTotal; $i++){
$link_pagenum_link = get_pagenum_link($i);
if($pageIndex == $i) {
echo '<li><span>'.$i.'</span></li>';echo "\n";
}else{
echo '<li><a href="'.$link_pagenum_link.'">'.$i.'</a></li>';echo "\n";
}
}
echo '</ul>';echo "\n";
echo '</nav>';echo "\n";
//1つ進む
if($pageIndex!= $pageTotal) {
echo '<div class="cms-pager__nextPrev -next"><a href="'.get_pagenum_link($pageIndex + 1).'"><span>次へ</span><i></i></a></div>';echo "\n";
}else{
echo '<div class="cms-pager__nextPrev -next"><div><span>次へ</span><i></i></div></div>';echo "\n";
}
echo '</div>';echo "\n";
}
最大投稿数を取得、該当queryの全投稿数を元にページ数を算出。
あとは現在のページ位置を取得。
ここまでが共通コードとなります。
16行目から48行目は自分のHTMLコードと入れ替える必要があります。
この記述で出力されるHTMLは下記になります。
HTML
コピー
<div class="cms-pager">
<div class="cms-pager__nextPrev -prev"><div><i></i><span>前へ</span></div></div>
<nav class="cms-pager__nav">
<ul>
<li><span>1</span></li>
<li><a href="https://keprate.com/blog/page/2/">2</a></li>
<li><a href="https://keprate.com/blog/page/3/">3</a></li>
<li><a href="https://keprate.com/blog/page/4/">4</a></li>
</ul>
</nav>
<div class="cms-pager__nextPrev -next"><a href="https://keprate.com/blog/page/2/"><span>次へ</span><i></i></a></div>
</div>
あとはCSSでスタイリングすると下記画像のような見た目になります。
記事一覧ページ
あとは記事一覧ページでオリジナル関数simple_pagination()を呼び出します。
ページネーション関数の呼び出し
ページネーションを表示させたい場所にsimple_pagination()を記述します。
PHP
コピー
<?php simple_pagination($my_query);?>
$my_queryを渡します。$my_query？
WP_Query関数の設定も忘れずに
WP_Query関数に渡すパラメータを追加しなければいけません。
PHP
コピー
<?php
$page_range = get_query_var('posts_per_page');
$args = array(
'category_name' => '任意のカテゴリ名',
'orderby' => 'date',
'order' => 'DESC',
'paged' => $paged,//←追加分
'posts_per_page' => $page_range//←追加分
);
$my_query = new WP_Query($args);
?>
‘paged’ : 表示するページ番号です。
グローバル変数$pagedで大丈夫です。
‘posts_per_page’ : 最大投稿数（1ページに表示する件数）です。
get_query_var('posts_per_page');で取得します。
$my_queryはWP_Query関数にパラメータを指定し抽出されて戻ってきたオブジェクトになります。
記事一覧ページのサンプルなります。
PHP
コピー
<?php
$page_range = get_query_var('posts_per_page');
$args = array(
'category_name' => '任意のカテゴリ名',
'orderby' => 'date',
'order' => 'DESC',
'paged' => $paged,
'posts_per_page' => $page_range
);
$my_query = new WP_Query($args);
?>
<!-- ここからHTMLのサンプルになります -->
<div class="cmsThumb-items">
<?php if( $my_query -> have_posts() ) :?>
<?php while($my_query -> have_posts()) : $my_query -> the_post();?>
<?php
$blog_main_img = get_field('blog_main_img');
$blog_main_img_url = $blog_main_img['url'];
$blog_main_img_width = $blog_main_img['width'];
$blog_main_img_height = $blog_main_img['height'];
$posttags = get_the_tags();
$category = get_the_category();
$category_name = $category[0]->cat_name;
?>
<div class="cmsThumb-item">
<a href="<?php the_permalink();?>">
<div class="cmsThumb-img">
<img src="<?php echo $blog_main_img_url; ?>" width="<?php echo $blog_main_img_width; ?>" height="<?php echo $blog_main_img_height; ?>" alt="画像:<?php the_title(); ?>" loading="lazy">
</div>
<div class="cmsThumb-catTime">
<div class="cmsThumb-catTime__cat"><span><?php echo $category_name; ?></span></div>
<time datetime="<?php the_time('Y-m-d'); ?>" class="cmsThumb-catTime__time"><?php the_time('Y.m.d'); ?></time>
</div>
<ul class="cmsThumb-catTime__tag">
<?php foreach ($posttags as $tag):?>
<li><?php echo $tag->name;?></li>
<?php endforeach; ?>
</ul>
<h3 class="cmsThumb-ttl"><?php the_title(); ?></h3>
</a>
</div>
<?php endwhile;?>
<?php endif;?>
<?php wp_reset_postdata();?>
</div>
<!-- ここまでHTMLのサンプルになります -->
<?php simple_pagination($my_query);?>
まとめ
最大投稿数とは1ページにつき何件分の投稿を表示するかの数です。
WordPressの管理画面から設定する方法とfunction.phpに記述して設定する方法があります。
同じ最大投稿数でよかったり、お客さまが最大投稿数を変更する可能性がある場合はWordPressの管理画面から設定する方法の方がよさそうです。
上記のページネーション関数はシンプルな物ですがこの関数をベースにレスポンシブに対応させたりスマホはセレクトボックスに変更したりも可能です。
ハメカメ
シンプルすぎるわい。
サトケン
・・・
すみません。。
・・・
ハメカメ
ま。 最初は シンプル イズ ベスト か。
いいんじゃない。ここから拡張していこうー。
