WP-PageNavi 的外观很丑想自定义 CSS 怎么办？如何把 WP-PageNavi 的外观改成 Bootstrap 4 的样式？本文教你一个函数简单搞定！

WordPress 自带的分页特别丑，而且只能“上一页 / 下一页”的浏览，非常不直观，不仅读者难以转跳而且对 SEO 搜索引擎也不友好。

WordPress 16 主题默认的分页外观

所以大多数站长会安装一款名为 WP-PageNavi 的 WordPress 插件，该插件可以给 WordPress 添加更高的分页导航，更符合传统的页码样式，清晰简单，如下图所示：

WP-PageNavi 插件默认的分页外观

默认情况下，虽然功能强大但外观可能真的很丑……所以推荐你改善一下外观。如果你想自定义 WP-PageNavi 的 CSS 样式很简单哦！只需要 2 步：
1. 先到后台——插件——分页导航——添加 pagenavi- css.css选择不是；
2. 在你自己的 style.css 文件中添加喜欢的 css 就可以了。

越来越多的人开始使用 Bootstrap 框架来制作 WordPress 主题，既然 Bootstrap 提供了页码的组件，为何要自己写呢？但是等你真的着手开始套用 Bootstrap 的时候会发现一个坑——WP-PageNavi 所使用的 CSS 和 Bootstrap 提供的 CSS 名称、HTML 结构并不兼容，完全没办法继续……

好在我们可以求助于万能的 function.php 来进行改造，下面我们将通过zhanglinhai_pagination函数来把 WP-PageNavi 的外观修改为 Bootstrap 4 页码样式。（使用 Bootstrap v3 的同学请看下面）

[php highlight=”7″]
/**
* 名称：把 WP-PageNavi 的 html 代码适配为 Bootstrap 4 的 html 和 class name
* 作者：张林海（http://zhanglinhai.com/archives/909）
*/
add_filter( ‘wp_pagenavi’, __NAMESPACE__ . ‘\\zhanglinhai_pagination’, 10, 2 );

function zhanglinhai_pagination($html) {
$out = ”;
$out = str_replace(‘<div’,”,$html);
$out = str_replace(‘class=\’wp-pagenavi\’>’,”,$out);
$out = str_replace(‘<a’,'<li class="page-item"><a class="page-link"’,$out);
$out = str_replace(‘</a>’,'</a></li>’,$out);
$out = str_replace(‘<span class=\’current\”,'<li class="page-item active"><span class="page-link current"’,$out);
$out = str_replace(‘<span class=\’pages\”,'<li class="page-item"><span class="page-link pages"’,$out);
$out = str_replace(‘<span class=\’extend\”,'<li class="page-item"><span class="page-link extend"’,$out);
$out = str_replace(‘</span>’,'</span></li>’,$out);
$out = str_replace(‘</div>’,”,$out);
return ‘<ul class="pagination justify-content-center">’.$out.'</ul>’;
}
[/php]

如果你是使用 Bootstrap v.3 的同学，请通过下面的zhanglinhai_pagination函数来把 WP-PageNavi 的外观修改为 Bootstrap v.3 页码样式。

[php highlight=”7″]
/**
* 名称：把 WP-PageNavi 的 html 代码适配为 Bootstrap v.3 的 html 和 class name
* 作者：张林海（http://zhanglinhai.com/archives/909）
*/
add_filter( ‘wp_pagenavi’, __NAMESPACE__ . ‘\\zhanglinhai_pagination’, 10, 2 );

function zhanglinhai_pagination($html) {
$out = ”;
$out = str_replace(‘<div’,”,$html);
$out = str_replace(‘class=\’wp-pagenavi\’>’,”,$out);
$out = str_replace(‘<a’,'<li><a’,$out);
$out = str_replace(‘</a>’,'</a></li>’,$out);
$out = str_replace(‘<span class=\’current\”,'<li class="active"><span class="page-link current"’,$out);
$out = str_replace(‘<span class=\’pages\”,'<li><span class="page-link pages"’,$out);
$out = str_replace(‘<span class=\’extend\”,'<li><span class="page-link extend"’,$out);
$out = str_replace(‘</span>’,'</span></li>’,$out);
$out = str_replace(‘</div>’,”,$out);
return ‘<ul class="pagination">’.$out.'</ul>’;
}
[/php]

结束语

够简单吧！我们只用了 1 个函数就让 WP-PageNavi 适配了 Bootstrap 的外观样式。

Bootstrap 默认的分页外观

欢迎转载，但请勿用于任何商业用途，谢谢你！请标注以下信息『 原文出处：WP-PageNavi 套用 Bootstrap 4 样式外观我是这样做的 - 张林海博客 http://zhanglinhai.com/archives/909 』