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

Опубликовано: 20 августа 2017
Раздел(ы): WordPress
Просмотры: 27633
Комментарии: 9

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

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

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

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

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

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

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


Плагин 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/

Обсуждение (комментарии к статье)

  1. Не могу найти код <?php the_posts_pagination() — искал и в категориях и в индекс php.navigation pagination тоже искал — ничего не находит. У меня вот такой код функции только: twentyfourteen_paging_nav.
    Как ее править??? А главное, где ее искать??? В функтионс пхп ее нет. Напишите пожалуйста.

  2. Здравствуйте.
    Почему пагинация для произвольного типа записей не работает.
    То есть, я в настройках прописал, чтобы выводилось по 2 записи на странице, а для записей портфолио через цикл wp_query указал выводится 10, но у меня пагинация выводится как для 2 записей.

    https://toster.ru/q/653026

  3. Здравствуйте! Интересная статья. Я как раз делаю постраничную навигацию на своем сайте. Вы пишете, чтобы удалить заголовок необходимо прописать код:

    add_filter(‘navigation_markup_template’, ‘my_navigation_template’, 10, 2 );
    function my_navigation_template( $template, $class ){
    return ‘

    %3$s

    ‘;
    }
    Поясните пожалуйста, что делает данный код? Не совсем понятно.
    Спасибо!

    1. Здравствуйте!
      Стандартный шаблон вывода функции the_posts_pagination() выглядит так:

      <nav class="navigation %1$s" role="navigation">
      <h2 class="screen-reader-text">%2$s</h2>
      <div class="nav-links">%3$s</div>
      </nav>
      

      После применения фильтра не будет вывода тега H2.
      Этим фильтром мы переопределяем шаблон вывода для функции the_posts_pagination()
      Содержимое тега H2 находится в переменной %2$s.

      Параметр %3$s — это переменная (массив) с данными, а именно блок ссылок постраничной навигации. Который выглядит примерно так:

      <span class="page-numbers current">1</span>
        <a class="page-numbers" href="http://domainname.tld/page/2/" rel="nofollow ugc">2</a>
        <span class="page-numbers dots">…</span>
        <a class="page-numbers" href="http://domainname.tld/page/98/" rel="nofollow ugc">98</a>
        <a class="page-numbers" href="http://domainname.tld/page/99/" rel="nofollow ugc">99</a>
        <a class="next page-numbers" href="http://domainname.tld/page/2/" rel="nofollow ugc">Следующая страница</a>
      

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Нажимая кнопку "Отправить" Вы даёте свое согласие на обработку введенной персональной информации в соответствии с Федеральным Законом №152-ФЗ от 27.07.2006 "О персональных данных", на условиях и для целей определенных политикой конфиденциальности сайта.
© Юрий Рассадников, 2011 - 2024
uptime узнать
Домен : reg.ru
Хостинг : adman.com
SQL - 6 | 0,182 сек. | 13.95 МБ