<?php the_posts_pagination(); ?>上のタグを入力するとブログやgoogle検索でよく見られるようなページ送りができるものが生成されます。(レイアウトやここまでのCSSによっては見え方が異なるかもしれません)
これをページネーションやページャーと呼びます。
※表示件数を2件にしています
なぜページャーを使うかというと、記事の一覧を表示するときに一気に全件表示せず、小出しにすることでページの読み込みを軽減できるからというのが一つの理由です
WP-PageNaviなどのプラグインを使ってもできますが使わなくても簡単にできるので自作してみました。
1.the_posts_paginationの使い方
1-1.ページャーのコード
先程も見ましたが下のタグを埋め込むだけでもページャーの機能自体は使うことはできます。
<?php the_posts_pagination(); ?>しかしこれだけではシンプルすぎるのでCSSでスタイリングをして少し変えて使います。
ちなみにタグを埋め込むとソースコードはこんな感じになります。
もう少しわかりやすくするとこのような構造になっています。
<nav class="navigation pagination">
<h2 class="screen-reader-text">投稿ナビゲーション</h2>
<div class="nav-links">
<a class="prev page-numbers" href="#">前へ</a>
<a class="page-numbers" href="#">1</a>
<span class="page-numbers current">2</span>
<a class="page-numbers" href="#">3</a>
<a class="next page-numbers" href="#">次へ</a>
</div>
</nav>ページ数が多いと「…」(クラス名はdot)が表示されます。
CSSを変えるときはこのクラス名を指定して変えていきます。
これは後ほど見ていきます。
1-2.PHPを修正する
配列を操作することで文言をカスタムすることができます。
やれることがシンプルなのでそんなに苦戦することはないと思います。
<?php
$args = array(
'mid_size' => 1, /* 現在のページの左右に表示するページ数 */
'prev_text' => ' ', /* 「前へ」にあたるページ用テキスト */
'next_text' => ' ', /* 「次へ」にあたるページ用テキスト */
'screen_reader_text' => ' ', /* 「投稿ナビゲーション」っていうやつのテキストを変える */
);
the_posts_pagination($args);
?>| パラメータ | 変わるもの | デフォルト |
|---|---|---|
| mid_size | 現在のページの左右に表示するページ数 | 1 |
| prev_text | 「前へ」のページ用テキスト | 「前へ」 |
| next_text | 「次へ」のページ用テキスト | 「次へ」 |
| screen_reader_text | タイトルテキスト | 「投稿ナビゲーション」 |
では実際に数値や値を変えた例を見てみます
prev_textとnext_textを変更した例
<?php
$args = array(
'mid_size' => 1,
'prev_text' => '前のページへ',
'next_text' => '次のページへ ',
'screen_reader_text' => ' ',
);
the_posts_pagination($args);
?>
このような感じに変えることができます。
また”prev_text”と”next_text”にFont Awesomeを入れることもできます。
<?php
$args = array(
'mid_size' => 1,
'prev_text' => '<i class="fas fa-angle-left"></i>前のページへ',
'next_text' => '次のページへ<i class="fas fa-angle-right"></i> ',
'screen_reader_text' => ' ',
);
少し窮屈ですがこれはCSSで修正してください。
また‘screen_reader_text’は’ ‘にして中身を空欄にすると消すことができます。
mid_sizeの数字を変えた例
mid_sizeの数字を変えるとこんな感じになります。
<?php
$args = array(
'mid_size' => 3,
'prev_text' => '<i class="fas fa-angle-left"></i>前のページへ',
'next_text' => '次のページへ<i class="fas fa-angle-right"></i> ',
'screen_reader_text' => ' ',
);
表示件数が変わったのがわかります。
レイアウトによって変えてください
1-3.CSSで整える
埋め込んだ後のHTMLは以下のようになるのでした。このクラス名を見ながらお好みで調整してください。
<nav class="navigation pagination">
<h2 class="screen-reader-text">投稿ナビゲーション</h2>
<div class="nav-links">
<a class="prev page-numbers" href="#">前へ</a>
<a class="page-numbers" href="#">1</a>
<span class="page-numbers current">2</span>
<a class="page-numbers" href="#">3</a>
<a class="next page-numbers" href="#">次へ</a>
</div>
</nav>生成されるクラス名をまとめました
| クラス名 | 意味 |
|---|---|
| screen-reader-text | 「投稿ナビゲーション」の文字 |
| nav-links | 大枠 |
| prev | 「前へ」の文字 |
| next | 「次へ」の文字 |
| page-numbers | 数字 |
| current | 現在のページ |
| dots | ページが省略された時に出る「…」 |
こちらは雛形用です
取捨選択して使ってください
/* pagination */
.pagination{
}
/* リンクの枠 */
.pagination .nav-links{
}
/* ページの数字 */
.pagination .nav-links .page-numbers{
}
/* 前へ、次へボタン */
.pagination .nav-links .prev,
.pagination .nav-links .next{
}
/* ドット */
.pagination .nav-links .dots{
}
/* 現在のページ */
.pagination .nav-links .current{
}
/* ドットと現在位置以外にホバーした時 */
.pagination .nav-links a:hover{
}一例ですがCSSで整えるとこのようになります。
他にもいろんな方がやっているのであとはそちらを参考にしてください(投げやり)
<?php
$args = array(
'mid_size' => 1,
'prev_text' => '<i class="fas fa-angle-left"></i>',
'next_text' => '<i class="fas fa-angle-right"></i>',
'screen_reader_text' => ' ',
);
the_posts_pagination($args);
?>/* ページネーション(検索ページの次へや前へ) */
/* pagination */
.pagination {
margin-bottom: 30px;
}
/* リンクの枠 */
.pagination .nav-links {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 8px;
}
/* 数字のリンク */
.pagination .nav-links .page-numbers {
text-decoration: none;
color: #333;
border: 1px solid #aaa;
display: inline-block;
border-radius: 6px;
padding: 0.5em 0.8em;
-webkit-transition: .3s;
transition: .3s;
}
/* 現在のページ */
.pagination .nav-links .current {
background-color: #333;
color: #fff;
}
/* 現在のページとドット以外にホバーした時 */
.pagination .nav-links a:hover {
background-color: #333;
color: #fff;
}2.ページごとに投稿の表示数を変える
ページネーションを使っていると以下の問題に当たることがあります。
ときどきページネーションが失敗して予期しない結果になったり、違うページへ移動したり、ページネーションされたページなのに 404（ページが見つかりません）が表示されたりするでしょう。これは普通、テーマが メインループ のクエリに誤った変更を加えた（誤った検索条件）ために起きます。
WordPress Codexより
この問題に引っかかってメインクエリを見直しましたがダメでした
僕のケースでは条件分岐をfunctions.phpに記入することで変えられたのでそちらをメモしておきます！
/* 各ページ１ページあたりの表示数を変更する */
function change_posts_per_page($query) {
if ( is_admin() || ! $query->is_main_query() ) /* メインクエリ(表示設定で設定したページ)の時の投稿数 */
return;
if ( $query->is_archive('post') ) {
$query->set( 'posts_per_page', '1' ); /* アーカイブページの時の投稿数 */
}
elseif($query->is_search('post')){
$query->set( 'posts_per_page', '-1' ); /* 検索ページの時の投稿数 */
}
return;
}
add_action( 'pre_get_posts', 'change_posts_per_page' );2023/12/8追記です
コードを入れてもページネーションがでない！という方は表示記事数を確認してみてください。
アーカイブページの記事数を変える時はこちらの記事で紹介しております。
3.まとめ
1.コードを埋め込む
<?php the_posts_pagination(); ?>2.PHPを修正する
<?php
$args = array(
'mid_size' => 1, /* 現在のページの左右に表示するページ数 */
'prev_text' => ' ', /* 「前へ」のページ用テキスト */
'next_text' => ' ', /* 「次へ」のページ用テキスト */
'screen_reader_text' => ' ', /* 「投稿ナビゲーション」っていうやつのテキストを変える */
);
the_posts_pagination($args);
?>3.CSSで整える
コメント