WordPress小知识|修改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内容,有了这个过滤函数,一切变得简单多了。

  1. //挂载自定义函数到wp_pagenavi过滤函数上
  2. add_filter( ‘wp_pagenavi’, ‘ik_pagination’, 10, 2 );
  3. //输出前通过字符串替换自定义html结构
  4. function ik_pagination($html) {
  5. $out = ;
  6. //wrap a’s and span’s in li’s
  7. $out = str_replace(“<div”,“”,$html);
  8. $out = str_replace(“class=’wp-pagenavi’>”,“”,$out);
  9. $out = str_replace(“<a”,“<li><a”,$out);
  10. $out = str_replace(“</a>”,“</a></li>”,$out);
  11. $out = str_replace(“<span”,“<li><span”,$out);
  12. $out = str_replace(“</span>”,“</span></li>”,$out);
  13. $out = str_replace(“</div>”,“”,$out);
  14. return ‘<div class=“pagination pagination-centered”>
  15. <ul>’.$out.'</ul>
  16. </div>’;
  17. }

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

  1. 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支持,即可实现本文中的效果,用户体验无疑增加了很多。

本文参考于https://www.wpzhiku.com/modify-wp-pagenavi-style-to-bootstrap-pagenavi-style/   ,若有任何来源问题,请联系QQ:1516677079 及时更正。

最有意思的设计站点


最好的UI素材库

我们极力推荐: