WordPressでページネーションを作成する方法

ページネーションをWEBサイトに設置すると、ユーザーがWEBサイトで記事を見つけやすくなります。今回はWordPressでページネーションを設置する方法を解説します。

ページネーションとは？

ページネーションとは下記の画像のように、投稿ページのリンクを複数表示する機能です。

多くのWEBサイトで使われているので、目にした人も多いかと思います。ページネーションがあれば、投稿の数が多い場合でも、ユーザーが記事を探しやすくなります。ページが多いWEBサイトなら特に設置ほしい機能ですね。

ページネーションを作成する方法

ではページネーションを作成する方法を解説します。特に難しい操作はなく、すぐに設置することができますよ。

下記のコードを表示させたい箇所に記述するだけで、ページネーションを設置できます。

 <?php the_posts_pagination( ); ?>

上記のコードを記述すると下記の画像のように表示されます。

ただこれだけだとユーザーにとっては見にくいままでしょう。そこでCSSで見やすくします。生成されたページネーションのclassに合わせて、ページネーションのデザインを変更しましょう。

以下にてCSSのコードを載せたので参考にしてみてください。

▢ CSSのコード

/* ページネーション*/
.pagenation {
  width     : 900px;
  margin    : 0 auto;
  margin-top: 40px;
 
  nav {
 
    .nav-links {
 
      .prev {
        background-color: #f5f5f5;
      }
      .next {
        background-color: #f5f5f5;
      }
 
      a {
       padding: 10px 10px;
        background-color: #f5f5f5;
        color: #000000;
        text-decoration: none;
      }
      .current {
        padding: 10px 10px;
        background-color: #e0ffff;
      }
    }
  }
}

上記のCSSを適用すると以下のようにページネーションが見やすくなりました。

次に下記のコードで「前へ」と「次へ」を「前のページへ」と「次のページへ」と変更してみます。

 <?php the_posts_pagination(
        array(
            'mid_size'      => 2,
            'prev_next'     => true,
            'prev_text'     => ('< 前のページへ'),
            'next_text'     => ('次のページへ >'),
        )
    ); ?>

mid_sizeでは左右に並ぶ、ページ番号の数を設定できます。「’prev_next’ => true,」は前のページと次のページのリンクを表示する設定をしています。falseならリンクは表示されません。

固定ページでページネーションを作成する方法

これまでページネーションの作成方法を説明してきましたが、固定ページで同じようにコードを記述してもページネーションは表示されません。

固定ページでページネーションを表示させる場合は以下のようなコードを記述しましょう。

<div class="pagenation">
<?php
if ($the_query->max_num_pages > 1) {
    echo paginate_links(array(
        'total' => $the_query->max_num_pages,
        'mid_size'      => 2,
        'prev_next'     => true,
        'prev_text'     => ('< 前のページへ'),
        'next_text'     => ('次のページへ >'),
    ));
}
wp_reset_postdata();?>
</div>

▢CSSのコード

.pagenation {
  width     : 900px;
  margin    : 0 auto;
  margin-top: 40px;
 
      .prev {
        background-color: #f5f5f5;
      }
      .next {
        background-color: #f5f5f5;
      }
 
      a {
       padding: 10px 10px;
        background-color: #f5f5f5;
        color: #000000;
        text-decoration: none;
      }
      .current {
        padding: 10px 10px;
        background-color: #e0ffff;
      }
    }

GIV株式会社は、埼玉県川越市にあるWEB（ホームページ）制作会社です。お困りごと、ご相談、お気軽にご連絡ください。お問い合わせは、こちらから。