Если пагинация на сайте выглядит слишком просто, сливается с фоном или не совпадает со стилем темы, чаще всего проблему можно решить обычным CSS. Для этого не нужно менять логику WordPress или ставить отдельный плагин: достаточно понять, какая разметка у навигации на вашем сайте, и аккуратно переопределить стили ссылок, текущей страницы и отступов.
Но есть важный нюанс: внешний вид пагинации зависит не только от WordPress, а ещё и от темы, конструктора и того, как именно вы выводите архивы, блог или список записей. Поэтому сначала стоит понять, какой тип навигации у вас используется, а уже потом править CSS.
Что именно можно изменить через CSS
С помощью CSS обычно настраивают не саму пагинацию как функцию, а её визуальное поведение:
- цвет и фон ссылок;
- рамки, скругление, тени;
- размер и высоту кликабельной области;
- состояние активной страницы;
- эффект при наведении;
- отступы между элементами;
- перенос на мобильных экранах.
Это подходит для стандартной пагинации архивов WordPress, для навигации по блогу, категориям, тегам, записям в каталоге и для плагинов, которые выводят собственную разметку. Но CSS работает только тогда, когда в HTML уже есть нужные элементы. Если тема выводит пагинацию нестандартно, селекторы придётся подбирать по фактической разметке.
Сначала найдите, какие классы использует ваша тема
У WordPress нет одного-единственного HTML-шаблона для пагинации на все случаи. В одной теме вы увидите обычные ссылки с классами вроде .page-numbers, .current, .prev и .next. В другой — обёртку .pagination или .nav-links. У плагинов и конструкторов разметка тоже может отличаться.
Самый надёжный способ — открыть страницу архива на сайте, нажать правой кнопкой по пагинации и выбрать просмотр кода элемента в браузере. Вам нужно понять:
- какой контейнер оборачивает навигацию;
- какие классы у ссылок;
- как отмечается активная страница;
- есть ли отдельные элементы для «Предыдущая» и «Следующая».
Именно от этого зависит, какие селекторы использовать. Универсальный CSS без проверки разметки часто не срабатывает или задевает лишние блоки.
Базовый пример стилизации пагинации
Ниже — рабочий пример для типичной разметки WordPress, где используются ссылки с классом .page-numbers. Его можно добавить в «Внешний вид» → «Настроить» → «Дополнительные стили» или в файл стилей дочерней темы. Если вы правите файл темы напрямую, делайте это только в дочерней теме, иначе обновление может затереть изменения.
.pagination .page-numbers {
display: inline-block;
min-width: 40px;
padding: 8px 12px;
margin: 0 4px 6px 0;
text-align: center;
line-height: 1.2;
border: 1px solid #d7dbe0;
border-radius: 6px;
background: #fff;
color: #2b2f36;
text-decoration: none;
transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.pagination .page-numbers:hover {
background: #f3f6f9;
border-color: #b9c2cc;
}
.pagination .page-numbers.current {
background: #2271b1;
border-color: #2271b1;
color: #fff;
font-weight: 600;
}
.pagination .page-numbers.prev,
.pagination .page-numbers.next {
padding-left: 14px;
padding-right: 14px;
}Этот набор правил делает навигацию более читаемой и заметной: ссылки получают одинаковый размер, текущая страница выделяется цветом, а hover-состояние помогает понять, что элемент кликабельный. Если у вашей темы контейнер называется не .pagination, а иначе, замените селектор на фактический класс из HTML.
Как аккуратно выделить активную страницу
Активная страница — это главный ориентир в пагинации. Пользователь должен сразу видеть, где он находится. В WordPress текущая страница обычно помечается классом .current, но иногда тема добавляет свои классы или меняет структуру.
Для активного элемента лучше использовать не только цвет фона, но и контрастный текст, более плотную рамку или полужирное начертание. Это особенно полезно на сайтах с большим количеством архивов: новостных проектах, каталогах, блогах с длинными списками и страницах категорий.
Если сделать активную страницу слишком похожей на обычную ссылку, навигация теряет смысл. Если, наоборот, выделить её слишком агрессивно, пагинация начнёт спорить с дизайном страницы. На практике лучше всего работают спокойные, но заметные акценты: фирменный цвет, чёткая рамка и достаточный контраст.
Как стилизовать hover, focus и состояние недоступных ссылок
Для удобства навигации важны не только обычные ссылки, но и их состояния. При наведении пользователь должен понимать, что элемент интерактивен. При работе с клавиатуры полезно оставить видимый focus, особенно если сайт ориентирован на доступность.
Если тема скрывает outline, не стоит делать это без замены. Лучше задать собственный фокус, чтобы навигация оставалась понятной:
.pagination .page-numbers:focus-visible {
outline: 2px solid #2271b1;
outline-offset: 2px;
}Для ссылок «Предыдущая» и «Следующая» иногда полезно добавить чуть больше горизонтального padding, чтобы они не выглядели тесно. Если в разметке есть элементы с классом .dots, их обычно не стилизуют как кнопки: это не ссылка, а индикатор пропущенных страниц. Для него достаточно нейтрального оформления без лишнего акцента.
Что делать, если пагинация выглядит криво на мобильных
На узких экранах пагинация чаще всего ломается не из-за WordPress, а из-за слишком больших отступов, фиксированной ширины или неудачного выравнивания. Если номера страниц не помещаются в одну строку, это не всегда ошибка: иногда лучше разрешить перенос, чем сжимать элементы до нечитаемого состояния.
Для мобильной версии можно уменьшить размеры кнопок и отступы:
@media (max-width: 600px) {
.pagination .page-numbers {
min-width: 34px;
padding: 7px 10px;
margin: 0 3px 6px 0;
font-size: 14px;
}
}Если пагинация в вашей теме выстроена через flex-контейнер, иногда полезно разрешить перенос:
.pagination {
display: flex;
flex-wrap: wrap;
gap: 6px;
}Но этот вариант подходит не всем темам. Если у контейнера уже есть собственная сетка или выравнивание, дополнительный flex может сломать верстку. Поэтому сначала проверьте текущие стили в инспекторе браузера.
Как не испортить дизайн темы при правке CSS
Самая частая ошибка — писать слишком общие селекторы. Например, правило вроде a { ... } или .page-numbers { ... } может задеть не только пагинацию, но и другие ссылки на сайте. Лучше привязывать стили к контейнеру навигации, который реально используется в теме.
Ещё один риск — конфликт с уже заданными стилями темы. Если тема использует более специфичные селекторы, ваши правила могут не примениться. В таком случае не нужно сразу добавлять !important везде подряд. Сначала проверьте, какой селектор у темы, и при необходимости сделайте правило чуть точнее.
Если вы редактируете CSS в файле темы, обязательно работайте через дочернюю тему или через дополнительный CSS в настройках. Это особенно важно на коммерческих темах и на сайтах, где обновления выходят регулярно.
Как проверить, что стили применились правильно
После сохранения CSS откройте несколько страниц архива: первую, вторую, последнюю, категорию с большим количеством записей. Проверьте три вещи:
- активная страница заметна сразу;
- ссылки не сливаются с фоном и не слишком мелкие;
- на мобильном экране элементы не налезают друг на друга и остаются нажимаемыми пальцем.
Если изменения видны не сразу, очистите кэш: браузера, плагина кэширования и, если нужно, серверный кэш. На сайтах с CDN это тоже может влиять на скорость появления обновлённого CSS.
Если после правки пагинация исчезла или стала выглядеть странно, почти всегда причина в селекторе, который оказался слишком широким, либо в конфликте с правилами темы. В таком случае проще временно отключить свой CSS-блок и вернуть рабочее состояние, чем пытаться «додавить» верстку вслепую.
Когда CSS уже не хватает
CSS решает задачу внешнего вида, но не меняет саму разметку. Если пагинация в теме выведена неудобно, например без нормальных классов, с плохой структурой или внутри лишних обёрток, иногда проще поправить шаблон архива или заменить способ вывода навигации в теме. Это уже работа с PHP-шаблонами WordPress, и здесь лучше использовать дочернюю тему и тестовую копию сайта.
Для большинства обычных задач — сделать пагинацию аккуратнее, заметнее и удобнее на мобильных — достаточно правильно подобранного CSS. Если же вы хотите не только изменить внешний вид, но и поменять сам механизм навигации, тогда нужно смотреть на шаблон архива, используемую тему и конкретный способ вывода страниц.
Если вы подбираете дополнительные инструменты для работы с WordPress, иногда полезно посмотреть каталог плагинов WPShop: https://wpshop.ru/plugins. Но для самой стилизации пагинации обычно отдельный плагин не нужен.