Як змінити розмір головного зображення в WordPress: повний технічний посібник

Рекомендовані зображення — також відомі як мініатюри публікацій — є основним візуальним елементом будь-якого сайту на WordPress. Вони відображаються у списках публікацій, сторінках архівів, попередніх переглядах у соціальних мережах та RSS-стрічках, тому їхні розміри безпосередньо впливають на узгодженість макета та сприйняту якість дизайну. Зміна розміру рекомендованого зображення у WordPress означає або перевизначення піксельних розмірів, які WordPress реєструє під час завантаження, або оновлення того, як ваша тема запитує ці розміри під час рендерингу, або обох — і невирішення обох сторін є найпоширенішою причиною того, чому змінені розміри зображень виглядають неправильно на фронтенді.

Цей посібник охоплює всі доступні методи — від налаштувань панелі керування без коду до прямого налаштування PHP — з точним технічним контекстом для кожного підходу.

Розуміння того, як WordPress обробляє розміри зображень

Перш ніж змінювати будь-які налаштування, вам потрібно зрозуміти конвеєр. Коли ви завантажуєте зображення, WordPress не зберігає один файл — він генерує кілька похідних файлів на основі зареєстрованих визначень розмірів. Ці визначення зберігаються в базі даних і реєструються або ядром WordPress, або активною темою, або встановленими плагінами.

Три розміри, які WordPress реєструє за замовчуванням:

• Мініатюра — зазвичай 150x150 пікселів, жорстко обрізана за замовчуванням
• Середній — до 300x300 пікселів, пропорційно масштабований
• Великий — до 1024x1024 пікселів, пропорційно масштабований

Ваша тема реєструє додаткові розміри за допомогою add_image_size(). Коли шаблон викликає the_post_thumbnail('large'), WordPress шукає файл, який був згенерований для цього зареєстрованого розміру під час завантаження. Це критично важливий архітектурний момент: зміна визначення розміру не змінює розмір уже завантажених зображень заднім числом. Після будь-якої зміни розміру необхідно повторно згенерувати мініатюри.

Метод 1: Налаштування розміру рекомендованого зображення через налаштування медіафайлів WordPress

Це правильна відправна точка для сайтів, де тема використовує один із трьох основних розмірів для виведення рекомендованого зображення.

Крок 1: Оновіть налаштування медіафайлів

Перейдіть до Налаштування > Медіафайли на панелі керування WordPress. Ви побачите три групи розмірів. Визначте, який розмір ваша тема використовує для рекомендованих зображень — перевірте документацію теми або перегляньте відрендерений HTML, щоб підтвердити CSS-клас (наприклад, wp-image-* поряд із size-large).

Відкоригуйте поля ширини та висоти для відповідного розміру. Встановлення будь-якого виміру на 0 вказує WordPress масштабувати пропорційно по іншій осі, а не обрізати.

Натисніть Зберегти зміни.

Крок 2: Повторно згенеруйте наявні мініатюри

Нові завантаження одразу використовуватимуть оновлені розміри. Для зображень, які вже є у вашій медіатеці, необхідно повторно згенерувати похідні файли. Найнадійнішим інструментом для цього є плагін Regenerate Thumbnails від Alex Mills.

Після встановлення та активації перейдіть до Інструменти > Regen. Thumbnails і натисніть Regenerate All Thumbnails. На великих бібліотеках це ресурсомістка операція — запускайте її в години низького трафіку, і якщо ви використовуєте план VPS Хостингу, розгляньте можливість тимчасового збільшення max_execution_time та memory_limit PHP у php.ini для запобігання тайм-аутам.

Поширена помилка: Якщо ваша тема реєструє власний розмір із тією самою міткою, що й основний розмір, панель налаштувань медіафайлів не вплине на нього. Виклик add_image_size() теми матиме пріоритет.

Метод 2: Використання кастомізатора WordPress або панелі параметрів теми

Багато комерційних тем надають елементи керування розміром зображень без необхідності змінювати код.

Крок 1: Перевірте кастомізатор

Перейдіть до Зовнішній вигляд > Налаштувати. Шукайте в розділах із назвами Параметри теми, Налаштування блогу, Макет або Налаштування публікацій. Деякі теми мають тут окремий розділ Рекомендоване зображення.

Якщо елементи керування існують, відкоригуйте ширину та висоту, потім натисніть Опублікувати. Тема оновить своє зареєстроване визначення розміру, а в деяких реалізаціях автоматично повторно згенерує відповідні зображення.

Крок 2: Перевірте окрему панель параметрів теми

