Когда ставишь свежую тему на WordPress, слайдер почти никогда не попадает в размер твоего контента. У тебя скриншоты 16:9, обложки товаров, квадратные, а тема режет их под свои пропорции. Половина кадра уходит в обрезку, и главная витрина сайта выглядит так, будто её собирали с закрытыми глазами.

Но это не баг темы. Это жёстко заданные настройки, которые лежат в трёх местах: регистрация размера миниатюры в functions.php, CSS-контейнер слайдера и шаблоны вывода. Четвёртый слой, перегенерация уже загруженных картинок под новый размер. Правишь все четыре, слайдер встаёт ровно.

Ниже, пошаговый разбор на примере темы Classy от WPExplorer. Но логика универсальна: любой классической теме с Nivo-слайдером или собственным слайдером на add_image_size правятся одни и те же файлы.

💡 Быстрый обзор:

• Меняете add_image_size в functions.php, это кадрирование при загрузке
• Правите width и height контейнера в style.css, чтобы вёрстка не схлопнулась
• Обновляете атрибуты width и height в шаблонах nivo.php и content.php, чтобы img не растягивался браузером
• Прогоняете Regenerate Thumbnails по медиабиблиотеке, старые картинки пересоздаются под новый размер

Наглядно весь процесс, в этом видео:

Шаг 1. Меняем размер миниатюры в functions.php

Когда WordPress загружает изображение, он прогоняет его через все зарегистрированные размеры. Регистрация идёт через функцию add_image_size. Тема заявляет слайдер 980×400, а вам нужно 1200×500, править надо здесь.

Откройте functions.php темы. Путь: Appearance → Theme File Editor в админке, либо по FTP в /wp-content/themes/имя-темы/. В Classy строка с add_image_size для слайдера находится примерно на 122-й строке:

1
add_image_size( 'nivo-slider', 980, 400, true );

Первый параметр, ширина, второй, высота, третий (true), жёсткое кадрирование (crop). Если поставить false, WordPress впишет картинку по меньшей стороне без обрезки. Выглядит заманчиво, но слайдер может «поплыть» по высоте от картинки к картинке.

Подставьте свои значения и сохраните:

1
add_image_size( 'nivo-slider', 1200, 500, true );

С этого момента все новые загрузки кадрируются под ваш размер. Старые, пока нет, до них доберёмся на шаге 4.

Шаг 2. Правим CSS-контейнер

Размер миниатюры поменяли. Но контейнер слайдера в вёрстке по-прежнему живёт со старыми значениями из CSS. Картинка грузится правильная, а блок её обрезает или оставляет пустоты по краям.

В Classy контейнер Nivo-слайдера описан в style.css, строки 1132-1140:

1
#slider_nivo {
2
    position: relative;
3
    width: 980px;
4
    margin-top: -30px;
5
    margin-left: -25px;
6
    margin-right: -25px;
7
    margin-bottom: 30px;
8
    height: 400px;
9
    overflow: hidden;
10
}

Меняете width и height на свои значения:

1
#slider_nivo {
2
    position: relative;
3
    width: 1200px;
4
    margin-top: -30px;
5
    margin-left: -25px;
6
    margin-right: -25px;
7
    margin-bottom: 30px;
8
    height: 500px;
9
    overflow: hidden;
10
}

Важный нюанс: это правка именно Nivo-слайдера. Контентный слайдер (Content Slider) в Classy подстраивает высоту автоматически по содержимому, его трогать не надо. В других темах логика та же: ищете селектор конкретного слайдера, который меняете, и не лезете в соседние.

Шаг 3. Обновляем атрибуты в шаблонах

add_image_size отдаёт URL правильной миниатюры. Но HTML-разметка слайдера содержит жёстко прописанные width="980" height="400". Оставите старые значения, браузер растянет или сожмёт картинку под них. Итог: мыльное или сплющенное изображение, хотя исходник правильный.

В Classy два файла требуют правки.

Nivo Image Slider, файл includes/sliders/nivo.php, строки 32-36:

1
<a href="<?php echo $slidelink ?>" title="<?php the_title(); ?>">
2
  <img src="<?php echo $featured_image[0]; ?>" 
3
       alt="<?php the_title(); ?>" 
4
       width="1200" height="500" />
5
</a>

Content Slider для слайдов-картинок, файл includes/sliders/content.php, строки 29-36:

1
<a href="<?php echo $slidelink ?>" title="<?php the_title(); ?>">
2
  <img src="<?php echo $featured_image[0]; ?>" 
3
       alt="<?php the_title(); ?>" 
4
       width="1200" height="500" />
5
</a>

Правите оба, сохраняете. Если тема использует не <img>, а фон через background-image в CSS, шаблоны не трогайте, достаточно шага 2.

Шаг 4. Перегенерируем старые изображения

На шаге 1 мы изменили add_image_size. Новые загрузки идут с правильным кадрированием. Но все картинки из медиабиблиотеки, загруженные до правки, лежат в старом размере. Слайдер смотрит на них и получает не те пропорции.

