Медіабібліотека WordPress: як завантажувати, редагувати та керувати зображеннями

Ви завантажили картинку, а вона не показується. Або вставили фото в пост, а воно розтягнулося на весь екран. Чи взагалі не можете знайти, куди WordPress зберіг uploaded-файл.

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

Нижче, повний розбір медіабібліотеки WordPress: від першого завантаження до просунутого редагування. Без води та з конкретними кроками.

💡 Швидкий огляд:

• Де знаходиться медіабібліотека та що в ній зберігається
• Як завантажувати файли напряму та прямо з редактора поста
• Як змінювати alt, title і caption у зображень (і навіщо це потрібно)
• Вбудований редактор: кадрування, поворот і масштабування
• Як працюють галереї, featured-зображення та сторінки вкладень

Що таке медіабібліотека WordPress

Медіабібліотека — це центральне сховище всіх файлів, які ви завантажуєте на сайт: зображень, відео, аудіо, PDF та інших документів. WordPress зберігає їх у папці /wp-content/uploads/, структурованій за роками та місяцями, а керувати файлами ви можете через адмінку: Медіафайли → Бібліотека.

Бібліотека показує файли у двох режимах: сітка (прев’юшки) та список (із колонками: автор, запис-батько, дата). Інтерфейс описано в офіційній документації WordPress: сітка з пошуком справа та фільтрами зверху. Фільтри дають змогу відібрати файли за типом (зображення, відео, аудіо) та за місяцем завантаження.

Функція «Неприкріплені» знаходить файли, які не прив’язані до жодного поста чи сторінки. Це зручно, коли ви завантажили картинку через медіабібліотеку, але забули її кудись вставити. Масове видалення працює через кнопку «Масовий вибір»: позначаєте прапорцями все зайве та видаляєте однією операцією.

Пошук справа шукає за іменем файлу. Коли в бібліотеці сотні зображень, без нього не обійтися.

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

Є два шляхи. Перший, завантаження напряму через меню Медіафайли → Додати новий:

• Перетягніть файли в прямокутну область або натисніть «Вибрати файли».
• Виберіть зображення на комп’ютері.
• WordPress почне завантаження, у кожного файлу свій індикатор прогресу.

Швидкість завантаження залежить від хостингу та розміру файлів. На хорошому хостингу десяток оптимізованих JPG по 200 КБ відлітає за секунди. Мультизавантаження (кілька файлів одночасно) працює за замовчуванням. Якщо воно не спрацьовує, WordPress запропонує браузерний завантажувач, він бере по одному файлу, але працює навіть на старих комп’ютерах.

Другий шлях, завантаження прямо з редактора поста. У блочному редакторі (Gutenberg) ви додаєте блок Зображення та вибираєте «Завантажити» або «Медіабібліотека» для вставки вже завантаженого файлу. У класичному редакторі, кнопка «Додати медіафайл» над полем тексту.

Обидва шляхи ведуть в одну й ту саму медіабібліотеку. Файл, завантажений через редактор, з’явиться в загальному списку Медіафайли → Бібліотека, і навпаки.

Як вставити зображення в пост

У блочному редакторі додаєте блок Зображення та вибираєте файл із бібліотеки або завантажуєте новий. Справа з’являється панель налаштувань блоку: розмір, вирівнювання, посилання при кліку та поле alt-тексту.

У класичному редакторі порядок такий:

• Ставите курсор у потрібне місце тексту.
• Натискаєте «Додати медіафайл».
• Вибираєте вкладку «Медіабібліотека» та клікаєте по зображенню.
• Справа з’являється панель Відомості про вкладення, тут можна заповнити заголовок, підпис, alt-текст і опис.
• Вибираєте розмір вставки з випадного списку.
• Натискаєте «Вставити в повідомлення».

При вставці WordPress пропонує кілька розмірів. За замовчуванням це мініатюра (150×150 пікселів), середній (300×300 макс.), великий (1024×1024 макс.) і повний розмір. Усі значення за замовчуванням описано на сторінці налаштувань медіафайлів WordPress. Набір розмірів можна змінити в Налаштування → Медіафайли, а тема чи плагіни можуть додати свої, наприклад, medium_large (768 пікселів за шириною).

