Почему пагинация для категорий важна в WordPress
Пагинация — это ключевой элемент удобной навигации по сайту. Особенно это актуально для категорий, где может быть много записей. Без корректной пагинации пользователи рискуют потеряться и не найти нужную информацию, а поисковые системы — не смогут эффективно индексировать контент.
В WordPress по умолчанию пагинация для категорий работает, но часто требуется её кастомизация для улучшения юзабилити и SEO. В этой статье разберем, как сделать пагинацию именно для категорий, учитывая особенности WordPress и показывая практические примеры.
Стандартная пагинация категорий в WordPress и её ограничения
При переходе в категорию, WordPress автоматически показывает записи с параметром paged для постраничной навигации. Однако стандартная пагинация часто выглядит просто и не всегда удобна. Например, не всегда корректно работает с пользовательскими запросами WP_Query или при использовании нестандартных шаблонов.
Ограничения стандартной пагинации:
- Отсутствие гибкой настройки внешнего вида.
- Проблемы с SEO при неправильно организованной структуре ссылок.
- Сложности с AJAX-подгрузкой и динамическим обновлением контента.
Поэтому полезно знать, как создавать и настраивать пагинацию для категорий вручную или с помощью плагинов.
Создаем кастомную пагинацию для категорий с помощью WP_Query
Для начала рассмотрим пример, как вручную вывести пагинацию для категории с использованием WP_Query. Такой подход дает полный контроль над запросом и выводом пагинации.
Пример кода кастомного запроса и пагинации
function wppagenavi_custom_category_pagination() {
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'post_type' => 'post',
'category_name' => 'novosti', // замените на нужный слаг категории
'posts_per_page' => 5,
'paged' => $paged
);
$query = new WP_Query($args);
if ($query->have_posts()) :
while ($query->have_posts()) : $query->the_post();
// Ваш вывод записи
the_title('<h3>','</h3>');
the_excerpt();
endwhile;
// Вывод пагинации
$big = 999999999; // уникальное число для замены
echo paginate_links(array(
'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
'format' => '?paged=%#%',
'current' => max(1, $paged),
'total' => $query->max_num_pages,
'prev_text' => '« Назад',
'next_text' => 'Вперед »'
));
endif;
wp_reset_postdata();
}Этот код можно вставить в файл шаблона категории (category.php) или в кастомный шаблон. Он выводит посты категории "novosti" по 5 штук на страницу с пагинацией.
Пояснения к коду
Мы используем get_query_var('paged') для определения текущей страницы. Далее создаем новый объект WP_Query с параметрами, включая paged. После вывода записей вызываем paginate_links для генерации ссылок пагинации с кастомными текстами.
Использование плагина WP-PageNavi для пагинации категорий
Если хочется быстро и легко получить продвинутую пагинацию без ручного кода, можно использовать плагин WP-PageNavi. Он позволяет настроить внешний вид пагинации через настройки и автоматически заменяет стандартные навигационные ссылки.
После установки и активации плагина вставьте в шаблон категорий вместо стандартной функции:
if (function_exists('wp_pagenavi')) {
wp_pagenavi(array('query' => $query));
} else {
// стандартный paginate_links
}Обратите внимание, что для кастомных запросов нужно передавать объект WP_Query в параметре query.
AJAX пагинация для категорий: улучшение UX
Для сайтов с большим количеством записей полезно реализовать AJAX пагинацию — подгрузку контента без перезагрузки страницы. Это повышает скорость работы и удобство для пользователя.
Общая схема AJAX пагинации
- При клике на номер страницы или кнопку «Следующая» отправляем AJAX-запрос на сервер.
- Сервер возвращает HTML с новыми постами категории.
- Вставляем полученный контент на страницу, обновляем пагинацию.
Рассмотрим базовый пример реализации AJAX пагинации для категории на jQuery и PHP.
Код для functions.php
add_action('wp_enqueue_scripts', 'wppagenavi_enqueue_scripts');
function wppagenavi_enqueue_scripts() {
if (is_category()) {
wp_enqueue_script('wppagenavi-ajax', get_template_directory_uri() . '/js/wppagenavi-ajax.js', array('jquery'), null, true);
wp_localize_script('wppagenavi-ajax', 'wppagenavi_ajax_obj', array(
'ajaxurl' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('wppagenavi_ajax_nonce')
));
}
}
add_action('wp_ajax_wppagenavi_load_posts', 'wppagenavi_load_posts_callback');
add_action('wp_ajax_nopriv_wppagenavi_load_posts', 'wppagenavi_load_posts_callback');
function wppagenavi_load_posts_callback() {
check_ajax_referer('wppagenavi_ajax_nonce', 'nonce');
$paged = isset($_POST['page']) ? intval($_POST['page']) : 1;
$cat = get_queried_object();
$args = array(
'post_type' => 'post',
'category_name' => $cat->slug,
'posts_per_page' => 5,
'paged' => $paged
);
$query = new WP_Query($args);
if ($query->have_posts()) {
ob_start();
while ($query->have_posts()) {
$query->the_post();
?><h3><?php the_title(); ?></h3><?php
the_excerpt();
}
$content = ob_get_clean();
wp_send_json_success(array('content' => $content, 'max_page' => $query->max_num_pages));
} else {
wp_send_json_error('Нет записей');
}
wp_die();
}JavaScript (js/wppagenavi-ajax.js)
jQuery(document).ready(function($) {
var currentPage = 1;
var maxPage = 1;
function loadPosts(page) {
$.ajax({
url: wppagenavi_ajax_obj.ajaxurl,
type: 'POST',
dataType: 'json',
data: {
action: 'wppagenavi_load_posts',
nonce: wppagenavi_ajax_obj.nonce,
page: page
},
success: function(response) {
if (response.success) {
$('#wppagenavi-posts').html(response.data.content);
maxPage = response.data.max_page;
currentPage = page;
updatePagination();
} else {
$('#wppagenavi-posts').html('<p>Записей не найдено.</p>');
}
}
});
}
function updatePagination() {
var paginationHtml = '';
if (currentPage > 1) {
paginationHtml += '<button id="prev-page">« Назад</button>';
}
if (currentPage < maxPage) {
paginationHtml += '<button id="next-page">Вперед »</button>';
}
$('#wppagenavi-pagination').html(paginationHtml);
}
// Инициализация
loadPosts(1);
// Обработчики кнопок
$(document).on('click', '#prev-page', function() {
if (currentPage > 1) {
loadPosts(currentPage - 1);
}
});
$(document).on('click', '#next-page', function() {
if (currentPage < maxPage) {
loadPosts(currentPage + 1);
}
});
});HTML-разметка для вывода
В шаблоне категории добавьте контейнеры для вывода постов и пагинации:
<div id="wppagenavi-posts"></div>
<div id="wppagenavi-pagination"></div>Советы по SEO и UX при создании пагинации категорий
Чтобы пагинация работала эффективно и для пользователей, и для поисковиков, учитывайте несколько правил:
- Используйте канонические ссылки (
rel="canonical") для страниц пагинации. - Добавляйте метатеги
rel="next"иrel="prev"для связки страниц. - Убедитесь, что URL пагинации чистые и понятные (например, /category/novosti/page/2/).
- Не перегружайте страницу слишком большим количеством ссылок — оптимально 5–7 страниц показывать.
- Для AJAX пагинации реализуйте прогрессивное улучшение, чтобы при отключенном JS пагинация оставалась доступна.
В WordPress можно использовать SEO-плагины (например, Yoast SEO), которые автоматически добавляют нужные метатеги для пагинации.
Заключение: что использовать для пагинации категорий в WordPress
Если нужен быстрый результат — подойдет плагин WP-PageNavi с базовой настройкой. Для полного контроля — лучше писать собственную пагинацию на WP_Query. Для улучшения UX стоит рассмотреть AJAX пагинацию, но при этом обязательно поддерживать базовую навигацию без JS.
Понимание работы пагинации и её тонкостей в WordPress позволит создавать удобные и функциональные сайты с большим объемом контента в категориях.