WordPressでページネーションを自作する方法を解説！おすすめのプラグインやカスタマイズ方法も紹介

<?php the_posts_pagination(
    array(
        'mid_size'      => 2, // 現在ページの左右に表示するページ番号の数
        'prev_next'     => true, // 「前へ」「次へ」のリンクを表示する場合はtrue
        'prev_text'     => ('<'), // 「前へ」リンクのテキスト
        'next_text'     => ('>'), // 「次へ」リンクのテキスト
        'type'          => 'list', // 戻り値の指定 (plain/list)
    )
); ?>

<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="http://blogtest.local/houryu/">＜</a></li>
            <li><a class="page-numbers" href="http://blogtest.local/houryu/">1</a></li>
            <li><span aria-current="page" class="page-numbers current">2</span></li>
            <li><a class="page-numbers" href="http://blogtest.local/houryu/page/3/">3</a></li>
            <li><a class="page-numbers" href="http://blogtest.local/houryu/page/4/">4</a></li>
            <li><a class="next page-numbers" href="http://blogtest.local/houryu/page/3/">＞</a></li>
        </ul>
    </div>
</nav>

// 真ん中に設置
.pagination {
    text-align: center;
}

// 横並びにする
.nav-links .page-numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

// ページタブの共通スタイル
.nav-links a.page-numbers ,
.nav-links .current,
.nav-links a.prev,
.nav-links a.next,
.nav-links .dots {
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background: #fff;
    color: #7090DD;
    border-radius: 50%;
    margin-right: 25px;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid #7090DD;
}

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

// 現在のページのタブ 
.nav-links .current {
    background: #7090DD;
    color: #FFFFFF;
    padding: 0;
}

/* 前への「＜」、次への「＞」 */
.nav-links a.prev,
.nav-links a.next {
    border: 1px solid #004BB1;
    color: #004BB1;
    position: relative;
}

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


// 「次へ」の前の縦線位置
.nav-links .next::before {
    left: -15px;
}

//「前へ」の後の縦線位置
.nav-links .prev::after {
    right: -15px;
}

// 数字省略の「・・・」
.nav-links .dots {
    background: transparent;
    border: none;
}

<?php wp_pagenavi(); ?>

<div class='wp-pagenavi' role='navigation'>
    <span class='pages'>2 / 4</span>
    <a class="previouspostslink" rel="prev" aria-label="前のページ" href="http://blogtest.local/houryu/">«</a>
    <a class="page smaller" title="ページ 1" href="http://blogtest.local/houryu/">1</a>
    <span aria-current='page' class='current'>2</span>
    <a class="page larger" title="ページ 3" href="http://blogtest.local/houryu/page/3/">3</a>
    <a class="page larger" title="ページ 4" href="http://blogtest.local/houryu/page/4/">4</a>
    <a class="nextpostslink" rel="next" aria-label="次のページ" href="http://blogtest.local/houryu/page/3/">»</a>
</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;
}

// 現在ページ以外のボタン
/* 共通スタイル*/
.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;
}