【WordPress】記事一覧ページのページネーションをカスタマイズする方法

【WordPress】記事一覧ページのページネーションをカスタマイズする方法

こんにちは。

ゆうや(@yuyaphotograph)です!

WordPressの記事一覧ページのページネーションを表示するのがなかなかうまくいかなくて困っていませんか?

本記事で紹介するコードで実装すると期待通りに表示することができます。

なぜなら、ぼくも同じくうまく動作しなくて困っていたけど、そのコードで試したらページネーションをちゃんと表示することができたからです。

この記事では前半でページネーションの実装方法ならびにhtml構造などのカスタマイズ方法を紹介して最後にCSSで見た目を整えていきます。

本記事を読み終えると、今後WordPressの記事一覧ページでのページネーション実装やカスタマイズに悩むことが一切なくなるでしょう。

記事一覧ページのページネーションをカスタマイズしてみよう!

functions.phpにページネーション用の関数を用意

まずは、記事に出力するページネーションの設定やhtml構造などのカスタマイズを行います。

以下コードです。

functions.php
function pagination( $pages, $paged, $range = 2 ) {

  $pages = ( int ) $pages;
  $paged = $paged ?: 1;

  $text_before  = "‹";
  $text_next    = "›";

  if ( 1 !== $pages ) {
    //2ページ以上の時
    echo '<div class="Pagination">';
    if ( $paged > 1 ) {
      // 「‹」1ページ前へ戻るリンクを表示
      echo '<a href="', get_pagenum_link( $paged - 1 ) ,'" class="Pagination-Item">', $text_before ,'</a>';
    }
    for ( $i = 1; $i <= $pages; $i++ ) {

      if ( $i <= $paged + $range && $i >= $paged - $range ) {
        if ( $paged === $i ) {
          echo '<span class="Pagination-Item isActive">', $i ,'</span>'; // 現在のページの数字
        } else {
          echo '<a href="', get_pagenum_link( $i ) ,'" class="Pagination-Item">', $i ,'</a>';
        }
      }

    }
    if ( $paged < $pages ) {
      // 「›」1ページ後へ進むリンクを表示
      echo '<a href="', get_pagenum_link( $paged + 1 ) ,'" class="Pagination-Item">' ,$text_next ,'</a>';
    }
    echo '</div>';
  }
}

記事一覧のテンプレートファイルで表示する

記事一覧ページのテンプレートファイル、ここではpage-blog.phpに以下のように記述していきます。

注意点はサブループのwp_reset_postdataの手前でfunctions.phpで作成したページネーションを呼び出すことです。

page-blog.php
<?php
        $paged = get_query_var('paged') ?: 1;
        $args = array(
          'post_type' => "post",//投稿タイプ設定
          'posts_per_page' => 5,// 取得記事数
          'paged' => $paged,
        );

        $my_query = new WP_Query($args);
        if ($my_query->have_posts()): while ( $my_query->have_posts() ) : $my_query->the_post(); ?>

        コンテンツ

        <?php endwhile; ?>
        <?php endif; ?>

        <?php
          if ( function_exists( 'pagination' ) ) :
            pagination( $my_query->max_num_pages, $paged );
          endif;
         ?>
         
        <?php wp_reset_postdata(); ?>

シンプルなデザインのページネーションにするCSS

最後にCSSでページネーションのスタイルを整えます。

ページネーションの見た目は正方形で2pxのボーダーを周りにつけ横並びに表示する一般的なものとなります。

blog.css
.Pagination {
  display: flex;
  justify-content: center;
}
.Pagination-Item {
  border: 3px solid #000;
  margin-left: 45px;
  width: 52px;
  height: 52px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  color: #000;
  font-size: 1.66vw;
}
@media screen and (max-width: 768px) {
  .Pagination-Item {
    margin-left: 16px;
    width: 40px;
    height: 40px;
    font-size: 24px;
  }
}
.Pagination-Item.isActive {
  border: none;
  background: #5bc8ac;
  color: #fff;
}

参考記事

案件でのページネーション実装で困っていたところを助けられました…!!!

本当に素敵な記事ありがとうございます!

参考 WordPressでページャー(ページネーション)をプラグインなしで実装WEMO.tech

まとめ

以上、WordPressで記事一覧ページのページネーションをカスタマイズする方法をご紹介しました。

WordPressでのWebサイト制作において確実に実装する機会ありますのでぜひその時にお使い下さい。

最後までご高覧いただきありがとうございました!

あわせて読みたい

WordPressでよく使う関数スニペットまとめ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です