WordPress固定ページにページネーションと投稿一覧を設置する方法

現在フリーのweb制作者として活動しているしょーご（@samuraibrass）です。

WordPressの固定ページにページネーションを表示する方法をコピペでできるように、解説していきます。

しょーごログさんの参考記事 90分彷徨ってこの記事を見つけ、この通りやったら本当に3分でできた笑

しょーごさん@samuraibrass のブログ見ながらやったら意外とあっさり固定ページのページネーションできた！
ありがとうございました🙏✨

固定ページに投稿一覧とページネーションを設置する、3分で – しょーごログ https://t.co/ME7eclYyBm @samuraibrassより
— はるか@WEBデザイナー (@rururuka_run) October 8, 2021

さっそく実装していきましょう。

しょーご

この記事を書いたのは
しょーご（@samurabrass）

当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。

＼現役エンジニアのレビュー付き／

実践レベルのコーディング課題公開中

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】 — 販売ページはこちら

デザインカンプからのコーディングを経験したい
現役エンジニアのレビューを受けてみたい
即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています！

コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。

Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！

＼無料の入門編から本格企業サイトまで／

ひとまず課題を見てみる

なぜWordPress固定ページではページネーションが出せないのか
固定ページでページネーションするコード
- 全体の流れ
固定ページ-ページネーションの詳細解説
実績一覧や商品一覧によく使う
実案件レベルのWordPress課題を出しています

なぜWordPress固定ページではページネーションが出せないのか

WordPressの固定ページで標準のページネーション機能（the_posts_pagination()）が使えない理由は、この関数がブログ投稿やアーカイブページ用に設計されているためです。

固定ページは通常、単一のコンテンツを表示するためのものであり、複数の投稿をリストアップするものではありません。

固定ページでページネーションを実装する方法はいくつかあります。

カスタムクエリを使用する：固定ページ内でカスタムクエリを作成し、そのクエリに基づいてページネーションを実装することができます。
プラグインを使用する：固定ページ内でページネーションを可能にするプラグインがいくつか存在します。
コンテンツを分割する： WordPressの「続きを読む」タグ（<!–nextpage–>）を使用して、長いコンテンツを複数のページに分割することができます。
カスタム関数を作成する：固定ページ用のカスタムページネーション関数を作成することも可能です。

今回はこの中で一番万能な、「❶カスタムクエリを使用する」を取り上げます。

固定ページでページネーションするコード

とりあえずコードだけコピペしたい方は以下をどうぞ。

<?php
 $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
 $the_query = new WP_Query( array(
     'post_status' => 'publish',
     'paged' => $paged,
     'posts_per_page' => 5, // 表示件数
     'orderby'     => 'date',
     'order' => 'DESC'
 ) );
  
  
 if ($the_query->have_posts()) :?><?php
    while ($the_query->have_posts()) : $the_query->the_post();?>
//コンテンツ
<?php　endwhile;?><?php endif; ?>
<!-- pagenation -->
<div class="pagenation">
<?php 
if ($the_query->max_num_pages > 1) {
    echo paginate_links(array(
        'base' => get_pagenum_link(1) . '%_%',
        'format' => 'page/%#%/',
        'current' => max(1, $paged),
        'mid_size' => 1,
        'total' => $the_query->max_num_pages
    ));
}
wp_reset_postdata();?>
</div><!-- /pagenation -->

全体の流れ

現在のページ番号を取得し、クエリを設定
投稿が存在する場合にループで投稿を表示
複数ページが存在する場合にページネーションを表示
クエリ後にグローバルな投稿データをリセット

このようにして、固定ページで複数の投稿を表示し、ページネーションを実現します。

固定ページ-ページネーションの詳細解説

詳しくコードを解説します。

❶クエリの設定

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$the_query = new WP_Query( array(
    'post_status' => 'publish',
    'paged' => $paged,
    'posts_per_page' => 5, // 表示件数
    'orderby' => 'date',
    'order' => 'DESC'
));

$paged：現在のページ番号を取得します。get_query_var(‘paged’) は現在のページ番号を取得し、指定がなければ1ページ目をデフォルトにします。
WP_Query：カスタムクエリを作成します。ここでは公開されている投稿（post_statusがpublish）を、1ページに5件ずつ（posts_per_pageが5）、日付で降順（orderbyがdate、orderがDESC）に並べて取得します。

❷投稿の表示

if ($the_query->have_posts()) :
    while ($the_query->have_posts()) : $the_query->the_post();
        // コンテンツ
    endwhile;
endif;

if ($the_query->have_posts())：投稿が存在する場合にループを開始します。
while ($the_query->have_posts()) : $the_query->the_post();：投稿を1つずつ取得して表示します。ここに表示するコンテンツを記述します。

❸ページネーションの設定

<div class="pagenation">
<?php 
if ($the_query->max_num_pages > 1) {
    echo paginate_links(array(
        'base' => get_pagenum_link(1) . '%_%',
        'format' => 'page/%#%/',
        'current' => max(1, $paged),
        'mid_size' => 1,
        'total' => $the_query->max_num_pages
    ));
}
wp_reset_postdata();
?>
</div>

if ($the_query->max_num_pages > 1)：複数のページがある場合にページネーションを表示します。
paginate_links：ページネーションリンクを生成します。

‘base’ => get_pagenum_link(1) . ‘%_%’：ページ番号のベースURLを設定します。
‘format’ => ‘page/%#%/’：ページ番号のフォーマットを設定します。
‘current’ => max(1, $paged)：現在のページ番号を設定します。
‘mid_size’ => 1：現在のページ番号の前後に表示するページ番号の数を設定します。
‘total’ => $the_query->max_num_pages：総ページ数を設定します。

wp_reset_postdata()：カスタムクエリの後にグローバルな投稿データをリセットします。

固定ページはサブループをWP_Queryで回す

foreachで回しても良いですが、ページネーションならこっちの方が都合がいいし、個人的にWP_Queryは使い勝手がよくて好きなので…

サブループ内のキーと値は、公式リファレンスを参考にお好みで。

最新順に、5つ表示になってます。

paginate_links ページネーション内処理まとめ

paginate_linksのキーと値の設定を以下にまとめました。

キー	値の説明	サンプル値
`base`	ページ番号のベースURLを設定します。`get_pagenum_link(1)`に`%_%`を追加することでページリンクのベースを作成します。	`get_pagenum_link(1) . '%_%'`
`format`	ページ番号のフォーマットを指定します。`%#%`がページ番号に置き換えられます。	`'page/%#%/'`
`current`	現在のページ番号を設定します。`max(1, $paged)`は、最小値が1となるようにします。	`max(1, $paged)`
`mid_size`	現在のページ番号の前後に表示するページ番号の数を設定します。	`1`
`total`	総ページ数を設定します。	`$the_query->max_num_pages`
`prev_text`	前のページリンクに表示するテキストを設定します。省略可能です。	`'« Previous'`
`next_text`	次のページリンクに表示するテキストを設定します。省略可能です。	`'Next »'`
`end_size`	最初と最後に表示するページ番号の数を設定します。省略可能です。	`1`
`show_all`	`true`に設定すると全てのページ番号を表示します。省略可能です。	`false`
`type`	ページネーションの戻り値の形式を指定します。省略可能です。`plain`（デフォルト）、`array`、`list`が使用できます。	`'plain'`
`add_args`	ページ番号リンクに追加するクエリ引数を設定します。省略可能です。	`array('foo' => 'bar')`
`add_fragment`	ページ番号リンクに追加するフラグメント（#以下の部分）を設定します。省略可能です。	`'#content'`