Повний посібник із роботи із зображеннями на WordPress

Як багато позитивних оновлень відбулося в завантажувачі медіафайлів на WordPress за останні кілька років. У ньому з'явилися потужні інструменти для керування зображеннями, їх редагування в адмінці WordPress, створення галерей та багато корисних функцій. А з релізом нової версії WordPress 4.0 використається покращений медіа-браузер.

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

Дивіться також:

• Зображення в WordPress: посібник з налаштування
• Зображення у WordPress: позначки, редагування, прикріплення картинок
• Редагуємо зображення у WordPress
• Розуміння принципу роботи зображень на WordPress (для адаптивного дизайну)
• Завантаження зображень із заданою роздільною здатністю у WordPress

Керування розміром зображень на WordPress

При завантаженні зображень на WordPress автоматично створюються альтернативні розміри: мініатюра, середній розмір і великий. Їх точна ширина і висота задаються в Налаштуваннях → Медіафайли, як показано нижче:

Якщо в цих параметрах не вказати формат мініатюри, він буде згенерований автоматично.

Налаштування розміру мініатюр змінюються у файлі functions.php використовуваної вами теми. Таким чином, зміни розміру мініатюр в Налаштуваннях → Медіафайли не матиме жодного впливу на те, як відображатиметься мініатюра в записі. Особливо ця опція може стати в нагоді розробникам тем.

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150 );

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

<?php set_post_thumbnail_size( $width, $height, $crop ); ?> 

вміст $crop повідомляє WordPress про те, чи потрібно обрізати зображення чи ні. За замовчуванням ця функція в налаштуваннях вимкнена, але якщо змінити значення 'false'на'правда', вона активується, і WordPress обріже картинку.

Різні розміри мініатюр для різних шаблонів

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

add_image_size( 'tag-thumb', 200,200 );
add_image_size( 'homepage-thumb', 220, 180 );

Щоб ці зміни відобразилися на сайті, необхідно додати невеликий код у файли шаблону, що використовується. У прикладі вище вказано два розміри мініатюр. Один для шаблону тегів Tags, другий для стартової сторінки. Мініатюра tag з'явиться, якщо додати до шаблону tags.php наступний код:

<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'category-thumb' );
	 } ?>

Редагування зображень у WordPress

WordPress може похвалитися наявністю вбудованого редактора зображень, де можна обрізати, змінити розмір зображення або перевернути його. Є два способи користуватися цим редактором. Перший — перейти на Редагування зображення (Edit Image) за посиланням, яке з'явиться праворуч відразу після завантаження зображень.

Другий - зайти в Медіафайли → Бібліотека в адмінці, де знаходиться список нещодавно завантажених зображень, навести курсор мишки на одне з них і вибрати Редагування (Редагувати).

При натисканні на кнопку Редагування з'явиться кілька параметрів, які дозволяють обрізати зображення, перевернути його, масштабувати, а також відредагувати alt-текст, заголовок або опис:

Як уникнути появи дублів зображень на WordPress

Насправді функція створення різних розмірів зображень на WordPress набагато корисніша, ніж може здатися. З її допомогою можна відобразити різні розміри зображень залежно від розташування. Наприклад, в записі створити картинку середнього розміру, на головну або в архів помістити мініатюру, а при натисканні на ці зображення з'являться повноекранні розміри у високій якості.

Щоправда, не всі хочуть бачити на своїх сайтах графіку у різних форматах. Багато хто воліє використовувати стандартні розміри зображень. Наприклад, при створенні власних розмірів картинок для конкретних шаблонів не всі забажають використовувати будь-які інші параметри.

Стандартні розміри зображення створюються двома способами. Найпростіше зайти в розділ Установки → Медіафайли і встановити нулі (0) у полях, відповідних кожному з цих зображень.

Більш складний варіант – додати код у файл functions.php використовуваної теми:

function wplift_remove_image_sizes( $sizes) {
        unset( $sizes['thumbnail']);
        unset( $sizes['medium']);
        unset( $sizes['large']);

        return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'wplift_remove_image_sizes');

Автоматичне стиснення зображень

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

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

Ви також можете скористатися опцією Bulk Smush.it для стиснення всіх давніших зображень на сайті, а також їх оптимізації.

Створення галерей зображень

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

Після завантаження їх можна поміняти місцями та поставити у потрібному порядку для відображення на сайті, видалити непотрібні, додати нові та інше.

Після цього натиснути кнопку Створити галерею, і її буде додано до запису.

Тема, що використовується, відобразить галерею у форматі сітки. При натисканні на будь-яке зображення користувач потрапить на сторінку з єдиним зображенням цієї галереї.

Карусель для організації галереї зображень

Знайомі ви з плагіном Jetpack чи ні, але у ньому є одна чудова функція під назвою Carousel (карусель). Після натискання на галерею з'являться повноекранні зображення, які можна переглядати за допомогою кнопок «Попереднє» та «Наступне».

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

Джерело: wplift.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/