Важливий момент: WordPress не обрізає оригінал. Він створює копії під кожен розмір. HD-фотографія на 5 МБ, вставлена як «середній розмір», на сторінці важить 30-50 КБ, а оригінал лежить у бібліотеці для інших потреб.

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

Кожне завантажене зображення отримує власну панель із метаданими. Щоб відкрити її, клікніть по файлу в медіабібліотеці. Поля, які варто заповнювати:

• Заголовок зазвичай збігається з іменем файлу. Змінюйте на читабельний, тому що деякі теми та плагіни виводять його в lightbox-переглядачах.
• Alt-текст, найважливіший пункт. Те, що побачать пошуковики та користувачі скринрідерів. Описуйте вміст картинки 4-8 словами українською, без спаму ключовиками. Не плутайте alt (альтернативний текст для недоступного зображення) з title (спливна підказка при наведенні).
• Підпис, текст, який відображається під зображенням прямо в контенті. Видно всім відвідувачам.
• Опис залишається на сторінці вкладення (див. розділ нижче). Для більшості сайтів не критично.

Справа відображається службова інформація: ім’я файлу, тип (JPEG/PNG/WebP/AVIF), дата завантаження, розмір файлу та роздільна здатність у пікселях. Там само, пряме посилання на файл (поле «URL файлу»), яке можна скопіювати для вставки ззовні.

Посилання «Змінити додаткові відомості» в самому низу відкриває поля, які WordPress заповнює з EXIF-даних фотографії (якщо вони є): автор, джерело, дата зйомки та інше.

Як редагувати зображення: кадрування, поворот, масштаб

WordPress містить вбудований редактор зображень. Не Photoshop, але для швидкого виправлення перед публікацією достатньо. Відкривається через кнопку «Редагувати зображення» під файлом у медіабібліотеці.

Поворот. Кнопки повороту вліво та вправо. Корисно, коли фото завантажилося боком, WordPress не завжди коректно читає орієнтацію з EXIF.

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

Кадрування. Виділяєте область мишею та тиснете кнопку обрізки. Утримуйте Shift при виділенні, щоб зберегти пропорції. У правій панелі можна задати точне співвідношення сторін: 1:1 (квадрат для соцмереж), 4:3, 16:9 і довільне. Мінімальний розмір кадру, мініатюра з налаштувань медіафайлів.

Кнопка «Застосувати зміни до» визначає, які копії зачепить правка: усі розміри, тільки мініатюра або все, крім мініатюри. Зручно, коли квадратний ескіз має показувати тільки фрагмент, а в пості, повну картинку.

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

Галереї, featured-зображення та вставка за URL

Галерея

У блочному редакторі за галереї відповідає блок Галерея: вибираєте кілька зображень, і WordPress збирає їх у сітку з налаштуваннями кількості колонок, розміру та типу обрізки.

У класичному редакторі натисніть «Додати медіафайл» → «Створити галерею», виберіть кілька зображень і натисніть «Створити нову галерею». У текстовому режимі (Text) галерея представлена шорткодом [gallery]. Його можна розширити параметрами: columns (колонки), size (розмір), link (посилання при кліку). Подробиці в документації WordPress.

Featured-зображення

Featured-зображення (в українському перекладі, «Зображення запису») — це головна картинка поста або сторінки. Вона задається в бічній панелі редактора (блок «Зображення запису» в Gutenberg або метабокс унизу справа в класичному редакторі).

Як тема використовує featured-зображення, залежить від самої теми: одні виводять його над заголовком на всю ширину, інші, тільки в списку постів як мініатюру, треті взагалі ігнорують. Перевірте, як це працює у вашій темі, перш ніж публікувати десяток постів з однаковими картинками.

Вставка за URL

Якщо зображення лежить на іншому сервері та ви не хочете дублювати його у свою медіабібліотеку, WordPress дозволяє вставити його за прямим посиланням. У класичному редакторі: «Додати медіафайл» → «Вставити з сайту» → вставляєте URL → попередній перегляд → «Вставити в повідомлення».

У блочному редакторі, блок Зображення → «Вставити за посиланням».

Правило просте: вставляйте за URL тільки свої зображення або файли з явною ліцензією на використання. Чужа фотографія, завантажена без дозволу,, порушення авторських прав.

