投稿ページ(シングルページ)にページャー(ページネーション)を実装
WordPress(ワードプレス)の投稿ページに、同じカテゴリーに属している記事へのページャー(ページネーション)を実装したい場面がありました。
実装したいのは、このようなページャーです。↓
(画像は5ページ目を開いている時の表示例)
同じカテゴリーに入っている記事がページャーに並ぶ形になります。
開いている記事のカテゴリーを取得し、そのカテゴリーの投稿数を取得。
それらをアーカイブページと同じようなページャーの形で出力しています。
両端に「前へ(≪)」「次へ(≫)」のリンクがあり、
その内側に最初のページと最後のページがあります。
「前へ」「次へ」だけなら簡単なのですが、ページ数を出すのは少しカスタマイズが必要になります。
コード
<?php
$cat = get_the_category();
$cat_id = $cat[0]->cat_ID;
$post_id = get_the_ID(); // 現在の投稿IDを取得
// 投稿記事のカテゴリ内で新着から何番目かを確認
$args = array( 'posts_per_page' => -1, 'category' => $cat_id, 'orderby' => 'date', 'order' => 'ASC' );
$posts = get_posts( $args );
$posts_ids = array();
if($posts){
echo '<ul class="pager">';
foreach ( $posts as $post ) {
$posts_ids[] += $post->ID;
}
$next_number = 2; //現在のページの前後のリンク数
$post_current = array_search($post_id, $posts_ids); // 現在の記事番号(順番)を取得
$post_last = count($posts_ids); // 同じカテゴリー内の記事数
$pagination = $next_number * 2 + 1;
$post_prev = $post_current – $next_number;
$post_next = $post_current + $next_number + 1;
if( $post_prev < 0 ){
$post_prev = 0;
}
if( $post_next > $post_last ){
$post_next = $post_last;
}
wp_reset_postdata();
// 「前へ」リンクの設定
if( $post_current != 0 ) {
previous_post_link('<span class="page-numbers">%link</span>','«',true);
}
// 記事数が最大数以上ある場合
// 例)最大数が5個で、記事が5個以上ある場合
if($post_last > $pagination) {
//離れても1ページを出す
if( $post_current > $next_number ) {
echo '<a class="page-numbers" href="'.get_permalink($posts_ids[0]).'">1</a>';
}
//省略…
if( $post_current > $next_number + 1 ) {
echo '<span class="page-numbers dots">…</span>';
}
for ($i=$post_prev; $i < $post_next; $i++) {
if ($i == $post_current) {
// 現在のページ
echo '<span class="page-numbers current">'.($i+1).'</span>';
} else {
// その他のページ
echo '<a class="page-numbers" href="'.get_permalink($posts_ids[$i]).'">'.($i+1).'</a>';
}
}
//省略…
if( $post_current < $post_last - $next_number - 2 ) {
echo '<span class="page-numbers dots">…</span>';
}
//離れても最後のページを出す
if( $post_current < $post_last - $next_number -1 ) {
echo '<a class="page-numbers" href="'.get_permalink($posts_ids[($post_last - 1)]).'">'.$post_last.'</a>';
}
} // ここまで / 記事数が最大数以上ある場合
// 記事数が最大数未満の場合
else {
for ($i=0; $i < $post_last; $i++) {
if ($i == $post_current) {
// 現在のページ
echo '<span class="page-numbers current">'.($i+1).'</span>';
} else {
// その他のページ
echo '<a class="page-numbers" href="'.get_permalink($posts_ids[$i]).'">'.($i+1).'</a>';
}
}
} // ここまで / 記事数が最大数未満の場合
// 「次へ(古い記事へ)」リンクの設定
if ( $pagination != 2 && $post_current != $post_last – 1 ) {
next_post_link('<span class="page-numbers">%link</span>','»',true);
}
echo '</ul>';
}
?>
このコードでは、投稿の古い順にならんでいます。
(1ページ目が一番古い記事。10ページ目が一番新しい記事。)
順番を逆にしたい場合は、10行目の'order' => 'ASC'
を'order' => 'DESC'
に変更してください。
$args = array( 'posts_per_page' => -1, 'category' => $cat_id, 'orderby' => 'date', 'order' => 'ASC' );
現在のページの前後に何個ずつ表示するかは、21行目の$next_number = 2;
で設定してるので、適宜調整してください。
この設定では、現在(5ページ目)の両側に2つずつページ番号があります。
$next_number = 2; //現在のページの前後のリンク数
CSSは適宜調整してください!