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

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

За замовчуванням ВордПрес автоматично створює декілька копій зображень різних розмірів. Теми та плагіни WordPress також можуть створювати власні розміри.

Зазвичай 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 );
Докладніше про розміри мініатюр див. Обрізання мініатюр у WordPress: повний гайд.
до змісту ↑

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

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

<?php the_post_thumbnail( 'custom-size' ); ?>
Цей рядок потрібно вставити у Циклі WordPress.

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

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

Джерело

Михайло Петров
Михайло Петров

Мене звати Михайло. Я є WordPress-розробником. Створюю сайти з "нуля", розробляю плагіни, оновлюю наявний функціонал та підтримую готові проєкти.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *