WP-PageNavi分页插件整合Bootstrap Pagination

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')