Преміум-теми, побудовані на фреймворках як Redux або Kirki, часто мають окремий пункт меню Параметри теми або Панель теми на бічній панелі. Шукайте підрозділи з назвами Налаштування зображень, Мініатюри публікацій або Макет архіву.

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

Метод 3: Визначення власних розмірів зображень у functions.php

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

Крок 1: Зареєструйте власний розмір

Відредагуйте файл functions.php вашої дочірньої теми. Ніколи не редагуйте файли батьківської теми безпосередньо — оновлення перезапишуть ваші зміни. Якщо у вас немає дочірньої теми, створіть її перед тим, як продовжити.

Додайте наступне всередині підключеної функції:

function mytheme_custom_image_sizes() {
    add_theme_support( 'post-thumbnails' );
    add_image_size( 'featured-hero', 1200, 600, true );
    add_image_size( 'featured-card', 400, 300, true );
}
add_action( 'after_setup_theme', 'mytheme_custom_image_sizes' );

Розбивка параметрів для add_image_size():

• Аргумент 1 — дескриптор розміру (рядок), який використовується під час виклику зображення в шаблонах
• Аргумент 2 — ширина в пікселях
• Аргумент 3 — висота в пікселях
• Аргумент 4 — режим обрізання: true для жорсткого обрізання до точних розмірів; false для пропорційного масштабування; масив на кшталт array( 'left', 'top' ) для позиційного обрізання

Граничний випадок: Передача true як аргументу обрізання за замовчуванням використовує обрізання по центру. Якщо ваші рекомендовані зображення мають об’єкти, які постійно розташовані не по центру (наприклад, портретна фотографія), використовуйте позиційний масив — array( 'center', 'top' ) — щоб запобігти обрізанню голів.

Крок 2: Виклик власного розміру у файлах шаблонів

Знайдіть файл шаблону, відповідальний за рендеринг рекомендованого зображення. Поширені кандидати: single.php, archive.php, content.php або template-parts/content-single.php. Шукайте the_post_thumbnail для знаходження точного виклику.

Замініть існуючий аргумент розміру:

// Before
the_post_thumbnail( 'large' );

// After
the_post_thumbnail( 'featured-hero' );

Для більшого контролю над розміткою виводу використовуйте get_the_post_thumbnail() з власними атрибутами:

echo get_the_post_thumbnail(
    get_the_ID(),
    'featured-hero',
    array(
        'class' => 'hero-image lazyload',
        'alt'   => get_the_title(),
        'loading' => 'lazy',
    )
);

Крок 3: Зробіть власний розмір доступним для вибору у завантажувачі медіафайлів (необов’язково)

За замовчуванням власні розміри, зареєстровані за допомогою add_image_size(), не відображаються у спадному меню розмірів завантажувача медіафайлів WordPress. Щоб зробити їх доступними для редакційного використання, додайте цей фільтр:

function mytheme_add_image_sizes_to_selector( $sizes ) {
    return array_merge( $sizes, array(
        'featured-hero' => __( 'Featured Hero (1200x600)', 'mytheme' ),
        'featured-card' => __( 'Featured Card (400x300)', 'mytheme' ),
    ) );
}
add_filter( 'image_size_names_choose', 'mytheme_add_image_sizes_to_selector' );

Крок 4: Повторно згенеруйте мініатюри

Запустіть плагін Regenerate Thumbnails, як описано в Методі 1. Для всіх раніше завантажених зображень будуть згенеровані нові похідні файли з новими розмірами.

Метод 4: Налаштування розміру рекомендованого зображення у конструкторі сторінок

Конструктори сторінок, такі як Elementor, Divi та Bricks Builder, абстрагують шар шаблонів, тому редагування файлів шаблонів може не застосовуватися. Кожен конструктор має власні елементи керування розміром зображень.

Elementor

1. Відкрийте сторінку або публікацію в Elementor.
2. Виберіть віджет Рекомендоване зображення або віджет Публікації, що відображає мініатюру.
3. На лівій панелі знайдіть Розмір зображення на вкладці Вміст.
4. Виберіть зареєстрований розмір зі спадного меню або виберіть Власний, щоб ввести піксельні розміри.
5. Натисніть Оновити.

Технічна примітка: Коли ви вибираєте «Власний» в Elementor, він не реєструє новий розмір зображення WordPress — він використовує JavaScript для зміни розміру зображення на стороні клієнта або запитує повнорозмірне зображення та масштабує його через CSS. Це збільшує вагу сторінки. Завжди надавайте перевагу зареєстрованому розміру WordPress над власним розміром Elementor для сторінок, де важлива продуктивність.

Divi

