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

/**
* ページネーション出力関数
* $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 ) {
      // １ページのみで表示設定が true の時
      echo '<div class="pagination"><span class="current pager">1</span></div>';
      return;
  }

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

  if ( 1 !== $pages ) {
    //２ページ以上の時
    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>';
  }
}

<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>

/*---------------------------------------------
// ページネーション
---------------------------------------------*/
.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

/*---------------------------------------------
// ページネーション
---------------------------------------------*/
.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;
}