Сторінки вкладень: що це та чи потрібні вони

Кожен завантажений файл автоматично отримує власну сторінку, сторінку вкладення (attachment page). Відкривається через медіабібліотеку: клік по файлу → «Переглянути сторінку вкладення».

Це повноцінна сторінка WordPress зі своїм URL. На ній відображається саме зображення, заголовок, опис, caption і alt-текст. Формат подання залежить від теми: деякі додають EXIF-дані, інші, тільки картинку та заголовок.

Для більшості сайтів сторінки вкладень, зайва сутність. Вони індексуються пошуковиками, створюють тонкі сторінки з нульовим контентом і роздмухують карту сайту. Якщо ви не фотограф, який веде портфоліо, сторінки вкладень краще вимкнути. Плагін Yoast SEO робить це однією галочкою в налаштуваннях. Інший шлях, редирект зі сторінки вкладення на сам файл або на батьківський пост через код у functions.php.

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

Відео за темою

Короткий, але ємний туторіал із медіабібліотеки WordPress, від завантаження файлів до організації бібліотеки:

⁉️🤔 Часті запитання

У якому форматі завантажувати зображення на сайт?

Оптимальні формати для вебу, WebP і AVIF: стиснення краще, ніж у JPEG і PNG, при тому самому візуальному якості. WordPress з версії 5.8 підтримує WebP, а з версії 6.1, AVIF (залежить від PHP-оточення на хостингу). Якщо хостинг не підтримує сучасні формати, завантажуйте JPEG для фотографій і PNG для графіки з прозорістю. Перед завантаженням стискайте файли: фото до 150-200 КБ, графіка до 50-100 КБ. Важкі картинки уповільнюють сайт і витрачають дисковий простір.

Чи можна відновити видалене зображення?

Ні. WordPress видаляє файл безповоротно: і оригінал, і всі згенеровані мініатюри. Кошика в медіабібліотеці не передбачено. Перед масовим чищенням зробіть бекап через плагін (UpdraftPlus, BlogVault) або завантажте архів /wp-content/uploads/ по FTP. Другий шанс дає тільки резервна копія.

Чим відрізняється alt-текст від заголовка зображення?

Alt — це текстовий замінник картинки. Його читають пошуковики (для розуміння контенту) та скринрідери (для незрячих користувачів). Title, спливна підказка при наведенні миші, вона вторинна. Заповнюйте alt завжди та по суті. Title можна взагалі не чіпати, більшість тем і браузерів його ігнорують.

Скільки зображень можна завантажити в медіабібліотеку?

Формального ліміту немає. Практичну межу визначають три фактори: дисковий простір хостингу, ліміт inode (кількість файлів у файловій системі) та ресурси PHP для обробки мініатюр. На дешевому shared-хостингу проблеми починаються після 5000-10000 файлів. Рішення, організувати папки через плагін типу FileBird або Media Library Folders і вчасно видаляти невикористовувані файли.

Як знайти та видалити невикористовувані зображення?

Вбудованого інструменту в WordPress немає. Плагіни типу Media Cleaner сканують бібліотеку та показують файли, які не вставлені в жоден пост чи сторінку. Перед видаленням запустіть перевірку, чи не посилається на файл тема (логотип, фон) або віджет. І обов’язково зробіть бекап.

Що робити з медіабібліотекою прямо зараз

Медіабібліотека, не папка «Завантаження» на вашому комп’ютері. Правило «завантажив і забув» призводить до гігабайтів сміття, уповільнення бекапів і хаосу при пошуку потрібного файлу через пів року.

Ось три дії на сьогодні:

• Зайдіть у Медіафайли → Бібліотека, увімкніть режим списку та відфільтруйте неприкріплені файли. Все, що не впізнаєте та не використовуєте, видаліть.
• Відкрийте налаштування медіафайлів (Налаштування → Медіафайли) та підганяйте розміри мініатюр під свій дизайн. Нульове значення для висоти означає «не обрізати».
• Перевірте найближчий пост: у кожного зображення заповнений alt-текст? Ні, заповніть у два кліки. Грамотний alt-текст дає основну частку SEO-ефекту від зображень, пошуковики розуміють картинку через нього, а не через пікселі.

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