もっともっと、もっと先へ。株式会社アットワークMore and more,
further and further.

普段実務で固定ページを記事の一覧ページにすることがないのですが、今回、カスタム投稿と別にする必要性があり、お知らせの一覧ページを固定ページにする要件となりました。
固定ページは通常、pagedクエリ変数が機能しないため、pageをpagedに変換するフックが必要で、function.phpにもフックを記述しなければならず、すこし工夫が必要ですので、ここで解説します。

ポイントとしては

• new WP_Query を使う。これは、固定ページのメインループは投稿を取得しないため、WP_Queryで独自クエリを発行します。
• wp_pagenavi( array( ‘query’ => $the_query ) )
  第2引数にカスタムクエリを渡さないと、グローバルの $wp_query（固定ページ本体）を参照してしまい、ページャーが正しく動作しません。
• wp_reset_postdata()
  WP_Queryのループ後は必ず呼び出し、グローバルの$post を元に戻します。

page-news.php（固定ページ）

<?php
/**
 * Template Name: 投稿一覧ページ
 *
 * WP-pageNavi を使用したページネーション付き投稿一覧テンプレート
 */

get_header(); ?>
<main class="site-main">
  <div class="container">
  
    <?php
    // ページ番号を取得（クエリ変数 'paged' または 'page'）
    $paged = get_query_var('paged') ? get_query_var('paged') : 1;

    // 投稿一覧クエリ
    $args = array(
      'post_type'      => 'post',        // 投稿タイプ（post = 通常投稿）
      'post_status'    => 'publish',
      'posts_per_page' => 10,            // 1ページあたりの件数
      'paged'          => $paged,
      'orderby'        => 'date',
      'order'          => 'DESC',
    );

    $the_query = new WP_Query( $args );
    ?>
    <h1 class="page-title"><?php the_title(); ?></h1>
    <?php if ( $the_query->have_posts() ) : ?>
      <ul class="post-list">
        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
          <li class="post-item">
            <article>
              <time datetime="<?php echo get_the_date('Y-m-d'); ?>">
                <?php echo get_the_date(); ?>
              </time>
              <h2 class="post-item__title">
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
              </h2>
              <div class="post-item__excerpt">
                <?php the_excerpt(); ?>
              </div>
            </article>
          </li>
        <?php endwhile; ?>
      </ul>
      <?php
      // ▼ WP-pageNavi によるページャー出力
      // $the_query を第2引数に渡すことでカスタムクエリに対応
      if ( function_exists('wp_pagenavi') ) {
        wp_pagenavi( array( 'query' => $the_query ) );
      }
      ?>
    <?php else : ?>
      <p>投稿が見つかりませんでした。</p>
    <?php endif;
    // WP_Query 使用後は必ずリセット
    wp_reset_postdata();
    ?>
  </div>
</main>
<?php get_footer(); ?>

functions.php に追記

固定ページは通常、pagedクエリ変数が機能しないため、pageをpagedに変換するフックが必要です。

 /**
 * 固定ページで WP_Query のページネーションを有効にする
 * （固定ページは ?paged= ではなく /page/2/ 形式になるため）
 */
add_action( 'pre_get_posts', function( $query ) {
    // フロントエンドのメインクエリのみ対象
    if ( ! is_admin() && $query->is_main_query() && is_page() ) {
        $page = get_query_var('page');
        if ( $page ) {
            set_query_var( 'paged', $page );
        }
    }
});

スタイルシートによる装飾

WP-pageNaviプラグインはスタイルシートで見た目をオリジナルに変更できます。
今回の案件では、次のようなスタイルにしました。

/* ページネーション */
.wp-pagenavi { width: 100%; text-align: center; font-size: 1.6rem;}
.wp-pagenavi .pages { display: none;}
.wp-pagenavi .previouspostslink, .wp-pagenavi .nextpostslink { border: none; color: #fff; padding: 10px 12px; margin: 0 12px; background: #0073b5; border-radius: 6px;}
.wp-pagenavi .page { border: none; color: #fff; padding: 10px 12px; margin: 0 6px; background: #0073b5; border-radius: 6px;}
.wp-pagenavi .current { border: none; color: #fff; padding: 10px 12px; margin: 0 6px; background: #ccc; border-radius: 6px;}