Как сделать Bootstrap 4 пагинацию для Wordpress?! Быстро, просто, красиво.

В прошлой статье я говорил, что напишу про то, как сделал пагинацию на своём новом сайте. И вот прошло немного времени и у меня появилось свободное время. Пора написать новую статью. Тем, кто стремиться сделать свой сайт полностью соответствующим вёрстке bootstrap 4 пригодиться. Это очень простая реализация.

Bootstrap-wordpress-pagination

Bootstrap-wordpress-pagination – это функция которая нам понадобиться для создания bootstrap пэйджера для wordpress. Файл с функцией вы можете скачать с репозитория автора функции оп данной ссылке: bootstrap-wordpress-pagination  или с моего сайта если репозиторий будет почему-то недоступен. Вот ссылка: wp-bootstrap-navwalker.zip. Далее будет несколько шагов.

Шаг 1. Подключение

Кладём распакованный файл в директорию с темой, в её корень или папку например /bootstrap. Далее подключаем файл не забывая указать правильный путь к папке с файлом wp_bootstrap_pagination.php. Вот такой код прописываем в файл function.php

/**
 *  Require bootstrap pager
 */
if( file_exists( get_template_directory() . '/bootstrap/Bootstrap-wordpress-pagination-master/wp_bootstrap_pagination.php' )){
    require_once get_template_directory() . '/bootstrap/Bootstrap-wordpress-pagination-master/wp_bootstrap_pagination.php';
}

Есть некоторые тонкости в подключении для дочерних тем, но об этом я писал в статье про bootstrap 4 меню для wordpress.

Шаг 2. Вызываем пагинацию

Вызывать пагинацию нужно на странице которой выводятся записи в цикле или, например, выводятся результаты поиска. Стандартно пагинация может использоваться в шаблоне сайта в файле index.php, search.php, category.php, archive.php. Вам придётся добавить вашу пагинацию в каждый из перечисленных шаблонов.

Код вызова постраничной навигации:

<?php
/** Bootstrap 4 pagination
* 	for WordPress
*/
	if ( function_exists('wp_bootstrap_pagination') )
	wp_bootstrap_pagination();

?>

Обратите внимание что пэйджер (постраничную навигацию) нужно вызывать вне цикла вывода записей. Про цикл wordpress я уже писал в начале этой статьи. И обязательно удалите на станицах вызов стандартной функции wordpress the_posts_pagination().

Шаг 3. Изменение стилей

Разработчик данной функции писал её для bootstrap версии 3, но она актуальна и для 4-й версии bootstrap, нужно лишь добавить стили «бутстраповской» пагинации. Если вы скачаете файл с моего сайта вам их не придётся менять. Но я объясню, что нужно будет сделать и для первоначальной версии файла. Нужно открыть файл wp_bootstrap_pagination.php и изменить следующий массив:

// Исходный массив 
    $defaults = array(
        'range'           => 4,
        'custom_query'    => FALSE,
        'previous_string' => __( 'Previous', 'text-domain' ),
        'next_string'     => __( 'Next', 'text-domain' ),
        'before_output'   => '<div class="post-nav"><ul class="pager">',
        'after_output'    => '</ul></div>'
    );

На новый массив:

// Новый массив
    $defaults = array(
        'range'           => 4,
        'custom_query'    => FALSE,
        'previous_string' => __( 'Previous', 'text-domain),
        'next_string'     => __( 'Next', 'text-domain'),
        'before_output'   => '<nav aria-label="Page navigation example"><ul class="pagination justify-content-center">',
        'after_output'    => '</ul></nav>'
    );

После этого всё должно заработать. Готово!

P.S.

Если у вас что-то не получилось, не стесняйтесь, напишите мне в ВК или директ Instagram. Думаю , что смогу вам помочь,  а пока подписывайтесь на меня в инстаграме, во вконтакте (ссылки в подвале), пользуйтесь моим сервисом строки, ищите вхождения ключевых фраз. Поддержите проект, зарегистрируйтесь по реферальной ссылке на хостинге beget, он действительно классный, о нём вы можете прочитать в этом отзыве.