У модулі блогу або модулі рекомендованого зображення публікації Divi параметр Розмір зображення у розділі Додатково контролює, який зареєстрований розмір WordPress запитується. Divi також має власні налаштування розміру зображень у Divi > Параметри теми > Загальні > Розміри мініатюр, які реєструють додаткові похідні файли.

Метод 5: Використання плагіна для власних розмірів зображень без коду

Якщо редагування PHP неможливе, ці плагіни відтворюють функціональність add_image_size() через інтерфейс користувача:

Simple Image Sizes є найбільш прямою заміною для add_image_size(). Після встановлення перейдіть до Налаштування > Медіафайли — плагін додає розділ власних розмірів нижче основних значень за замовчуванням. Визначте свій розмір, збережіть і використовуйте вбудовану регенерацію плагіна для його застосування.

Порівняння: всі методи одним поглядом

Міркування щодо продуктивності та оптимізації зображень

Реєстрація занадто великої кількості розмірів зображень є часто недооціненою проблемою на стороні сервера. Кожен зареєстрований розмір генерує новий файл під час завантаження. Сайт із 15 зареєстрованими розмірами та 2 000 зображень у медіатеці потенційно має 30 000 файлів зображень на диску. На спільному хостингу це заповнює квоти; на будь-якому сервері це збільшує розміри резервних копій.

Periodically audit your registered sizes. Використовуйте цей фрагмент у тимчасовому плагіні або functions.php, щоб отримати список усіх зареєстрованих розмірів:

add_action( 'wp_loaded', function() {
    if ( current_user_can( 'manage_options' ) && isset( $_GET['show_image_sizes'] ) ) {
        echo '<pre>';
        print_r( wp_get_registered_image_subsizes() );
        echo '</pre>';
        exit;
    }
} );

Відвідайте https://yoursite.com/?show_image_sizes=1 під час входу як адміністратор, щоб побачити повний список.

Додаткові практики продуктивності:

• Використовуйте формат WebP. WordPress 5.8+ конвертує завантажені зображення у WebP, якщо бібліотека GD або Imagick вашого сервера підтримує це. Перевірте підтримку в Інструменти > Стан сайту.
• Реалізуйте відкладене завантаження. WordPress додає loading="lazy" до зображень нижче згину за замовчуванням починаючи з версії 5.5. Переконайтеся, що ваші власні виклики the_post_thumbnail() зберігають цей атрибут.
• Стискайте перед завантаженням. Такі інструменти, як ShortPixel або Imagify, безпосередньо інтегруються в медіаконвеєр WordPress і автоматично стискають похідні файли. TinyPNG добре підходить для ручного стиснення перед завантаженням.
• Використовуйте CDN. Якщо ваш сайт обслуговує глобальну аудиторію, перенесення доставки зображень на CDN зменшує затримку незалежно від кількості зареєстрованих розмірів.

Для сайтів із великим навантаженням зображень — фотопортфоліо, новинні сайти, магазини WooCommerce — VPS з cPanel надає вам контроль на рівні сервера для налаштування обмежень пам’яті PHP, безпосереднього налаштування Imagick та керування дисковими квотами, що неможливо у спільних середовищах.

Адаптивні зображення та атрибут srcset

WordPress автоматично генерує атрибути srcset та sizes для зображень у вмісті, використовуючи всі зареєстровані розміри зображень. Це означає, що кожен зареєстрований вами розмір сприяє здатності браузера вибирати найбільш відповідну роздільну здатність для вікна перегляду та співвідношення пікселів пристрою користувача.

Коли ви викликаєте the_post_thumbnail(), WordPress виводить розмітку, подібну до:

<img src="hero-1200x600.jpg"
     srcset="hero-400x300.jpg 400w, hero-800x400.jpg 800w, hero-1200x600.jpg 1200w"
     sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
     alt="Post Title"
     loading="lazy">

Атрибут sizes повідомляє браузеру, якої ширини зображення буде відображатися при різних ширинах вікна перегляду. WordPress генерує значення sizes за замовчуванням, але воно часто є неточним для складних макетів. Перевизначте його за допомогою фільтра wp_calculate_image_sizes або передавши власний атрибут sizes у масиві $attr функції get_the_post_thumbnail().

Контекст SSL, домену та хостингу

Якщо ви переносите сайт WordPress на новий домен або переходите з HTTP на HTTPS після отримання SSL-сертифіката, URL-адреси зображень, збережені в мета-даних публікацій (посилання _thumbnail_id), є відносними до ідентифікатора вкладення і не залежать від змін домену. Однак URL-адреси зображень, жорстко закодовані у вмісті публікацій або параметрах теми, потребуватимуть оновлення за допомогою операції пошуку та заміни з використанням WP-CLI:

