修改 wp-kb88凯时官网登录

时间:2018-11-14
阅读:
免费资源网 - https://freexyz.cn/

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

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("","",$out);
$out = str_replace("","",$out);
$out = str_replace("","",$out);
$out = str_replace("
","",$out); return ''; }

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

return '
    '.$out.'
';

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

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

免费资源网 - https://freexyz.cn/
返回顶部
顶部
网站地图