【WordPress】プラグインを使わずにページャーを実装

プラグインを使うと簡単にページャーを装備できますがイマイチ使い勝手が悪い。プラグインをなるべく使いたくないと思う方もいるかもしれないので実装方法を忘れないように自分用にも覚書きしておく。

■function.php

function pagination( $pages, $paged, $range = 2, $show_only = false ) {
$pages = ( int ) $pages;
$paged = $paged ?: 1;

//表示テキスト
$text_first = "« 最初へ";
$text_before = "‹ 前へ";
$text_next = "次へ ›";
$text_last = "最後へ »";

if ( $show_only && $pages === 1 ) {
// １ページのみで表示設定が true の時
echo '<div class="pagination"><span class="current pager">1</span></div>';
return;
}

if ( $pages === 1 ) return; // １ページのみで表示設定もない場合
if ( 1 !== $pages ) {
//２ページ以上の時
echo '<div class="pagination"><span class="page_num">Page ', $paged ,' of ', $pages ,'</span>';
if ( $paged > $range + 1 ) {
// 「最初へ」 の表示
echo '<a href="', get_pagenum_link(1) ,'" class="first">', $text_first ,'</a>';
}
if ( $paged > 1 ) {
// 「前へ」 の表示
echo '<a href="', get_pagenum_link( $paged - 1 ) ,'" class="prev">', $text_before ,'</a>';
}
for ( $i = 1; $i <= $pages; $i++ ) {

if ( $i <= $paged + $range && $i >= $paged - $range ) {
// $paged +- $range 以内であればページ番号を出力
if ( $paged === $i ) {
echo '<span class="current pager">', $i ,'</span>';
} else {
echo '<a href="', get_pagenum_link( $i ) ,'" class="pager">', $i ,'</a>';
}
}
}
if ( $paged < $pages ) {
// 「次へ」 の表示
echo '<a href="', get_pagenum_link( $paged + 1 ) ,'" class="next">', $text_next ,'</a>';
}
if ( $paged + $range < $pages ) {
// 「最後へ」 の表示
echo '<a href="', get_pagenum_link( $pages ) ,'" class="last">', $text_last ,'</a>';
}
echo '</div>';
}
}

■SCSS

.pagination {
display: flex;
align-items: center;
justify-content: center;
margin: 40px 0;
position: relative;
font-size: 13px;
span, a {
display: block;
width: auto;
margin: 4px;
padding: 8px;
border: 1px solid #000;
background-color: #fff;
text-decoration: none;
text-align: center;
line-height: 16px;
}
.pager {
width: 32px;
}
a:hover, .current {
color: #fff;
border-color: #000;
background-color: #000;
}
a {
&.prev {
margin-right: 16px;
}
&.next {
margin-left: 16px;
}
&.first, &.last {
font-weight: 100;
}
}
span.page_num {
display: none;
}
}

■PHP

<div class="">
<?php
$query = new WP_Query(Array(
'post_type' => 'post',
'orderby' => 'date'
'order' => 'DESC',
'showposts' => 24,
'paged' => get_query_var('paged')
)
);
if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post();
?>

////loop内容////

<?php endwhile; ?>
<?php endif; ?>
<?php
/* ページャーの表示 */
if ( function_exists( 'pagination' ) ) :
pagination( $query->max_num_pages, get_query_var( 'paged' ) ); //$wp_query ではなく $query なことに注意！
endif;
?>

<?php wp_reset_query(); ?>
</div>