WordPress пагинация Bootstrap

Если вы используете Twitter Bootstrap 4 на своём сайте WordPress, то для удобного вывода постраничной навигации (пагинации) в стиле Фреймворка предлагаю готовое решение.

Создадим необходимые стили:

/**
 * Paginated navigation markup for Bootstrap 4.
 * 
 * @param  array $links The paginate links.
 * @param  array $args  Array or string of arguments for generating paginated links for archives.
 * @return string       Navigation template tag.
 */
function bootstrap_paginate_links_data( $links, $args ) {
	$navigation = '';

	if ( $links ) {
		$pagination = '<ul class="pagination pagination-sm flex-wrap justify-content-center">';

		foreach ( $links as $link ) {
			$active   = strpos( $link, 'current' );
			$disabled = strpos( $link, 'dots' );
			$link     = str_replace( 'page-numbers', 'page-numbers page-link', $link );

			if ( $active ) {
				$pagination .= "<li class=\"page-item active\">$link</li>";
			} elseif ( $disabled ) {
				$pagination .= "<li class=\"page-item disabled\">$link</li>";
			} else {
				$pagination .= "<li class=\"page-item\">$link</li>";
			}
		}
		$pagination .= '</ul>';
		$navigation  = _navigation_markup( $pagination, 'pagination-nav', $args['screen_reader_text'] );
	}

	return $navigation;
}

Теперь используем функцию, которая формирует код наподобие get_the_posts_pagination(), но уже совместимый с Bootstrap:

/**
 * Retrieves a paginated navigation. Bootstrap 4 compatible.
 * 
 * @return string The navigation markup.
 */
function get_the_bootstrap_pagination() {
	global $wp_query;
	$navigation = '';
	$big        = 999999999; // need an unlikely integer.

	$args = array(
		'base'               => str_replace( $big, '%#%', wp_specialchars_decode( esc_url( get_pagenum_link( $big ) ) ) ),
		'format'             => '?paged=%#%',
		'current'            => max( 1, get_query_var( 'paged' ) ),
		'total'              => $wp_query->max_num_pages,
		'screen_reader_text' => __( 'Posts navigation', 'textdomain' ),
		'end_size'           => 1,
		'mid_size'           => 3,
		'prev_text'          => '&laquo;',
		'next_text'          => '&raquo;',
		'type'               => 'array',
	);

	// Set up paginated links.
	$links      = paginate_links( $args );
	$navigation = bootstrap_paginate_links_data( $links, $args );

	return $navigation;
}

Коды необходимо использовать в файле functions.php темы WordPress.
Параметры можно изменять аналогично функции paginate_links().

Пример использования в шаблоне:

echo get_the_bootstrap_pagination();

Пример работы можно посмотреть на данном сайте, где в разделах есть более одной страницы.

Как подключить Bootstrap через CDN смотрите здесь.
А в этой статье подробно рассказано как создать алфавитную навигацию.

onstartup.ru
Метки:  |  |