【WordPress】固定ページでページネーションを実装する方法

<div class="pagination">
    <ul>
        <?php
        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
        $the_query = new WP_Query(array(
            'post_status' => 'publish',
            'paged' => $paged,
            'posts_per_page' => 10, // 表示させる投稿数を設定
            'orderby'     => 'date',
            'order' => 'DESC'
        ));


        // ここからループ
        if ($the_query->have_posts()) :
            while ($the_query->have_posts()) : $the_query->the_post();
        ?>

                <!-- ここにループさせるコンテンツをいれる -->

        <?php endwhile;
        endif;
        wp_reset_postdata(); ?>

    </ul>

    <div class="pnavi">
        <?php //ページリスト表示処理
        global $wp_rewrite;
        $paginate_base = get_pagenum_link(1);
        if (strpos($paginate_base, '?') || !$wp_rewrite->using_permalinks()) {
            $paginate_format = '';
            $paginate_base = add_query_arg('paged', '%#%');
        } else {
            $paginate_format = (substr($paginate_base, -1, 1) == '/' ? '' : '/') .
                user_trailingslashit('page/%#%/', 'paged');
            $paginate_base .= '%_%';
        }
        echo paginate_links(array(
            'base' => $paginate_base,  //URLのベース
            'format' => $paginate_format,  //ページネーションのリンクの構造
            'total' => $the_query->max_num_pages, //ページ数（全ページを指定）
            'mid_size' => 2, //ページリスト表示処理
            'current' => ($paged ? $paged : 1), //現在のページの位置
            'prev_text' => '前へ',
            'next_text' => '次へ',
        ));
        ?>
    </div>
</div>

/* ページ中央に設置 */
.pnavi {
    text-align: center;
}

/* 現在開いている以外のページのボタン */
.pagination .page-numbers {
    display: inline-block;
    margin-right: 25px;
    padding: 0;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    color: #7090DD;
    border: 1px solid #7090DD;
    background: #fff;
    font-weight: bold;
    font-size: 12px;
}

/* マウスが乗った時の、ボタンの背景の色と文字の色 */
.pagination a.page-numbers:hover {
    color: #FFF;
    background-color: #999;
    border-color: #999;
}


/* 現在のページのボタン */
.pagination .current {
    padding: 0;
    background: #7090DD;
    color: #FFFFFF;
    font-size: 12px;
}

/* 前へ、次へ */
.pagination .prev,
.pagination .next {
    border: 1px solid #004BB1;
    color: #004BB1;
    position: relative;
    font-size: 12px;
}

.pagination a.next.page-numbers {
    margin-right: 0;
}

/*  縦線の共通CSS　*/
.pagination .next::before,
.pagination .prev::after {
    content: "";
    display: inline-block;
    width: 0.5px;
    height: 40px;
    background-color: rgb(224, 215, 215);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

// 「次へ」の前の線
.pagination .next::before {
    left: -15px;
}

// 「前へ」の後の線
.pagination .prev::after {
    right: -15px;
}

/* 数字の間のドット */
.pagination .dots {
    background: transparent;
    border: none;
}

<?php wp_pagenavi(array('query' => $the_query)); ?>

<div class="pagination">
    <ul>
        <?php
        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
        $the_query = new WP_Query(array(
            'post_status' => 'publish',
            // 'post_type' => 'post', //　ページの種類（例、page、post、カスタム投稿タイプ名）
            'paged' => $paged,
            'posts_per_page' => 10, // 表示させる投稿数を設定可能
            'orderby'     => 'date',
            'order' => 'DESC'
        ));

        // ループ文
        if ($the_query->have_posts()) :
            while ($the_query->have_posts()) : $the_query->the_post();
        ?>

                <!-- ここにループさせるコンテンツをいれる -->

        <?php endwhile;
        endif;
        wp_reset_postdata(); ?>
    </ul>

    <!-- ここにページネーションを設置 -->
    <?php wp_pagenavi(array('query' => $the_query)); ?>

</div>

/* ページ中央に配置 */
.wp-pagenavi {
    text-align: center;
}

/* ページタブの共通スタイル */
.wp-pagenavi span.current,
.page.smaller,
.page.larger,
.nextpostslink,
.previouspostslink {
    display: inline-block;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    padding: 0;
    background: #7090DD;
    color: #FFFFFF;
    border-radius: 50%;
    border: none;
    font-weight: bold;
}

/* 現在ページ以外のボタン */
// 共通スタイル
.page.smaller,
.page.larger {
    background: #fff;
    color: #7090DD;
    border: 1px solid #7090DD;
    padding: 0;
}

// 現在ページより前のボタン
.page.smaller {
    margin-right: 25px;
}

// 現在ページより後のボタン
.page.larger {
    margin-left: 25px;
}


/* マウスが乗った時の、ボタンの背景の色と文字の色 */
.wp-pagenavi a:hover {
    color: #FFF;
    background-color: #999;
    border: 1px solid #999 !important;
}

/*「次へ」, 「前へ」　共通スタイル */
.nextpostslink,
.previouspostslink {
    line-height: 40px;
    border: 1px solid $blue !important;
    color: $blue !important;
    position: relative;
    background: #fff;
    color: #7090DD;
    top: -3px;
}

// 「次へ」
.nextpostslink {
    left: 25px;
}

// 「前へ」
.previouspostslink {
    right: 25px;
}

/* 縦線の共通スタイル */
.nextpostslink::before,
.previouspostslink::after {
    content: "";
    width: 0.5px;
    height: 40px;
    background-color: rgb(224, 215, 215);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

// 「次へ」の前の縦線
.nextpostslink::before {
    left: -15px;
}

//「前へ」の後の縦線
.previouspostslink::after {
    right: -15px;
}

/* 〇/〇 の部分のスタイル → 不要の場合は非表示 */
.pages {
    display: none;
}