2022/09/02

【WordPress】プラグインなしでWordPressオリジナルテーマにページネーションの実装する方法

プラグインなしでWordPressにページネーションの実装する方法

前提として今回のページネーションを実装する際は、メインループを使用して下さい。

サブループを使用すると、ページネーションは表示されてもページ遷移がうまくいきません。

PHP

  <div class="pagination">
    <?php the_posts_pagination(
      array(
        'type'      => 'list',
        'mid_size'  => '2',
        'prev_next' => true,
        'prev_text' => '<i class="fas fa-angle-left"></i>',
        'next_text' => '<i class="fas fa-angle-right"></i>'
      )
    ); ?>
  </div>

「mid_size」は現在のページ番号の両隣にいくつ数字を表示するかを指定しています。
「２」という数字の部分を変えれば表示する個数を変えることができるので、好みにカスタマイズしてみて下さい。

「prev_text」と「next_text」は次ページと前ページを設定する部分です。
今回はfont-awesomeを使っていますが、こちらもご自由にカスタマイズしてみて下さい。

ページネーションはいろんなページで使い回す場合が多いので、テンプレート化をして各ページ下記の様なコードでページネーションを呼び出した方が効率が良いのでおすすめです。

        <?php
        require __DIR__ . '/tmp/pagination.php';
        ?>

HTML

ページネーション
ページネーション

上記の画像ようなページネーションで、実際に出力されたHTMLコードは下記。

  <div class="pagination">
    <nav class="navigation pagination" aria-label="投稿">
      <h2 class="screen-reader-text">投稿ナビゲーション</h2>
      <div class="nav-links">
        <ul class='page-numbers'>
          <li><a class="prev page-numbers" href="#"><i class="fas fa-angle-left"></i></a></li>
          <li><a class="page-numbers" href="#">1</a></li>
          <li><span aria-current="page" class="page-numbers current">2</span></li>
        </ul>
      </div>
    </nav>
  </div>

hrefの部分は＃に変更しています。

h2部分とかなぜあるのかなぞだけど、表示はされないから無視。

navタブ内は勝手に生成されるので、これを元にCSSでデザインを当てていきます。

CSS

ページネーション
ページネーション

今回のこのようなページネーションのデザインのCSSを貼っておくので、あとはご自由にアレンジしてください。

.pagination {
  @include g.pc {
    margin-top: 100px;
    margin-bottom: 120px;
  }

  ul {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--ff-garamond-premier-pro);
    font-size: 1.25rem;
    line-height: 1.45;
    color: var(--clr-dark);


    @include g.tb {
      margin-top: 5vh;
      margin-bottom: 5vh;
    }

    li+li {
      @include g.pc {
        margin-left: 50px;
      }
    }

    li {

      .current {
        color: #fff;
        background: var(--clr-dark);
        width: 3.4em;
        height: 3.4em;
        display: flex;
        justify-content: center;
        align-items: center;

        @include g.tb {
          width: 2.5em;
          height: 2.5em;
        }

        &:hover {
          cursor: auto;
          opacity: 1;
        }
      }

      a {
        width: 3.4em;
        height: 3.4em;
        display: flex;
        justify-content: center;
        align-items: center;

        @include g.tb {
          width: 2.5em;
          height: 2.5em;
        }

        @media screen and (max-width: 320px) {
          width: 2em;
          height: 2em;
        }

        &:hover {
          cursor: pointer;
          color: #fff;
          background: var(--clr-dark);
          opacity: 1;
        }

        .prev,
        .next {
          font-size: 1.875rem;
          color: #CECECE;
          cursor: pointer;
        }
      }
    }
  }
}

いろいろ変数とか混じっているので少し分かりにくいかもしれないですが、参考にはなるかと思うのであとは頑張って下さい。

READ MORE IN BLOGS