Як створити додаткові розміри зображень у WordPress

Привіт:) У цьому пості покажу, як створити та використовувати додаткові розміри зображень у WordPress.

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

• отримати повний контроль над тим, які файли генерує WordPress.
• використовувати правильні пропорції у дизайні;
• не завантажувати оригінальні важкі зображення;
• покращити швидкість сайту та Core Web Vitals;
• уникнути "костилів" із CSS-ресайзом;
• отримати повний контроль над тим, які файли генерує WordPress.

до змісту ↑

Як у своїй темі зареєструвати додатковий розмір зображення

Більшість тем WordPress підтримують функцію мініатюр постів. Якщо ви розробляєте свою ВордПрес-тему, вам потрібно додати підтримку мініатюр для постів. Для цього додайте у файл functions.php вашої теми рядок:

add_theme_support( 'post-thumbnails' );

Після цього можете скористатися функцією add_image_size(), яка реєструє додаткові (свої) розміри зображень:

add_image_size( 'назва_розміру_мініатюри', ширина, висота, режим_обрізання );

Приклади:

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

add_image_size( 'custom-size', 220, 180 );

Режим жорсткого обрізання кадрує (обрізає) картинку строго згідно із заданими шириною і висотою.

add_image_size( 'custom-size', 120, 120, true );

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

add_image_size( 'custom-size', 590, 9999 );

до змісту ↑

Як у темі відобразити додаткові розміри

Щоб вивести зареєстрований розмір зображень, у потрібне місце файлу-шаблону своєї теми додайте

<?php the_post_thumbnail( 'custom-size' ); ?>

Як перестворити (нарізати) додаткові розміри зображень

Якщо на сайті вже був контент, після активації нової теми (шаблону) потрібно заново генерувати мініатюри із заданими в ній розмірами. Функція add_image_size() створює потрібні розміри лише з моменту додавання її до коду теми. Це означає, що будь-які зображення, додані до включення цієї функції, не будуть мати нових розмірів. У результаті вони можуть виглядати обрізаними або розмитими. Щоб виправити це, потрібно створити новий розмір для старих картинок. Це легко зробити за допомогою плагінів типу reGenerate Thumbnails Advanced.