Постраничная навигация WordPress с помощью the_posts_pagination()

Еще 18 декабря 2015 вышла новая версия WordPress. Версия 4.1 включала в себя несколько новых функций одна из которых как раз и есть нужная нам - the_posts_pagination(). Разработчики WordPress побеспокоились о нас с вами и добавили такую замечательную функцию. Теперь Вы можете не устанавливать плагины типа WP-PageNavi или использовать код на подобии того, что я показывал в статье - Постраничная навигация в WordPress без плагина.

Чтобы вывести навигацию, Вам просто нужно добавить вызов функции в нужное место на странице и все. Делать это нужно в файлы, где выводится цикл. Например, в index.php, archive.php, category.php, search.php и тд. Вам нужно найти цикл, он выглядит примерно так:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>  
// Тут код вывода текстов записи миниатюр и тд.
<?php endwhile; ?>  
<?php endif; ?> 

Дале Вам нужно после endwhile; добавить нашу функцию the_posts_pagination(). В итоге у Вас получится:

<?php endwhile; the_posts_pagination() ?>  
<?php endif; ?> 
// Или так
<?php endwhile; ?>  
<?php the_posts_pagination() ?> 
<?php endif; ?> 

Так же, если у Вас там есть вызов плагина wp_pagenavi() или самописного кода wp_corenavi();, можете удалить их. теперь они ни к чему. Их работу выполнит наша новая функция the_posts_pagination(). В результате у Вас внизу страницы должно появится вот такое поле с постраничной навигацией.

Если посмотреть на данную навигацию со стороны кода, HTML кода, который сгенерируется на странице, то он будет выглядеть примерно так:

<nav class="navigation pagination" role="navigation">
<h2 class="screen-reader-text">Навигация по записям</h2>
<div class="nav-links"><span class="page-numbers current">1</span>
<a class="page-numbers" href="http://localhost/?paged=2">2</a>
<span class="page-numbers dots">…</span>
<a class="page-numbers" href="http://localhost/?paged=5">5</a>
<a class="next page-numbers" href="http://localhost/?paged=2">Далее</a></div>
</nav>

Как видите, каждому элементу присвоены свои классы. При желании добавляете стили в файл style.css лежащий в папке с темой. Например, можно использовать стили которые я написал за 5 минут для данного урока:

.screen-reader-text{
font-size:20px;
line-height:40px;
}
.pagination .current .screen-reader-text {
position: static !important;
}
.pagination .page-numbers {
line-height:25px;
padding: 0 15px;
display: inline-block;
vertical-align:top;
color:#555;
font-weight: bold;
}

.pagination .page-numbers.current {
text-transform: uppercase;
font-size:25px;
background: #eee;
}

.pagination .current {
display: inline-block;
line-height:25px;
}

.pagination .prev,
.pagination .next {
background: #29AEE3;
color: #fff;
display: inline-block;
padding:0 5px;
}

.pagination .prev:hover,
.pagination .prev:focus,
.pagination .next:hover,
.pagination .next:focus {
background-color: #707070;
text-decoration:none;
}

В итоге у Вас получится Вот такая навигация, уже имеющая более-менее нормальный вид:

Данная функция имеет несколько настроек, которые помогут Вам немного настроить пагинацию, если конечно это нужно. Я напишу все настройки сразу, а Вы при желании ненужные строки просто удалите. То есть данный код вставляется в то же место где Вы просто вставляли the_posts_pagination();

<?php the_posts_pagination(
$args = array(
	'show_all'     => false,
	'end_size'     => 2,
	'mid_size'     => 2,
	'prev_next'    => true,
	'prev_text'    => '«',
	'next_text'    => '»',
	'add_args'     => false,
	'add_fragment' => '',
	'before_page_number' => '',
        'after_page_number' => '',
	'screen_reader_text' => 'Смотреть другие страницы',
))
?> 

После указания данных параметров, внешний вид немного изменился и теперь навигация выглядит так:

Давайте по порядку разберем, за что отвечает каждая из строк настроек.

• 'show_all' => false, - Показывать или нет все страницы которые есть на сайте. По умолчанию нет, потому как если их много будет что-то страшное 🙂
• 'end_size' => 2, - Количество страниц которые будут показаны в начале и в конце. Например, если в по умолчанию в начале и в конце по 1 цифре выглядит это так 1..6,7,8..99 и все. В данном примере мы установили значение 2. Значит у нас получится - 1,2..6,7,8..98,99. То есть чем больше значение, тем больше доступных в начале и конце.
• 'mid_size' => 2, - Количество страниц вокруг текущей страницы. По умолчанию 1, значит у нас получится 1..6,7,8..99 - текущая страница - 7, по бокам по одной странице. В данном примере установлено 2 и станет вот так - 1..5,6,7,8,9..99. Текущая тоже сем и по бокам по две доступные страницы.
• 'prev_next' => true, - Указывает нужно ли выводить кнопки по бокам, для переключения вперед или назад. То есть - предыдущая/следующая страница.
• 'prev_text' => '«', - То что будет в кнопке назад. Можете написать текст, символ или добавить иконку, используя статью - Иконки из шрифта Font Awesome
• 'next_text' => '»', - То же самое, только кнопка назад.
• 'add_args' => false, - Массив аргументов (переменных запроса), которые нужно добавить к ссылкам.
• 'add_fragment' => '', - В скобках можно добавить текст, который добавится к ссылкам. Пагинация продолжит работать без сбоев. Например, у Вас ссылка на третью страницу http://localhost/?paged=3, если Вы добавите в скобки слово page, то ссылка станет такой - http://localhost/?paged=3page.
• 'before_page_number' => 'страница', - Данный текст выведется перед каждым номером страницы. Например - страница1, страница2 и тд. Пример можно посмотреть
  
• 'after_page_number' => '!', - Этот текст выведется после номера страницы. На скриншоте выше это видно. В данном примере это просто знак восклицания.
• 'screen_reader_text' => 'Смотреть другие страницы', - Текст над пагинацией. По умолчанию это - Навигация по записям , но если вы в скобки введете свой текст, например как в примере - Смотреть другие страницы, то он заменит стандартный.

Вот и все настройки данной функции. Используя их и стили, можете настроить вывод навигации од себя и свою тему WordPress. Статья получилась не маленькая, но если разберетесь, то поймете, что сложного ничего нет. Данная функция упростит жизнь тем, кто хочет добавить постраничную навигацию себе в тему. Теперь больше не нужно использовать сторонних плагинов, создающих дополнительную нагрузку на сайт.

На этом все, спасибо за внимание. 🙂