Введение
Если вы используете «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 |
bs_the_posts_pagination()Для навигации в комментариях
Эта функция хорошо подходит для файла 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 |
bs_the_comments_pagination()А в этой статье подробно рассказано как создать алфавитную навигацию для WordPress.