Решение, плагин Regenerate Thumbnails. Он проходит по всей медиабиблиотеке и пересоздаёт миниатюры под текущие зарегистрированные размеры. Установка стандартная: Plugins → Add New → поиск «Regenerate Thumbnails» → Install → Activate.

После активации: Tools → Regenerate Thumbnails → «Regenerate All Thumbnails». Для большой библиотеки процесс займёт пару минут, на каждом изображении плагин запускает регенерацию всех заявленных размеров.

Плагин заодно умеет удалять неиспользуемые размеры миниатюр, это освобождает место на сервере. После однократного прогона он больше не нужен: все будущие загрузки пойдут через новое значение add_image_size.

Если есть доступ к консоли сервера, WP-CLI быстрее:

1
wp media regenerate --yes

Никаких накладных расходов на HTTP-запросы, и не упирается в тайм-ауты на больших библиотеках.

Что делать, если слайдер всё равно едет

Бывает: все четыре шага пройдены, а слайдер ведёт себя криво. Пройдитесь по чек-листу:

• CSS-специфичность: ваш новый width/height перебивается более специфичным селектором в теме. Откройте инспектор браузера и посмотрите, какое правило реально применяется к элементу.
• Кеш: сбросьте браузерный кеш (Ctrl+F5). Если стоит серверный кеширующий плагин вроде WP Rocket или LiteSpeed Cache, сбросьте и его.
• Дочерняя тема: правите родительскую тему напрямую, изменения слетят при ближайшем обновлении. Создайте дочернюю тему и перенесите правки туда.
• Адаптив: ширина контейнера больше ширины сайта? На мобильных слайдер вылезает за край. Добавьте max-width: 100% и height: auto в медиа-запросе для мобильной версии.

Апдейт темы всё сломал: как защититься

Главная боль правок в родительской теме: обновление перезаписывает файлы, и ваши изменения исчезают. Слайдер молча возвращается к заводским настройкам.

Правильный подход, дочерняя тема. Выносите туда три вещи:

• Переопределение add_image_size в functions.php дочерней темы через хук after_setup_theme;
• Переопределение CSS, дочерний style.css грузится после родительского, ваши правила побеждают по каскаду;
• Шаблоны слайдера, копируете nivo.php и content.php в дочернюю тему с той же структурой папок (includes/sliders/). WordPress автоматически подхватит версию из дочки.

После этого обновления родительской темы вашим размерам ничего не угрожает.

⁉️🤔 Частые вопросы

Обязательно править все три файла: functions.php, style.css и шаблоны?

Да, иначе результат будет половинчатым. Поменяли только add_image_size без CSS, контейнер обрезает новое изображение. Без шаблонов, браузер растягивает картинку до старых width/height, и она становится мыльной. Три правки дают согласованный размер на всех слоях: регистрация миниатюры → контейнер → HTML-атрибуты.

Нужно ли трогать content.php, если я использую только Nivo-слайдер?

Нет. content.php отвечает за контентный слайдер, тот, что тянет текст и картинку из постов. Если контентный слайдер на сайте не используется, файл можно пропустить. Но когда сомневаетесь, правка занимает минуту, лучше сделать оба.

Плагин Regenerate Thumbnails удалит мои оригиналы?

Нет. Оригинал, полноразмерное изображение, остаётся нетронутым. Плагин пересоздаёт только миниатюры: те размеры, что зарегистрированы через add_image_size и Settings → Media. Опция удаления неиспользуемых размеров тоже не трогает оригинал, она чистит «сиротские» миниатюры, не заявленные ни в теме, ни в плагинах.

Что делать, если add_image_size в теме нет и слайдер работает иначе?

Часть современных тем не используют add_image_size для слайдера. Вместо этого грузят оригинал изображения и управляют размером через CSS: object-fit: cover или background-size: cover. В этом случае достаточно шага 2, правите только CSS-контейнер. Проверьте в инспекторе браузера, какой URL реально грузится в слайдер: если там image.jpg без суффикса -980x400, шаги 1 и 4 не нужны.

Нужен ли бэкап перед правкой functions.php?

Обязательно. Одна опечатка в functions.php, и сайт ложится в White Screen of Death. Перед правкой скачайте файл по FTP или скопируйте содержимое в текстовый редактор. Если сайт упал, залейте исходный functions.php обратно, сайт оживёт мгновенно.

Слайдер под себя: итоговый расклад

Алгоритм универсальный для любой классической темы WordPress: регистрация размера → CSS-контейнер → HTML-шаблоны → регенерация старых картинок. Четыре шага, и слайдер работает в ваших пропорциях без обрезки и мыла.

Главное, не править родительскую тему напрямую. Вынесите изменения в дочернюю тему сразу после того, как убедились что размеры подходят. И тогда ни одно обновление не откатит слайдер к заводским настройкам.