WP-PageNavi分页插件整合Bootstrap Pagination

WP-PageNavi是非常好用的WordPress分页插件,Bootstrap又是一个非常好的前端开发框架,利用Pagination来显示WP-PageNavi的分页效果需要整合起来。

WP-PageNavi Bootstrap Pagination
WP-PageNavi Bootstrap Pagination

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

分类 WordPress技巧 本文由 清白之年 原创发布,转载请注明文章来源。

发表评论

您的电子邮箱地址不会被公开。