まずは忙しい人のために、コードだけ
functions.php
function pagination( $pages, $paged, $range = 3, $show_only = false ) {
$pages = ( int ) $pages;
$paged = $paged ?: 1;
$text_first = "<<";
$text_before = "<";
$text_next = ">";
$text_last = ">>";
if ( $show_only && $pages === 1 ) {
echo '<div class="pagination"><span class="current pager">1</span></div>';
return;
}
if ( $pages === 1 ) return; // 1ページのみで表示設定もない場合
if ( 1 !== $pages ) {
//2ページ以上の時
echo '<div class="pagination">';
// 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>';
}
}
archive.php
記事一覧を出力している中でループが終わった後に、ページャーを表示したい部分に
if ( function_exists( 'pagination' ) ) :
pagination( $wp_query->max_num_pages, get_query_var( 'paged' ) );
endif;
をコピペ。
ついでにcssも
style.css
.pagination{
width: 100%;
display: flex;
flex-wrap: wrap;
padding: 24px;
}
.pagination span{
margin: auto;
}
.pagination a{
margin: auto;
}
はい完成。
こちらのサイトを参考に作成しました。
スタイルを当てるとこんな感じになります。
解説
引数は4つ渡せるようになっています。
- $pages:全ページ数。(呼び出し側で
$wp_query->max_num_pages
を使う) - $paged:現在のページ番号。(呼び出し側で
get_query_var('paged')
を使う) - $range:「現在のページ」から左右に表示させるページ数。初期値は
2
。 - $show_only:全ページ数が1ページしかない時にページャーを表示するかどうか。初期値は
false
。
$rangeと$show_onlyが少しわかりづらかったのでまとめておきます。
$rangeは、2だと
こうなります。両サイドに2つ並びます。
1だと、
こうなります。表示されない数字があると一番最初に戻る、一番最後に行くが出てきます。
モバイルのことを考えると、デフォルトの2のままで良いと思います。
$show_onlyは1ページの最大表示数が10だった時に6記事しかなかったらページャーを表示させるかどうかということです。僕はいらないと思うのでfalseにしています。何かページャーを意識して表示させる理由があるのならtrueにしましょう。
これだけでプラグインをひつ減らすことができました。やった。