目次
ページネーションとは
ページネーションは、ページャーやページング、ページ送りとも呼ばれ、検索結果などでページ下部によくある「次へ」や数字が並んで、そのページへ移動するためのボタンです。
ユーザーが目的のページを探しやすくするために必要不可欠なパーツですので、検索結果や記事一覧ページなどには必ず設置しましょう。
ページネーションの設置
search.phpやcategory.phpページで表示させる（固定ページではない）場合のページネーション設置方法です。
固定ページの場合はこちら
では早速ソースコードを見ていきましょう。
functions.php
function my_pagination($pages = '', $range = 2) {
$showitems = ($range * 2) + 1;
global $paged;
if(empty($paged)) {
$paged = 1;
}
if($pages == '') {
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$pages) {
$pages = 1;
}
}
if($pages != 1) {
echo '<ul class="pagination" role="menubar" aria-label="Pagination">';
if($paged > 1) {
echo '<li class="pagination-item pagination-prev"><a href="' . get_pagenum_link($paged - 1) . '"><i class="fas fa-chevron-left"></i></a></li>';
}
for($i = 1; $i <= $pages; $i++) {
if(!($i >= $paged + $range + 1 || $i <= $paged - $range - 1) || $pages <= $showitems) {
echo($paged == $i) ? '<li class="pagination-item pagination-item-current">' . $i . '</li>' : '<li class="pagination-item"><a href="' . get_pagenum_link($i) . '">' . $i . '</a></li>';
}
}
if($paged < $pages) {
echo '<li class="pagination-item pagination-item-next"><a href="' . get_pagenum_link($paged + 1) . '"><i class="fas fa-chevron-right"></i></a></li>';
}
echo '</ul>';
}
}上記コードをfunctions.phpに貼り付けてsearch.phpなどで呼び出してあげます。
呼び出し方はこんな感じ。
呼び出すところはループの外でね。
search.phpなど
<?php
my_pagination($wp_query->max_num_pages);
?>もちろんCSSで見た目を整えてあげることも必要です。
CSSのソースコードはこちらを参考にして見た目を整えてください。
style.css
.pagination {
display: flex;
justify-content: center;
}
.pagination .pagination-item {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.pagination .pagination-item:first-of-type {
border-radius: 3px 0 0 3px;
}
.pagination .pagination-item:last-of-type {
border: 1px solid #ccc;
border-radius: 0 3px 3px 0;
}
.pagination .pagination-item a {
color: #376282;
display: block;
padding: 10px 20px;
}
.pagination .pagination-item-current {
color: #fff;
background-color: #4884a8;
font-weight: bold;
padding: 10px 20px;
}ページネーションの通常バージョンまとめ
これでページネーションが表示されるようになったと思います。
もし表示されない場合は、ページネーションを設置したページが固定ページなのではないでしょうか。
固定ページは次の章でソースコードを公開しますので、そちらを参考にしてください。
固定ページでのページネーション設置
固定ページでのページネーションは基本的には通常バージョンと同じ仕組みですが、関数の引数がひとつ増えます。
なので呼び出し時には注意してくださいね。
functions.php
function my_page_pagination($args, $pages = '', $range = 2) {
$showitems = ($range * 2) + 1;
global $paged;
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
if(empty($paged)) $paged = 1;
$the_query = new WP_Query($args);
if($pages == '') {
global $wp_query;
$pages = $the_query -> max_num_pages;
if(!$pages) {
$pages = 1;
}
}
if(1 != $pages) {
echo '<ul class="pagination" role="menubar" aria-label="Pagination">';
if($paged > 1) {
echo '<li class="pagination-item pagination-prev"><a href="' . get_pagenum_link($paged - 1) . '"><i class="fas fa-chevron-left"></i></a></li>';
}
for($i = 1; $i <= $pages; $i++) {
if(!($i >= $paged + $range + 1 || $i <= $paged - $range - 1) || $pages <= $showitems) {
echo($paged == $i) ? '<li class="pagination-item pagination-item-current">' . $i . '</li>' : '<li class="pagination-item"><a href="' . get_pagenum_link($i) . '">' . $i . '</a></li>';
}
}
if($paged < $pages) {
echo '<li class="pagination-item pagination-item-next"><a href="' . get_pagenum_link($paged + 1) . '"><i class="fas fa-chevron-right"></i></a></li>';
}
echo '</ul>';
}
}page.php
引数がひとつ増えるだけですが、この引数の$argsの部分はpage.php内でループ用に設定したもの（posts_per_pageなどの設定したものが入っている変数）を指定してください。
<?php
my_page_pagination($args, $wp_query->max_num_pages);
?>style.cssについては共通なので、通常バージョンのソースコードを参考にしてください。
まとめ
search.phpなどのページでページネーションを設置するのを固定ページでそのまま流用できないので、ページネーションを設置する場合はfunctions.php内にどちらの場合も記載しておき、必要に応じて関数を呼び出して設置するのがいいかもしれませんね。