wp search-replace 'http://olddomain.com' 'https://newdomain.com' --skip-columns=guid

Якщо ви налаштовуєте нову інсталяцію WordPress з нуля, реєстрація вашого домену через Реєстрацію доменів та поєднання її з належно налаштованим хостинговим середовищем гарантує, що шляхи завантаження медіафайлів та правила перезапису .htaccess будуть правильними з самого початку, уникаючи зламаних шаблонів URL-адрес зображень, які складно налагоджувати заднім числом.

Контрольний список технічних рішень

Використовуйте цю матрицю для вибору правильного підходу для вашої ситуації:

• Вам потрібно змінити основний розмір (мініатюра/середній/великий) і ви не редагуєте код — використовуйте Налаштування > Медіафайли, потім повторно згенеруйте мініатюри.
• Ваша преміум-тема має панель параметрів теми — спочатку перевірте там, перш ніж торкатися будь-яких файлів.
• Вам потрібен розмір із точними піксельними розмірами та жорстким обрізанням — використовуйте add_image_size() у functions.php дочірньої теми.
• Ваш предмет зйомки вимагає обрізання не по центру — передайте позиційний масив як четвертий аргумент до add_image_size().
• Ви використовуєте Elementor або Divi — використовуйте рідний елемент керування розміром зображення конструктора, але надавайте перевагу зареєстрованим розмірам WordPress над «Власним» для продуктивності.
• Ви не можете редагувати PHP і вам потрібен власний розмір — встановіть Simple Image Sizes, визначте розмір, повторно згенеруйте.
• У вас велика медіатека — використовуйте Regenerate Thumbnails Advanced, який дозволяє вибіркову регенерацію за назвою розміру, щоб уникнути надлишкової обробки.
• Продуктивність є пріоритетом — перевіряйте зареєстровані розміри, увімкніть WebP, реалізуйте CDN і переконайтеся, що відкладене завантаження активне.
• Ви використовуєте спільний хостинг і стикаєтеся з помилками пам’яті або тайм-аутами під час регенерації — розгляньте можливість переходу на план VPS Хостингу, де обмеження PHP можна налаштовувати.

Поширені запитання

Чому мої рекомендовані зображення все ще відображаються зі старим розміром після того, як я змінив налаштування медіафайлів?

WordPress генерує похідні зображення під час завантаження. Зміна визначення розміру в Налаштування > Медіафайли впливає лише на нові завантаження. Вам необхідно запустити інструмент регенерації мініатюр — наприклад, плагін Regenerate Thumbnails — щоб змінити розмір файлів, які вже є у вашій медіатеці.

У чому різниця між add_image_size() з true та false як параметром обрізання?

Передача true змушує WordPress обрізати зображення до точних ширини та висоти, які ви вказуєте, по центру за замовчуванням. Передача false масштабує зображення пропорційно так, щоб жоден вимір не перевищував вказаних вами значень, що означає, що фактичні вихідні розміри можуть бути меншими за вказані, якщо вихідне співвідношення сторін відрізняється.

Чи сповільнить мій сайт реєстрація багатьох власних розмірів зображень?

Не під час рендерингу — WordPress обслуговує попередньо згенеровані файли. Витрати на продуктивність виникають під час завантаження, коли Imagick або GD повинні згенерувати один похідний файл для кожного зареєстрованого розміру. Сайти з багатьма розмірами та великим обсягом завантажень можуть стикатися з повільними відповідями під час завантаження та значним зростанням використання диска.

Чи можу я видалити розміри зображень, які мені більше не потрібні?

Так. Використовуйте remove_image_size( 'size-name' ) у вашому functions.php, щоб припинити генерацію розміру для нових завантажень. Існуючі файли для цього розміру залишаються на диску до ручного видалення. Команда WP-CLI wp media regenerate --only-missing може допомогти з очищенням, генеруючи лише відсутні розміри без повторного створення всіх похідних файлів.

Чи впливає зміна розміру рекомендованого зображення на те, як зображення відображаються при поширенні в соціальних мережах?

Не безпосередньо. Соціальні платформи, такі як Facebook та Twitter, зчитують мета-теги Open Graph (og:image), щоб визначити, яке зображення відображати. Ці теги зазвичай встановлюються SEO-плагіном, таким як Yoast SEO або Rank Math, який реєструє власний розмір зображення (зазвичай 1200x630) спеціально для поширення в соціальних мережах. Зміна розміру рекомендованого зображення вашої теми не змінює зображення Open Graph, якщо ваш SEO-плагін не налаштований на використання того самого дескриптора розміру.