WP-PageNavi 套用 Bootstrap 4 样式外观我是这样做的

原创
WP-PageNavi 套用 Bootstrap 4 样式外观我是这样做的

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

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

WordPress 16 主题默认的分页外观

WordPress 16 主题默认的分页外观

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

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

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 的同学请看下面)

/**
 * 名称:把 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>';
}

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

/**
 * 名称:把 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>';
}

结束语

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

Bootstrap 默认的分页外观

Bootstrap 默认的分页外观

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