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

/**
* ページネーション出力関数
* $paged : 現在のページ
* $pages : 全ページ数
* $range : 左右に何ページ表示するか
* $show_only : 1ページしかない時に表示するかどうか
*/
public static 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>';
    }
}

/**
 * メインループ開始位置
 */
if(have_posts()):
    while(have_posts()): the_post();

        /* 投稿の表示 */

    endwhile;

    /* 以下、ページャーの表示 */
    if ( function_exists( 'pagination' ) ) :
        pagination( $wp_query->max_num_pages, get_query_var( 'paged' ) );
    endif;

else :
    echo 'まだ記事がありません。';
endif;

if ( function_exists( 'pagination' ) ) :
    pagination( $wp_query->max_num_pages, get_query_var( 'paged' ) );
endif;

pagination( $wp_query->max_num_pages, get_query_var( 'paged' ), 2, true);

$paged = get_query_var('paged') ?: 1;
$args  = array(
    'paged' => $paged,  //「現在のページ番号」はここでも指定する
    /* その他のプロパティの指定など... */
);
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) :
    while ( $the_query->have_posts() ) : $the_query->the_post();

        /* 投稿の表示 */

    endwhile;
endif;

/* ページャーの表示 */
if ( function_exists( 'pagination' ) ) :
    pagination( $the_query->max_num_pages, $paged );  //$wp_query ではなく $the_query ないことに注意！
endif;

wp_reset_postdata();

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px 0;
    position: relative;
    font-size: 13px;
}

.pagination span, .pagination a {
    display: block;
    width: auto;
    margin: 4px;
    padding: 8px;
    border: 1px solid #000;
    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: #000;
    background-color: #000;
}

/* 前へ */
.pagination a.prev {
    margin-right: 16px;
}
/* 次へ */
.pagination a.next {
    margin-left: 16px;
}
/* 最初へ */
.pagination a.first {}
/* 最後へ */
.pagination a.last {}

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