ページネーションは、一覧ページで使います!
今回、ページネーションを部品化使用をとしたところ、現在のページなどの受け渡しがうまくいかず、各ページにべた書きとなりました(笑)
といっても、front-page.phpとcategory.phpでしか使っていないので、まぁ、ありでしょうか?改修の時に気をつけましょう!!
1. 現在のページ番号を取得する
$paged = get_query_var(‘paged’) ? get_query_var(‘paged’) : get_query_var(‘page’);
$paged = $paged ? $paged : 1;
get_query_var('paged')
: 通常の投稿ページのページ番号を取得。get_query_var('page')
: 固定ページでのページ番号を取得(カスタムテンプレートで使われるケースがある)。- 両方をチェックして、どちらも取得できなければ
1
(最初のページ)を設定。
2. 表示する記事数の設定
$posts_per_page = wp_is_mobile() ? 6 : 12;
- モバイルかどうかを判定し、モバイルなら6件、それ以外は12件表示。
3. 記事一覧の取得
$args = array(
‘posts_per_page’ => $posts_per_page,
‘paged’ => $paged,
…
);
$the_query = new WP_Query($args);
- WP_Query を使って投稿を取得。
paged
により、現在のページ番号に応じた投稿を取得できる。
4. ページネーションの表示
echo paginate_links(array(
‘base’ => get_pagenum_link(1) . ‘%_%’,
‘format’ => ‘page/%#%/’,
‘current’ => max(1, $paged),
‘total’ => $the_query->max_num_pages,
));
各種引数(変数)の説明は以下です。
引数 | 説明 |
---|---|
base | ページリンクのベースURL(1ページ目のリンク)。%_% が format の部分に置き換えられる。 |
format | ページ番号の形式。例:page/2/ 。 |
current | 現在のページ番号。 |
total | 全体のページ数($the_query->max_num_pages で取得)。 |
⚠ ページネーションが正しく機能するための注意点
- パーマリンク設定が「投稿名」などカスタム形式である必要があります(
page/%#%/
にマッチ)。 functions.php
にadd_theme_support('pagination')
のような記述は不要ですが、正しいURL形式でrewrite
が有効になっている必要があります。wp_reset_postdata()
はループの後で呼び出しており、グローバルな$post
への影響をリセットしていて正しい。
【まとめ】このコードでのページネーションの流れ
- 現在のページ番号を取得 →
$paged
- WP_Query で該当ページの投稿を取得
paginate_links()
でナビゲーション生成- クリックすると URL(例:
/page/2/
)が変わり、次の投稿を表示
チャットGPTで解説をお願いしております^^
※本記事の一部は、OpenAIのChatGPTを参考にしています。