WordPress пагинация Bootstrap

Содержание

Введение

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

Обсудить на форуме

Добавление кода на сайт

Отредактируйте файл functions.php текущей темы WordPress. Предполагается, что сам «Bootstrap 4» на вашем сайте уже подключен, если нет, то посмотрите как подключить Bootstrap к WordPress через CDN.

Фильтр для элемента nav

Установим для тега <nav> атрибут role="navigation", как того требует руководство. Для этого воспользуемся фильтром navigation_markup_template.

/**
 * Filters the navigation markup template.
 * Compatible with Bootstrap 4.
 * 
 * @param  string $template The default template.
 * @return string           The navigation markup.
 */
function bs_navigation_markup_template( $template ) {
	$template = str_replace( '"navigation %1$s"', '"navigation %1$s" role="navigation"', $template );

	return $template;
}
add_filter( 'navigation_markup_template', 'bs_navigation_markup_template', 10, 2 );

Функция разметки списка меню

Подготовим специальную функцию на замену стандартной _navigation_markup(), просто передадим ей подходящий вариант HTML списка меню.

/**
 * Paginated navigation markup.
 * Compatible with 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 bs_navigation_markup( $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, $args['class'], $args['screen_reader_text'], $args['aria_label'] );
	}

	return $navigation;
}

Обсудить на форуме

Функции вывода пагинации Bootstrap

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

Установите текстовый домен для перевода вашей темы программой Poedit:

1. Откройте файл style.css и скопируйте значение параметра Text Domain.

2. Замените 'textdomain' в последующих кодах.

/**
 * Retrieves a paginated navigation to next/previous set of posts, when applicable.
 * Compatible with Bootstrap 4.
 *
 * @param array $args {
 *     Optional. Default pagination arguments, see paginate_links().
 *
 *     @type string $screen_reader_text Screen reader text for navigation element.
 *                                      Default 'Posts navigation'.
 *     @type string $aria_label         ARIA label text for the nav element. Default 'Posts'.
 *     @type string $class              Custom class for the nav element. Default 'posts-pagination'.
 * }
 * @return string Markup for pagination links.
 */
function bs_get_the_posts_pagination( $args = array() ) {
	$navigation = '';

	// Don't print empty markup if there's only one page.
	if ( $GLOBALS['wp_query']->max_num_pages > 1 ) {

		// Make sure the nav element has an aria-label attribute: fallback to the screen reader text.
		if ( ! empty( $args['screen_reader_text'] ) && empty( $args['aria_label'] ) ) {
			$args['aria_label'] = $args['screen_reader_text'];
		}

		$args = wp_parse_args(
			$args,
			array(
				'end_size'           => 1,
				'mid_size'           => 3,
				'prev_next'          => false,
				'prev_text'          => _x( 'Previous', 'previous set of posts', 'textdomain' ),
				'next_text'          => _x( 'Next', 'next set of posts', 'textdomain' ),
				'type'               => 'array',
				'screen_reader_text' => __( 'Posts navigation', 'textdomain' ),
				'aria_label'         => __( 'Posts', 'textdomain' ),
				'class'              => 'posts-pagination',
			)
		);

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

		if ( $links ) {
			$navigation = bs_navigation_markup( $links, $args );
		}
	}

	return $navigation;
}

/**
 * Displays a paginated navigation to next/previous set of posts, when applicable.
 * Compatible with Bootstrap 4.
 *
 * @param array $args Optional. See bs_get_the_posts_pagination() for available arguments.
 *                    Default empty array.
 */
function bs_the_posts_pagination( $args = array() ) {
	echo bs_get_the_posts_pagination( $args );
}

Пагинация Bootstrap для комментариев

Для вывода постраничной навигации в комментариях WordPress часто применяют функцию get_the_comments_pagination(), cделаем ей замену совместимую с Bootstrap 4.

Не забудьте настроить разбивку комментариев верхнего уровня: Настройки — Обсуждение.

/**
 * Retrieves a paginated navigation to next/previous set of comments, when applicable.
 * Compatible with Bootstrap 4.
 *
 * @param array $args {
 *     Optional. Default pagination arguments.
 *
 *     @type string $screen_reader_text Screen reader text for the nav element. Default 'Comments navigation'.
 *     @type string $aria_label         ARIA label text for the nav element. Default 'Comments'.
 *     @type string $class              Custom class for the nav element. Default 'comments-pagination'.
 * }
 * @return string Markup for pagination links.
 */
function bs_get_the_comments_pagination( $args = array() ) {
	$navigation = '';

	// Make sure the nav element has an aria-label attribute: fallback to the screen reader text.
	if ( ! empty( $args['screen_reader_text'] ) && empty( $args['aria_label'] ) ) {
		$args['aria_label'] = $args['screen_reader_text'];
	}

	$args = wp_parse_args(
		$args,
		array(
			'prev_text'          => _x( 'Previous', 'previous set of comments', 'textdomain' ),
			'next_text'          => _x( 'Next', 'next set of comments', 'textdomain' ),
			'type'               => 'array',
			'echo'               => false,
			'screen_reader_text' => __( 'Comments navigation', 'textdomain' ),
			'aria_label'         => __( 'Comments', 'textdomain' ),
			'class'              => 'comments-pagination',
		)
	);

	$links = paginate_comments_links( $args );

	if ( $links ) {
		$navigation = bs_navigation_markup( $links, $args );
	}

	return $navigation;
}

/**
 * Displays a paginated navigation to next/previous set of comments, when applicable.
 * Compatible with Bootstrap 4.
 *
 * @param array $args See bs_get_the_comments_pagination() for available arguments. Default empty array.
 */
function bs_the_comments_pagination( $args = array() ) {
	echo bs_get_the_comments_pagination( $args );
}

Обсудить на форуме

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

Пример работы можно посмотреть на данном сайте, где в разделах есть более одной страницы. Обе функции принимают массив со следующими необязательными параметрами:

screen_reader_text, aria_label, class.

Для архивов записей

Как правило, данная функция добавляется в файл archive.php.

Без параметров:

bs_the_posts_pagination();

С параметрами:

bs_the_posts_pagination(
	array(
		'screen_reader_text' => __( 'Posts navigation', 'textdomain' ),
		'aria_label'         => __( 'Posts', 'textdomain' ),
		'class'              => 'posts-pagination',
	)
);

Параметр	Тип	Значение по умолчанию	Обязательный	Информация
screen_reader_text	string	Posts navigation	Нет	Текст для программ чтения с экрана
aria_label	string	Posts	Нет	Атрибут aria-label для элемента nav
class	string	posts-pagination	Нет	Установить класс для элемента nav

Для навигации в комментариях

Эта функция хорошо подходит для файла comments.php.

Без параметров:

bs_the_comments_pagination();

С параметрами:

bs_the_comments_pagination(
	array(
		'screen_reader_text' => __( 'Comments navigation', 'textdomain' ),
		'aria_label'         => __( 'Comments', 'textdomain' ),
		'class'              => 'comments-pagination',
	)
);

Параметр	Тип	Значение по умолчанию	Обязательный	Информация
screen_reader_text	string	Comments navigation	Нет	Текст для программ чтения с экрана
aria_label	string	Comments	Нет	Атрибут aria-label для элемента nav
class	string	comments-pagination	Нет	Установить класс для элемента nav

А в этой статье подробно рассказано как создать алфавитную навигацию для WordPress.