如何在WordPress中结合Bootstrap 4使用wp_link_pages实现分页样式

1. 修改wp_link_pages()调用参数 #

在你的主题模板文件（如single.php、page.php）中，替换原有的wp_link_pages()代码为以下带参数的调用，让输出结构匹配Bootstrap分页组件的HTML要求：

wp_link_pages( array(
    'before'            => '<nav aria-label="文章分页"><ul class="pagination">',
    'after'             => '</ul></nav>',
    'link_before'       => '<span class="page-link">',
    'link_after'        => '</span>',
    'pagelink'          => '%',
    'separator'         => '',
    'previouspagelink'  => '&laquo; 上一页',
    'nextpagelink'      => '下一页 &raquo;'
) );

2. 添加过滤器处理激活状态样式 #

默认wp_link_pages()不会给当前页添加Bootstrap需要的active类，所以在主题的functions.php中添加以下过滤器函数，修正HTML结构：

add_filter( 'wp_link_pages_link', 'bootstrap_pagination_active_fix' );
function bootstrap_pagination_active_fix( $link ) {
    // 处理当前页的active样式
    if ( strpos( $link, 'current' ) ) {
        $link = str_replace( '<span', '<li class="page-item active"><span class="page-link"', $link );
        $link = str_replace( '</span>', '</span></li>', $link );
    } else {
        // 处理普通分页项的结构
        $link = str_replace( '<span', '<li class="page-item"><span', $link );
        $link = str_replace( '</span>', '</span></li>', $link );
    }
    // 处理禁用状态（如果有上/下一页不可用的情况）
    if ( strpos( $link, 'disabled' ) ) {
        $link = str_replace( 'page-item', 'page-item disabled', $link );
    }
    return $link;
}

3. 补充自定义CSS样式 #

根据你需要的截图样式，添加以下CSS到主题的style.css或自定义CSS面板中，调整分页的外观：

.pagination {
    justify-content: center;
    margin: 2rem 0;
}
.pagination .page-item {
    margin: 0 4px;
}
.pagination .page-link {
    border-radius: 0.25rem;
    color: #007bff;
    padding: 0.5rem 0.75rem;
    transition: all 0.2s ease;
}
.pagination .page-item.active .page-link {
    background-color: #007bff;
    border-color: #007bff;
}
.pagination .page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    background-color: #fff;
    border-color: #dee2e6;
}
.pagination .page-link:hover:not(.active) {
    background-color: #e9ecef;
    color: #0056b3;
}

这样设置后，你的分页样式就会和目标效果一致，完全适配Bootstrap 4的样式体系。

内容的提问来源于stack exchange，提问作者Ambreen Khan