【WordPress化】アーカイブページにページネーションを設置する【プラグインなし】

ページネーション-アイキャッチ
<?php the_posts_pagination(); ?>

上のタグを入力するとブログやgoogle検索でよく見られるようなページ送りができるものが生成されます。(レイアウトやここまでのCSSによっては見え方が異なるかもしれません)

the_posts_paginationを埋め込んだ画像

これをページネーションページャーと呼びます。

※表示件数を2件にしています

こばゆた
こばゆた

なぜページャーを使うかというと、記事の一覧を表示するときに一気に全件表示せず、小出しにすることでページの読み込みを軽減できるからというのが一つの理由です

WP-PageNaviなどのプラグインを使ってもできますが使わなくても簡単にできるので自作してみました。

スポンサーリンク

1.the_posts_paginationの使い方

1-1.ページャーのコード

先程も見ましたが下のタグを埋め込むだけでもページャーの機能自体は使うことはできます。

<?php the_posts_pagination(); ?>

しかしこれだけではシンプルすぎるのでCSSでスタイリングをして少し変えて使います。

ちなみにタグを埋め込むとソースコードはこんな感じになります。

the_posts_paginationを埋め込んだ後のソースコード

もう少しわかりやすくするとこのような構造になっています。

<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);
?>
paginationの使用例

このような感じに変えることができます。

また”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' => ' ',
);
paginationにFontAwesomeを入れた例

少し窮屈ですがこれは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に記入することで変えられたのでそちらをメモしておきます!

/* 各ページ1ページあたりの表示数を変更する */
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で整える

コメント