Як багато позитивних оновлень відбулося в завантажувачі медіафайлів на WordPress за останні кілька років. У ньому з'явилися потужні інструменти для керування зображеннями, їх редагування в адмінці WordPress, створення галерей та багато корисних функцій. А з релізом нової версії WordPress 4.0 використається покращений медіа-браузер.
Сьогодні ви дізнаєтеся не лише про те, як змінити розмір зображень на 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.
Коментарі до запису: 15
Доброго часу доби, у мене таке питання, при завантаженні кількох фотографій через кнопку «медіафайл» вертикальні та горизонтальні фото різні за шириною, як можна виправити це
Добрий день. Чи можна зробити так, щоб розміри зображень, які створює тема, можна було вибрати зі списку, коли ви вставляєте зображення в пост? На даний момент для вибору доступні лише оригінали.
А як просто без запису додати зображення, скрізь тільки й пишуть додати картинку в запис і тд. я хотів би знати як без запису додавати картинки на сайт, ось допустимо зробити блок портфоліо. адже з картинками там не потрібен ніякий текст запис?
Дякуємо!
В адмінці WordPress зайдіть у Медіафайли — Додати новий
Ну це якщо шаблон стандартний, а якщо шаблон свій зверстаний, адже там записи виходять по черзі і якщо я хочу замінити п'яту картинку або хочу поставити картинку куди мені хочеться як можна так зробити крім до запису більше нікуди не можна що додати картинку?
Доброго дня, а підкажіть як у категорії товарів додавати картинки?
Версія WordPress 4.9.1
Загалом питання такого плану
Чи можна зробити, щоб у медіафайлах за промовчанням показувалися зображення поточного дня або за поточний місяць, а не за весь час?
prntscr.com/hmznnw
Ось що мене зовсім не влаштовує у ВП, так це робота з фотками, які розкладаються по папках по датах. Ситуація (одна з багатьох): інтернет-магазин, всі фотки по артикулу, тобто. артикул 123 та фотка 123.jpg і т.д. Фоток більше 1000. Треба замінити усі ці фотки на нові. Зазвичай це робиться просто - всі фотки лягають у папку, наприклад, shop і все, перезалив і забув. Як у ВП із цим? Те саме з припустимо слайдером, я в Джумлі кладу в папку images/slider фотки 1.jpg, 2.jpg і т.д. Потім фотографії замінити на новенькі — з такими ж назвами перезалив і краса. У ВП із цим як я розумію серйозну проблему.
Микола, сам думав якийсь час над цим. У всіх дорожніх движках файли розкладаються по папках з ID запису або ще якось. Поспішаю поділитися незамінним плагіном, який виправляє це непорозуміння у вордпресі — Custom Upload Dir
До речі навіть якщо як ви писали зайти в Налаштування → Медіафайли і задати нулі (0) в полях, то вордпрес все рівно генерує картинку середніх розмірів, але своїх розмірів щось типу 768х768. Що це в біса таке.
Знайшов рішення. Сам спитав називається і сам відповів. Загалом з версії 4.4 генерується додаткове зображення середніх розмірів 768х??? щоб це відключити потрібно зайти на приховану сторінку з усіма налаштуваннями, у тому числі й налаштуваннями плагінів : /wp-admin/options.php там знайти medium_large_size_w та виставити на 0
Підкажіть, роблю однотипні пости, зображення посту - квадратне, отримую в результаті в деяких постах квадратне, в деяких обрізане зверху та знизу. Закономірності не бачу
Щоправда, код джерела різний. Але чому він різний зрозуміти не можу!!
Підкажіть, як вимкнути можливість редагування зображень усередині візуального редактора зовсім?
Доброго дня. Підкажіть, будь ласка, як замінити банер на домашній сторінці? Дякую.
Або в розділі Реклама, якщо така є в налаштуваннях шаблону, або в коді файлу header.php