【WordPress】ページネーション(ページャー)をプラグイン無しで設置する

プラグインをなるべく使いたくないyukipanです。
WordPressの記事一覧にページネーション(ページャー)を表示させるコードのメモです。

お好きにコピペして使ってください。お役に立てたらうれしいです。

ページネーション(ページャー)をコピペで実装できるコードメモ

PC表示
スマホ表示

上画像のページネーションのコードです。
スマホ表示のときは「前へ」「次へ」ボタンを非表示、「最初へ」「最後へ」のフォントサイズを小さくしてレイアウトを整えました。

function.php

/**
* ページネーション出力関数
* $paged : 現在のページ
* $pages : 全ページ数
* $range : 左右に何ページ表示するか
* $show_only : 1ページしかない時に表示するかどうか
*/
function pagination( $pages, $paged, $range = 2, $show_only = false ) {

  $pages = ( int ) $pages;    //float型で渡ってくるので明示的に int型 へ
  $paged = $paged ?: 1;       //get_query_var('paged')をそのまま投げても大丈夫なように

  //表示テキスト
  $text_first   = "« 最初へ";
  $text_before  = "‹ 前へ";
  $text_next    = "次へ ›";
  $text_last    = "最後へ »";

  if ( $show_only && $pages === 1 ) {
      // 1ページのみで表示設定が true の時
      echo '<div class="pagination"><span class="current pager">1</span></div>';
      return;
  }

  if ( $pages === 1 ) return;    // 1ページのみで表示設定もない場合

  if ( 1 !== $pages ) {
    //2ページ以上の時
    echo '<div class="pagination"><span class="page_num">Page ', $paged ,' of ', $pages ,'</span>';
    if ( $paged > $range + 1 ) {
        // 「最初へ」 の表示
        echo '<a href="', get_pagenum_link(1) ,'" class="first">', $text_first ,'</a>';
    }
    if ( $paged > 1 ) {
        // 「前へ」 の表示
        echo '<a href="', get_pagenum_link( $paged - 1 ) ,'" class="prev">', $text_before ,'</a>';
    }
    for ( $i = 1; $i <= $pages; $i++ ) {

        if ( $i <= $paged + $range && $i >= $paged - $range ) {
            // $paged +- $range 以内であればページ番号を出力
            if ( $paged === $i ) {
                echo '<span class="current pager">', $i ,'</span>';
            } else {
                echo '<a href="', get_pagenum_link( $i ) ,'" class="pager">', $i ,'</a>';
            }
        }

    }
    if ( $paged < $pages ) {
        // 「次へ」 の表示
        echo '<a href="', get_pagenum_link( $paged + 1 ) ,'" class="next">', $text_next ,'</a>';
    }
    if ( $paged + $range < $pages ) {
        // 「最後へ」 の表示
        echo '<a href="', get_pagenum_link( $pages ) ,'" class="last">', $text_last ,'</a>';
    }
    echo '</div>';
  }
}

archive.php

<article class="container"> /* ページの大枠 */

<div class=""> /* ループの枠 */

/* 記事一覧ループはじまり */

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

  /* 記事一覧ループを入力 */

<?php endwhile;?>

/* 記事一覧ループおわり */

</div>

/* ページャーはじまり */
<?php
if ( function_exists( 'pagination' ) ) :
       pagination( $wp_query->max_num_pages, get_query_var( 'paged' ) );
endif;
else : ?>

  <p>まだ記事がありません</p> /* 記事がないときに表示 */

<?php endif; ?>
/* ページャーおわり */

</article>

SCSS

/*---------------------------------------------
// ページネーション
---------------------------------------------*/
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40px 0;
  position: relative;
  font-size: 1.3rem;
  span,a{
    display: block;
    width: auto;
    margin: 4px;
    padding: 8px;
    border: 1px solid #62c9c7;
    background-color: #fff;
    text-decoration: none;
    text-align: center;
    line-height: 16px;
  }
  .pager{ /* ページ番号 */
    width: 32px;
  }
  a:hover,.current{ /* ホバー時 & 現在のページ */
    color: #fff;
    border-color: #62c9c7;
    background-color: #62c9c7;
  }
  a.prev { /* 前へ */
    margin-right: 16px;
    @media only screen and (max-width:$spwidth) {
      display: none;
    }
  }
  a.next { /* 次へ */
    margin-left: 16px;
    @media only screen and (max-width:$spwidth) {
      display: none;
    }
  }
  a.first,a.last{
    @media only screen and (max-width:$spwidth) {
      font-size: 1rem;
    }
  }
  span.page_num { /* Page x / y */
    display: none;
  }
}//.pagination

CSSも一応。

/*---------------------------------------------
// ページネーション
---------------------------------------------*/
.pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 40px 0;
  position: relative;
  font-size: 1.3rem;
}

.pagination span, .pagination a {
  display: block;
  width: auto;
  margin: 4px;
  padding: 8px;
  border: 1px solid #62c9c7;
  background-color: #fff;
  text-decoration: none;
  text-align: center;
  line-height: 16px;
}

.pagination .pager {
  /* ページ番号 */
  width: 32px;
}

.pagination a:hover, .pagination .current {
  /* ホバー時 & 現在のページ */
  color: #fff;
  border-color: #62c9c7;
  background-color: #62c9c7;
}

.pagination a.prev {
  /* 前へ */
  margin-right: 16px;
}

@media only screen and (max-width: 768px) {
  .pagination a.prev {
    display: none;
  }
}

.pagination a.next {
  /* 次へ */
  margin-left: 16px;
}

@media only screen and (max-width: 768px) {
  .pagination a.next {
    display: none;
  }
}

@media only screen and (max-width: 768px) {
  .pagination a.first, .pagination a.last {
    font-size: 1rem;
  }
}

.pagination span.page_num {
  /* Page x / y */
  display: none;
}

参考サイト

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

上記サイトを参考にさせていただきました。ありがとうございます。
詳しく解説されていて、コピペだけで使えるステキなコードを書かれています。

ABOUT US

yukipan
Web制作会社で働いてます。パンダとかリラックマとか、まあるいものが好き。好奇心旺盛で、何にでも興味をもってしまう。とりあえずやってみてから取捨選択するのがモットー。今はグリーンカレーとチャイと株式投資がブーム。