В процессе создания сайта у любого вебмастера возникает необходимость сделать удобную навигацию для пользователей, чтобы они легко и быстро находили нужную информацию. И сегодняшний пост будет посвящён пагинации и как сделать пагинацию WordPress на своем сайте.
Что такое пагинация
Что такое пагинация — это ссылки чаще всего нумерованные, которые используются для разделения большого количества данных сайта на отдельные страницы. Подобные ссылки применяются для упорядочивания информации веб-ресурса. Особенно полезно для огромных интернет ресурсов с большим количеством товарных позиций. С помощью пагинации каталоги товаров размерено распределяются по сайту для удобства просмотра товаров или контента пользователями.
Виды пагинации
Пагинации бывают следующих видов:
- Нумерованные или числовые страницы пагинации «1,2,3.... и т.д.» — Как было сказано выше это наиболее распространенный вид.
- Алфавитные или буквенные страницы пагинации — Отличается от предыдущего тем, что поиск осуществляется по алфавиту.
- Бесконечная прокрутка или «Показать еще» — Новые элементы подгружаются по клику «Показать еще» или при достижении определенной позиции, тем самым создается эффект бесконечного цикла (прокрутки).
- Комбинированная или универсальная — Это сочетание вышеперечисленных видов.
Сегодня многие ведущие интернет магазины используют пагинацию. Благодаря ей улучшается юзабилити сайта. Также это хорошо сказывается на скорости загрузки страниц сайта, т.к. большое количество товарных позиций загружаются не на одну страницу, а распределены на множество разных страниц.
Как сделать пагинацию WordPress
Раньше, чтобы сделать пагинацию WordPress приходилось использовать плагины и это было не очень удобно, т.к. лишние плагины только тормозили сайт. В современных версиях Вордпресс эта проблема была решена появлением встроенной функции «the_posts_pagination». Этой функцией мы и воспользуемся для создания пагинации в WordPress.
Данный код необходимо прописать в файле вашей темы «index.php» или «category.php». Чаще всего это «index.php», в нем напишите следующий код:
<?php the_posts_pagination(); ?>
После чего после загрузки главной страницы у вас появится следующая запись:
Теперь эту пагинацию надо настроить, например убрать ненужный текст «Навигация по записям» и выделить красным цветом текущую страницу. Для этого в css стилях «style.php» напишите код:
.pagination .screen-reader-text {
display:none;
}
.pagination .current {
color:red;
}
Функция «the_posts_pagination» по умолчанию показывает первый и последний номера страниц. Но его можно настроить для вывода определённого количества номеров страниц с разных сторон. Чтобы сделать это, напишите внутри круглых скобок функции «the_posts_pagination» следующий блок кода:
<?php
the_posts_pagination(
array(
'mid_size' => 2,
'end_size' => 2
)
);
?>
Объяснение примера:
- mid_size — Выводит указанное количество номеров страниц справой и с левой стороны от текущей.
- end_size — Выводит указанное количество номеров страниц в начале и в конце списка.
- show_all — Если укажите этот параметр «'show_all' => true», то выйдут все номера страниц. Данный аргумент может подойти для небольших ресурсов, где мало страниц.
Таким же образом можно изменить вывод текста «Назад» и «Далее». Смотрите очередной пример:
<?php
the_posts_pagination(
array(
'prev_text' => '<span class="nav-prev">«Предыдущая </span>' ,
'next_text' => '<span class="nav-next"> Следующая»</span>'
)
);
?>
В стилях пропишите этот код:
.pagination .screen-reader-text {
display:none;
}
.pagination .current {
color:red;
}
.pagination .nav-prev, .pagination .nav-next{
color:blue;
}
Конечный вывод будет таким:
Вы также можете убрать весь текст для этого нужно написать аргументы с пустыми значениями «'prev_text' => '', 'next_text' => ''».
К номерам пагинации можно добавлять любой текст смотрите следующий пример:
<?php
the_posts_pagination(
array(
'prev_text' => '<span class="nav-prev">«Предыдущая </span>' ,
'next_text' => '<span class="nav-next"> Следующая»</span>',
'before_page_number' => '<span class="nav-page">' . 'Страница' . ' </span>'
)
);
?>
Здесь через аргумент «before_page_number» мы добавили к каждому номеру теговый узел с текстом «Страница».
Вот так легко можно сделать пагинацию WordPress сайта и изменять его по своему вкусу.