修改 WP-Pagenavi 样式为 Bootstrap 数字分页导航样式

修改 WP-Pagenavi 样式为 Bootstrap 数字分页导航样式

修改 WP-Pagenavi 样式为 Bootstrap 数字分页导航样式

WP-Pagenavi 可以说是 WordPress 中最流行的分页插件,WP-Pagenavi 插件自带了基本的 CSS 样式,我们可以通过自定义 CSS 来修改这个样式。如果你的主题是基于 Bootstrap 定制的,我们是不是可以直接使用 Bootstrap 的数字分页样式呢?对比一下WP-Pagenavi 的 HTML 结构和 Bootstrap 数字分页组件的 HTML 结构,我们发现,他们的结构是不同的,要想使用 Bootstrap 的分页样式,只需要把 WP-Pagenavi 的分页结构修改成和 Bootstrap 数字分页组件的 HTML 结构一样即可。

bootstrap-wordpress-pagination

WP-Pagenavi 为我们提供了 wp_pagenavi 过滤函数供我们修改 WP-Pagenavi 分页的 HTML 内容,有了这个过滤函数,一切变得简单多了。

//挂载自定义函数到wp_pagenavi过滤函数上
add_filter( 'wp_pagenavi', 'ik_pagination', 10, 2 );

//输出前通过字符串替换自定义html结构
function ik_pagination($html) {
$out = '';

//wrap a's and span's in li's
$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","<li><span",$out);
$out = str_replace("</span>","</span></li>",$out);
$out = str_replace("</div>","",$out);

return '<div class="pagination pagination-centered">
<ul>'.$out.'</ul>
</div>';
}

如果你的 Bootstrap 是 Bootstrap3,只需要稍微修改一下输出即可。

return '<ul class="pagination pagination-centered">'.$out.'</ul>';

把以上代码放到 functions.php 中,WP-Pagenavi 输出的分页 HTML 就和 Bootstrap 的一模一样了,因为我们使用了 Bootstrap 的分页样式,WP-Pagenavi 自带的分页 CSS 样式就没用了,我们可以在 WP-Pagenavi 设置中禁用掉了。

智库点评:Bootstrap 是一个如此流行的前段框架,如果 WP-Pagenavi 能提供对 Bootstrap 样式的支持,只需要在后台选中 Bootstrap 支持,即可实现本文中的效果,用户体验无疑增加了很多。

本站提供 WordPress 主题定制开发服务

本站长期承接 WordPress 主题、插件、基于 WooCommerce 的商店商城开发业务。 我们有 8 年 WordPress 开发经验,如果你想 用 WordPress 开发网站, 请联系 QQ: 470266798,或邮箱: 4626395@gmail.com 咨询。

One thought on “修改 WP-Pagenavi 样式为 Bootstrap 数字分页导航样式

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*