Skip to content

Все для WordPress, веб-розробки — і не тільки

🖼 Як змінити розмір слайдера в WordPress: functions.php, CSS і шаблони
WordPressТеми WordPress
6 хв1,122 слів

🖼 Як змінити розмір слайдера в WordPress: functions.php, CSS і шаблони

Коли ставиш свіжу тему на 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-му рядку:

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

Перший параметр, ширина, другий, висота, третій (true), жорстке кадрування (crop). Якщо поставити false, WordPress впише зображення по меншій стороні без обрізки. Виглядає привабливо, але слайдер може «попливти» за висотою від зображення до зображення.

Підставте свої значення та збережіть:

1add_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 підлаштовує висоту автоматично за вмістом, його чіпати не треба. В інших темах логіка та сама: шукаєте селектор конкретного слайдера, який змінюєте, і не лізете в сусідні.

Редактор коду з CSS-файлом теми WordPress

Крок 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 швидше:

1wp 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-шаблони → регенерація старих зображень. Чотири кроки, і слайдер працює у ваших пропорціях без обрізання та мила.

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

Редакція
РедакціяРедакційна команда→ Усі публікації

Професійна команда авторів та редакторів, що спеціалізуються на створенні якісного контенту.