WP-PageNavi是非常好用的WordPress分页插件,Bootstrap又是一个非常好的前端开发框架,利用Pagination来显示WP-PageNavi的分页效果需要整合起来。
WordPress主题functions.php
中插入:
/** * WP-PageNavi * CHANGING CLASS NAMES * https://wordpress.org/plugins/wp-pagenavi/ */ // Simple Usage - 1 callback per filter add_filter('wp_pagenavi_class_pages', 'theme_pagination_pages_class'); add_filter('wp_pagenavi_class_previouspostslink', 'theme_pagination_previouspostslink_class'); add_filter('wp_pagenavi_class_nextpostslink', 'theme_pagination_nextpostslink_class'); add_filter('wp_pagenavi_class_current', 'theme_pagination_current_class'); add_filter('wp_pagenavi_class_page', 'theme_pagination_page_class'); function theme_pagination_pages_class($class_name) { return 'page-link disabled'; } function theme_pagination_previouspostslink_class($class_name) { return 'page-link'; } function theme_pagination_current_class($class_name) { return 'page-link current'; } function theme_pagination_nextpostslink_class($class_name) { return 'page-link'; } function theme_pagination_page_class($class_name) { return 'page-link'; }
主题的JS相关文件中插入:
/** * ------------------------------------------------------------------------ * WP-PageNavi Bootstrap Pagination * ------------------------------------------------------------------------ */ $('.wp-pagenavi a,.wp-pagenavi span').wrap('<li class="page-item"></li>') $('.wp-pagenavi .page-link.current').parent().addClass('active') const pagenaviHtml = '<ul class="pagination">' + $('.wp-pagenavi').html() + '</ul>' $('.wp-pagenavi').html(pagenaviHtml).addClass('d-inline-block')