プラグインを使わずにWordPressにページネーションを実装する方法

/** * カスタマイズ可能なページネーションを出力する関数 * @param WP_Query $query WP_Queryオブジェクト (オプション) */
function my_custom_pagination( $query = null ) { // $queryが指定されていない場合は、グローバルな$wp_queryを使用 if ( $query === null ) { global $wp_query; $query = $wp_query; } // ページ数が1以下の場合は何も出力しない if ( $query->max_num_pages <= 1 ) { return; } // paginate_linksの引数を設定 $links = paginate_links( array( 'base' => get_pagenum_link(1) . '%_%', 'format' => get_option('permalink_structure') ? 'page/%#%/' : '&paged=%#%', 'current' => max( 1, get_query_var('paged') ), 'total' => $query->max_num_pages, 'prev_text' => '«', 'next_text' => '»', 'type' => 'array', // ★重要：リンクを配列として取得する 'mid_size' => 2, // 現在のページの両側に表示するページ数 'end_size' => 1, // 先頭と末尾に表示するページ数 ) ); // リンクが生成された場合のみHTMLを出力 if ( ! empty( $links ) ) { echo '<ul class="pagination">'; foreach ( $links as $link ) { // 現在のページ番号には 'current' クラスが含まれる if ( strpos( $link, 'current' ) !== false ) { // <span>タグを<li>で囲み、Bootstrap用のクラスを付与 echo '<li class="page-item active" aria-current="page">' . str_replace( 'page-numbers', 'page-link', $link ) . '</li>'; } elseif ( strpos( $link, 'dots' ) !== false ) { // 「...」(三点リーダー) にはクリックできないようにクラスを付与 echo '<li class="page-item disabled">' . str_replace( 'page-numbers', 'page-link', $link ) . '</li>'; } else { // 通常のページリンク echo '<li class="page-item">' . str_replace( 'page-numbers', 'page-link', $link ) . '</li>'; } } echo '</ul>'; }
}

<?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <?php // 記事のタイトルなどを表示 ?> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <?php endwhile; ?> <?php // ここにページネーションを呼び出す ?> <nav class="pagination-wrapper"> <?php my_custom_pagination(); ?> </nav><?php else : ?> <p>記事が見つかりませんでした。</p><?php endif; ?>

<?php
$paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
$args = array( 'post_type' => 'news', // カスタム投稿タイプ名 'posts_per_page' => 5, // 1ページあたりの表示件数 'paged' => $paged,
);
$news_query = new WP_Query( $args );
if ( $news_query->have_posts() ) : while ( $news_query->have_posts() ) : $news_query->the_post(); // 投稿タイトルなどを表示 the_title( '<h2>', '</h2>' ); endwhile; // ★作成したクエリを引数に渡す my_custom_pagination( $news_query ); wp_reset_postdata(); // クエリをリセット
endif;
?>

/* ページネーション全体のコンテナ */
.pagination { display: flex; padding-left: 0; list-style: none; border-radius: 0.25rem;
}
/* 各ページリンクのスタイル */
.page-link { position: relative; display: block; padding: 0.5rem 0.75rem; margin-left: -1px; line-height: 1.25; color: #007bff; background-color: #fff; border: 1px solid #dee2e6; text-decoration: none;
}
.page-link:hover { color: #0056b3; background-color: #e9ecef; border-color: #dee2e6;
}
/* アクティブ（現在）のページ */
.page-item.active .page-link { z-index: 1; color: #fff; background-color: #007bff; border-color: #007bff;
}
/* 無効化された（クリックできない）リンク */
.page-item.disabled .page-link { color: #6c757d; pointer-events: none; background-color: #fff; border-color: #dee2e6;
}
/* 角丸の調整 */
.page-item:first-child .page-link { margin-left: 0; border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem;
}
.page-item:last-child .page-link { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem;
}