カテゴリー一覧・タグ一覧・検索結果ページなど、記事一覧が複数ページに分かれる場合はページナビゲーション（ページネーション）を設置するのが一般的です。
この記事では、WordPress標準関数を使った安全な方法を中心に解説します。
目次
ページナビゲーションとは？
例：以下のような表示
« 前へ 1 2 3 4 次へ »- 記事一覧をページ送りできる
- UX向上
- クローラビリティ改善（SEOにも重要）
一番簡単な方法：the_posts_pagination()
基本コード
<?php
the_posts_pagination();
?>- WordPress標準関数
- category.php / archive.php / search.php などで使用
- メインループ終了後に書く
表示を日本語にする
<?php
the_posts_pagination(
array(
'prev_text' => '« 前へ',
'next_text' => '次へ »',
)
);
?>クラスを付けてデザインしやすくする
<?php
the_posts_pagination(
array(
'prev_text' => '« 前へ',
'next_text' => '次へ »',
'class' => 'pagination',
)
);
?>HTML構造（出力イメージ）
<nav class="navigation pagination">
<div class="nav-links">
<a class="prev page-numbers">« 前へ</a>
<span class="page-numbers current">2</span>
<a class="page-numbers">3</a>
<a class="next page-numbers">次へ »</a>
</div>
</nav>出力されたHTML構造を理解すれば、CSSで自由に装飾可能です！
表示されない時のチェックポイント（超重要）
① メインクエリを使っているか？
WP_Queryのサブループでは表示されない- 一覧ページのメインループ限定
② posts_per_page が 1以上か？
- 表示件数が全件表示だとページが分割されない
③ ループの「後」に書いているか？
❌ NG
while ( have_posts() ) :
the_posts_pagination();
endwhile;⭕ OK
while ( have_posts() ) :
the_post();
endwhile;
the_posts_pagination();older/newer形式が良い場合
posts_nav_link()
<?php posts_nav_link(); ?>シンプルな
« 前のページ | 次のページ »を出したい時向け。
より細かく制御したい場合：paginate_links()
<?php
global $wp_query;
echo paginate_links(
array(
'total' => $wp_query->max_num_pages,
'current' => max( 1, get_query_var( 'paged' ) ),
)
);
?>向いているケース
- 独自HTMLで囲みたい
- デザインを完全に制御したい
- サブループで使いたい
サブループでのページネーション（補足）
$paged = get_query_var( 'paged' ) ?: 1;
$args = array(
'post_type' => 'post',
'posts_per_page' => 10,
'paged' => $paged,
);
$query = new WP_Query( $args );
while ( $query->have_posts() ) :
$query->the_post();
endwhile;
echo paginate_links(
array(
'total' => $query->max_num_pages,
'current' => $paged,
)
);
wp_reset_postdata();👉 一覧ページ以外では必須になる知識
SEO的な注意点
- ページネーションURLは
/category/xxx/page/2/のように正規化される - canonical は WordPress が自動処理
- noindex 不要（基本）
初心者向けまとめ
- 一覧ページならthe_posts_pagination() が最優先
- ループの「後」に書く
- サブループなら paginate_links()
- 表示されない時は「メインクエリか？」をまず疑う
WordPress一覧ページの「前へ・次へ」を画像にする方法
ページナビゲーションの
「前へ」「次へ」テキストを矢印画像に置き換えたい場合、
WordPress標準関数でも問題なく対応できます。
方法① the_posts_pagination() で画像を使う（おすすめ）
テーマフォルダ内の画像を使う
例：
/images/arrow-prev.png
/images/arrow-next.pngコード例
<?php
the_posts_pagination(
array(
'prev_text' => '<img src="' . get_template_directory_uri() . '/images/arrow-prev.png" alt="前へ">',
'next_text' => '<img src="' . get_template_directory_uri() . '/images/arrow-next.png" alt="次へ">',
)
);
?>出力されるHTMLイメージ
<a class="prev page-numbers" href="...">
<img src=".../images/arrow-prev.png" alt="前へ">
</a>👉 aタグの中に img が入る構造
👉 CSSでクリック範囲を広げるのも簡単
CSS例（クリックしやすく）
.page-numbers img {
width: 24px;
height: auto;
}方法② paginate_links() で画像を使う（カスタマイズ向け）
<?php
global $wp_query;
echo paginate_links(
array(
'total' => $wp_query->max_num_pages,
'current' => max( 1, get_query_var( 'paged' ) ),
'prev_text' => '<img src="' . get_template_directory_uri() . '/images/arrow-prev.png" alt="前へ">',
'next_text' => '<img src="' . get_template_directory_uri() . '/images/arrow-next.png" alt="次へ">',
)
);
?>子テーマの場合の注意点
子テーマを使っているならこちらが正解👇
get_stylesheet_directory_uri()
コメント