readme.txt

WordPressで投稿記事のアーカイブをトップページからページ送り（ページネーション）する時のお話。

WordPressにはページネーション用の便利な関数 the_posts_pagination() が用意されているため、カテゴリーやタグのアーカイブページでページネーションで困ることはあまりないかと思います。

トップページに最新の投稿を数件表示させて、より以前の投稿をページネーションを利用してアーカイブページのようにページ送りできるようにするにはどうしたらよいのか。

トップページの表示設定はWordPressの管理画面より 設定 > 表示設定 のページで設定を行います。

この画像の設定はトップページに最新の投稿を表示するようにした設定です。この設定の場合、通常はグローバルな変数 $wp_query には投稿データが格納されています。つまり、have_posts() や the_post() を使用してループするもよし、最新の一つの投稿のみ表示するもよしということで、自由に表示させるコードを記述すれば良いでしょう。

例えばこの画像の通り「1ページに表示する最大投稿数」を10件としてループを使って最新の10件の投稿を表示させる場合は、11件目以降はページネーションで2ページ目以降に移動して表示させるということになります。

ページネーションを表示する方法はいろいろありますが、最も簡単だと思われる方法は the_posts_pagination() を使用する方法ではないでしょうか。
次のコードは一般的な投稿リストの表示ループとページネーションを表示するためのコードです。

　※HTMLのタグやクラスは一例です。別途CSSの設定は必須ですので合わせてタグやクラス名は適時、書き換えてください。

　※関数 the_posts_pagination() の引数についてはこのページ下部に表示のWordPress公式のドキュメントを読み、適時指定してください。

<h2>最新の投稿</h2>
<?php if (have_posts()) : ?>
    <ul>
    <?php while (have_posts()) : the_post(); ?>
        <li>
            <?php the_post_thumbnail('thumbnail'); ?>
            <a href="<?php the_permalink(); ?>"><span class="title"><?php the_title(); ?></span></a>
            <span class="date"><?php the_time('Y.m.d'); ?></span>
            <p class="excerpt"><?php the_excerpt(); ?></p>
        </li>
    <?php endwhile; ?>
    </ul>
    <?php the_posts_pagination(); // ページネーションを表示するためのWordPressの関数 ?>
<?php else : ?>
    <p>まだ投稿はありません。</p>
<?php endif; ?>

次に固定ページをトップページに設定した場合について考えてみます。

表示設定にてこちらの画像のように設定すると特定の固定ページをトップページに設定できます。この例では front-page というスラッグの付けられた固定ページをトップページに設定してます。

この設定の場合、グローバルな変数 $wp_query には固定ページのページデータが格納されています。つまり、front-page という固定ページのデータのみが $wp_query として取得されていますので、そのままでは have_posts() や the_post() を使用して投稿データのループを実行することはできません。

まず、投稿データを $wp_query （あるいは別の変数）にする取得する必要があります。

投稿データを取得した後は、トップページに最新の投稿を設定した場合と同様にループを利用して投稿を表示させます。（デフォルトでは投稿日時の新しいものから古いものへという順番になります。）

次のコードは大きく三つのブロックで構成した例です。

<?php
// トップページに固定ページを設定した場合、トップページでは is_home() は false、is_front_page() は true となります
if (!is_home() && is_front_page()) {
    // 固定ページでは the_posts_pagination() で使用されるグローバル変数 $paged にページ数が入らないためセットします
    $paged = get_query_var('page') ?: 1;
    // WP_Query() に対する引数は他にも設定できますので用途に合わせて設定します
    $args = [
        'post_type' => 'post',
        'posts_per_page' => get_option('posts_per_page'),
        'paged' => $paged,
    ];
    $wp_query = new WP_Query($args);
}
?>

<h2>最新の投稿</h2>
<?php if (have_posts()) : ?>
    <ul>
    <?php while (have_posts()) : the_post(); ?>
        <li>
            <?php the_post_thumbnail('thumbnail'); ?>
            <a href="<?php the_permalink(); ?>"><span class="title"><?php the_title(); ?></span></a>
            <span class="date"><?php the_time('Y.m.d'); ?></span>
            <p class="excerpt"><?php the_excerpt(); ?></p>
        </li>
    <?php endwhile; ?>
    </ul>
    <?php the_posts_pagination(); // ページネーションを表示するためのWordPressの関数 ?>
<?php else : ?>
    <p>まだ投稿はありません。</p>
<?php endif; ?>
<?php wp_reset_query(); // $wp_query を固定ページのデータにリセット ?>

<?php if (!is_home() && is_front_page() && get_query_var('paged') < 2) : // ページネーションで2ページ目以降は固定ページのデータは表示しない ?>
<article>
<h2 class="title"><?php the_title(); ?></h2>
<span class="date"><?php the_time('Y.m.d'); ?></span>
</header>
<article>
<?php the_post_thumbnail('medium'); ?>
<?php the_content(); ?>
</article>
<?php endif; ?>

はじめのブロック（1-14行目）では投稿データを取得・設定しています。
次のブロック（16-32行目）では投稿データをループで表示した後にページネーションを表示しています。
最後のブロック（34-43行目）では固定ページの登録データを表示しています。

トップページを固定ページに設定した場合には、最新の投稿を表示したブロックの先頭や末尾にアーカイブページへのリンクを設置したりすることにより、ページネーションを有効にすることはあまりないかもしれませんが、5行目の部分を追記することで固定ページのトップページから最新の投稿などのページ送りを有効にすることは可能です。

　※HTMLのタグやクラスは一例です。別途CSSの設定は必須ですので合わせてタグやクラス名は適時、書き換えてください。

　※この例ではページ送りで2ページ目以降の投稿リストを表示した場合は、固定ページに登録されているデータは表示されないようにしています。

　※固定ページのデータをページの先頭に表示させたい場合は、最後のブロックを先頭に記述します。

　※固定ページのデータをどのように表示するか次第ですが、wp_reset_query() は必要に応じてループ処理の後に記述します。

　※関数 the_posts_pagination() の引数についてはこのページ下部に表示のWordPress公式のドキュメントを読み、適時指定してください。

上記のコードを記述するテーマファイルは index.php、page,php、home.php、front-page.php などテーマファイルの構成次第でいくつか考えられますが、トップページの設定を「最新の投稿を表示」する設定にした場合も「固定ページを表示」する設定にした場合も front-page.php が使用されるのでテストする際は front-page.php を利用するとわかりやすいかと思います。