WordPressでページナビを設定する方法

WordPressには標準でいくつかのページナビ関連の関数が用意されています
ですが、デフォルトのままではデザイン的にも機能的にも物足りないことが多いです。

<?php posts_nav_link(); ?>

<?php posts_nav_link('｜', '« 次の記事', '前の記事 »'); ?>

<div class="pagination">
  <div class="prev"><?php previous_posts_link('« 前へ'); ?></div>
  <div class="next"><?php next_posts_link('次へ »'); ?></div>
</div>

<?php
the_posts_pagination( array(
  'mid_size'  => 2,
  'prev_text' => '« 前へ',
  'next_text' => '次へ »',
) );
?>

<?php
global $wp_query;
echo paginate_links( array(
  'total'   => $wp_query->max_num_pages,
  'current' => max( 1, get_query_var( 'paged' ) ),
) );
?>

<?php
if ( function_exists( 'the_posts_pagination' ) ) {
  the_posts_pagination( array(
    'mid_size'  => 1,
    'prev_text' => '« 前へ',
    'next_text' => '次へ »',
  ) );
}
?>

<?php
global $wp_query;
$big = 999999999; // 任意のユニークな数字

echo paginate_links( array(
  'base'      => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
  'format'    => '?paged=%#%',
  'current'   => max( 1, get_query_var('paged') ),
  'total'     => $wp_query->max_num_pages,
  'prev_text' => '« 前へ',
  'next_text' => '次へ »',
  'mid_size'  => 2,
  'type'      => 'list'
) );
?>

<?php
$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
$args = array(
  'post_type' => 'news',
  'posts_per_page' => 5,
  'paged' => $paged
);
$the_query = new WP_Query( $args );

if ( $the_query->have_posts() ) :
  while ( $the_query->have_posts() ) : $the_query->the_post();
    the_title('<h2>', '</h2>');
  endwhile;

  echo paginate_links( array(
    'total'   => $the_query->max_num_pages,
    'current' => $paged,
  ) );

endif;
wp_reset_postdata();
?>

.pagination {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
}

.pagination li {
  margin: 0 5px;
}

.pagination a,
.pagination span {
  display: block;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
}

.pagination a:hover {
  background: #f0f0f0;
}

.pagination .current {
  background: #0073aa;
  color: #fff;
  border-color: #0073aa;
}

1. WordPress管理画面から「プラグイン」→「新規追加」をクリック
2. 「WP-PageNavi」で検索し、インストール＆有効化
3. 管理画面の「設定」→「PageNavi」からデザインやテキストをカスタマイズ

<?php if (function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

ページナビとは、記事一覧ページなどに設定するページ移動リンクのことで、コンテンツを複数ページに分けることができます。
ページナビを設定することで、ユーザービリティ向上やGoogleのクローリング効率上昇に効果的です。

• WordPressには複数のページナビ関数があるが、the_posts_pagination()またはpaginate_links()が主流
• CSSでのカスタマイズは必須
• プラグインを使えば導入は簡単だが、カスタマイズ性は落ちる