您的 WordPress 佈景主題是使用 Bootstrap 框架開發，但 WordPress 內建 paginate_links 分頁按鈕樣式卻很醜，自己寫 css 又差了一點嗎？ 本篇文章直接示範如何自定義 paginate_links 分頁按鈕樣式，使用 Bootstrap 原生的樣式！

原本 paginate_links() 會輸出程式碼

<a class="prev page-numbers" href="https://blog.reh.tw/">« 上一頁</a>
<a class="page-numbers" href="https://blog.reh.tw/">1</a>
<span aria-current="page" class="page-numbers current">2</span>
<a class="page-numbers" href="https://blog.reh.tw/page/3">3</a>
<a class="next page-numbers" href="https://blog.reh.tw/page/2">下一頁 »</a>

我們自定義過後會輸出

<ul class="pagination">
    <li class="page-item">
        <a class="prev page-link" href="https://blog.reh.tw/page/1">«</a>
    </li>
    <li class="page-item">
        <a class="page-link" href="https://blog.reh.tw/page/1">1</a>
    </li>
    <li class="page-item active">
        <span aria-current="page" class="page-link current">2</span>
    </li>
    <li class="page-item">
        <a class="page-link" href="https://blog.reh.tw/page/3">3</a>
    </li>
    <li class="page-item">
        <a class="next page-link" href="https://blog.reh.tw/page/2">»</a>
    </li>
</ul>

這就是 Bootstrap 原生的分頁按鈕 HTML，那開始教學OUO

首先我們先在佈景主題的 functions.php 內加入以下程式碼

/* 自定義 paginate_links 分頁按鈕樣式 */
function get_wp_pagenavi() {
    ob_start();
?>
    <?php
    global $wp_query;
    $max = $wp_query->max_num_pages;
    $current = max(1, absint(get_query_var('paged')));
    $pagination = paginate_links(array(
        'base' => str_replace(PHP_INT_MAX, '%#%', esc_url(get_pagenum_link(PHP_INT_MAX))),
        'format' => '?paged=%#%',
        'current' => $current,
        'total' => $max,
        'type' => 'array',
        'prev_text' => '&laquo;',
        'next_text' => '&raquo;'
    ));
    ?>
    <?php if (!empty($pagination)) : ?>
    <ul class="pagination">
        <?php foreach ($pagination as $key => $page_link) : ?>
        <li class="page-item<?php if (strpos($page_link, "current") !== false) {echo " active";} ?>">
            <?php echo str_replace("page-numbers", "page-link", $page_link); ?>
        </li>
        <?php endforeach; ?>
    </ul>
    <?php endif; ?>
<?php
    $links = ob_get_clean();
    return apply_filters('wp_pagenavi', $links);
}
function wp_pagenavi() {
    echo get_wp_pagenavi();
}

這些程式碼就是自定義 paginate_links 分頁按鈕樣式的程式碼

然後在你要顯示分頁按鈕的地方加入或修改成以下程式碼

<?php wp_pagenavi(); ?>

這樣分頁按鈕樣式就是 Bootstrap 原生的樣式了wwww