Пагинация wordpress — постраничная навигация без плагина

На главной странице, а так же на страницах рубрик, архивов и в результатах поисках, как правило нужна постраничная навигация (так же известная как пагинация). Блоги на WordPress не являются исключением, они так же используют пагинацию, когда результаты вывода информации разбиваются на несколько страниц.

Ранее для реализации этой возможности использовались сторонние плагины, либо специальные функции, которые размещались в файле functions.php. Однако с выходом WordPress версии 4.1 функция пагинации была встроена в ядро CMS, и теперь для реализации постраничной навигации достаточно внутренних функций WordPress и нет никакой необходимости добавлять сторонний код или плагины.

Я писал ранее о подобном улучшении со стороны WordPress в отношении тега TITLE — https://aboutwordpress.ru/post/wordpress-title/.

Что такое пагинация

Пагинация — это разбиение информации на страницы. Также под этим понятием подразумевают порядковую нумерацию страниц, обозначаемых цифрами, располагаемыми внизу, вверху или сбоку страницы.

WP-PageNavi — плагин пагинации WordPress

Самым популярным плагином пагинации для WordPress является WP-PageNavi. По-совести говоря, он настолько хорошо справляется с поставленной задачей пагинации, что обсуждать и сравнивать остальные плагины нет никакого смысла.

Пагинация WordPress - плагин WP-PageNavi

Пагинация wordpress без плагина

Для того чтобы сделать пагинацию на сайте без плагинов мы воспользуемся встроенной WordPress функцией the_posts_pagination(). В нужном нам месте необходимо вставить следующий код (как правило это файлы index.php, category.php и им подобные):

<?php the_posts_pagination(); ?>

Результатом работы функции 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://domainname.tld/page/2/">2</a>
  <span class="page-numbers dots">…</span>
  <a class="page-numbers" href="http://domainname.tld/page/98/">98</a>
  <a class="page-numbers" href="http://domainname.tld/page/99/">99</a>
  <a class="next page-numbers" href="http://domainname.tld/page/2/">Следующая страница</a>
 </div>
</nav>

Удаляем заголовок H2 из пагинации

Сразу бросается в глаза H2-заголовок «Навигация по записям». Которому в большинстве случаев не место на сайте. Чтобы от него избавиться добавим следующий код в файл functions.php:

/* Удаляем H2 из пагинации */ 
add_filter('navigation_markup_template', 'my_navigation_template', 10, 2 );
function my_navigation_template( $template, $class ){
 return '
 <nav class="%1$s" role="navigation">
  <div class="nav-links">%3$s</div>
 </nav>    
 ';
}

Настраиваем страницы пагинации

По умолчанию the_posts_pagination() отображает первую и последнюю страницу, а также по одной странице вокруг текущей. Все остальные заменяются многоточием. Это поведение можно изменить с помощью аргументов:

• show_all — показывать все страницы
• end_size — количество страниц в начале и конце списка
• mid_size — количество страниц слева и справа от текущей страницы

Например так:

<?php 
the_posts_pagination( array(
 'mid_size' => 2,
 'end_size' => 2,
) ); 
?>

Стили пагинации CSS

Если вам не нравятся текстовые ссылки, то их можно приукрасить, например так:

.page-numbers {
padding: 1% 2%;
box-shadow: 0 0 10px #ccc;
margin: 0 1% 0 0;
background: #fff;
border-radius: 3px;
}

Выглядеть ссылки на страницы пагинации при таких стилях будут следующим образом:

Впечатления о встроенной функции пагинации WordPress

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

Полезные ссылки

При написании статьи были использованы следующие источники:

1. https://wp-kama.ru/function/the_posts_pagination
2. https://wpmag.ru/2014/pagination-functions/