Робота з блоком зображень WordPress: Як додавати зображення в WordPress [+ секретна порада].

Для багатьох користувачів робота із зображеннями може стати справжнім випробуванням. Не завжди легко вибрати правильне співвідношення сторін або правильно змінити розмір зображення, щоб воно добре виглядало в макеті.

1. Навіщо використовувати блок зображень WordPress
2. Як додати зображення за допомогою блоку зображень WordPress
3. Процес додаткового форматування зображень
4. Додаткова порада від нас у статті

Старіші версії WordPress (до v5.0) додавали зображення за допомогою кнопки +Додати медіа. Проблема полягала в тому, що навіть при мінімальній зміні розміру зображення вам потрібно було б завантажувати його знову. Це означає втрату часу і зайві кліки.

Новий блоковий редактор Gutenberg змінює спосіб додавання зображень до WordPress, щоб зробити цей процес простішим для кінцевих користувачів. У цій статті ми покажемо вам практичний посібник з додавання та редагування блоку зображень WordPress. Крім того, ми пояснимо ще один варіант вставки зображень - як скопіювати і вставити зображення в область контенту всього за кілька кліків. Ми також познайомимо вас з новими функціями, які з'явилися в WP 5.3.

Але спочатку давайте поговоримо про те, чому варто використовувати зображення в постах і на сторінках.

Чому блок зображень WordPress є обов'язковим для вашого сайту

Привертайте увагу

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

З цієї причини нам потрібно використовувати блок зображень WordPress, щоб сфокусувати увагу на важливих речах.

Ілюстративний текст і контекст

Зображення також є важливою частиною для розуміння контенту, оскільки вони дозволяють відвідувачам краще зрозуміти, про що йдеться в статті. Завдяки інфографіці ви можете пояснити складні зв'язки та розповісти про речі просто. Це допомагає відвідувачам краще орієнтуватися в проблемі, про яку ви розповідаєте.

Зробіть сайт приємнішим

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

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

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

- За допомогою "+" у верхній панелі або будь-де в редакторі

- Використовуючи скісну риску "/" і пишучи після неї слово "image"

Буде створено новий блок, куди ви зможете додати актуальні зображення.

Завантаження зображень до WordPress

Як розмістити зображення там, де ви хочете?

• Скористайтеся кнопкою Завантажити і виберіть зображення з жорсткого диска
• Використовуйте Медіатеку, де ви можете вибрати зображення, які вже були завантажені на ваш сайт
• Використовуйте мишу та перетягніть зображення
• Вставити URL-адресу зображення

Менш відомий метод додавання зображень WordPress

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

• Скопіюйте зображення з будь-якого контенту, або
• Просто "перетягніть" зображення курсором миші

А потім вставте або перемістіть (перетягніть) вибране зображення в потрібне вам місце в області контенту.

Таку ж техніку ви можете використати і у випадку, якщо хочете вставити зображення, захоплене з екрану. Для цього потрібно зробити лише три простих кроки. Перший, потрібно зробити скріншот за допомогою функції друку екрана. Наприклад, у Windows 10 за замовчуванням передбачено інструмент для створення фрагментів під назвою Snip & Sketch, який також доступний за допомогою комбінації клавіш - просто натисніть клавіші Win+Shift+S разом на клавіатурі. Потім виберіть область зображення, яку ви хочете захопити. Останній крок - вставити скопійоване зображення (або його частину) в область вмісту за допомогою базового поєднання клавіш Ctrl+V.

А що відбувається із зображенням WordPress, яке ви вставили в редакторі? Ну, воно автоматично додається до медіатеки, де ви можете редагувати це зображення.

Обмежені можливості метаданих зображень

Під час редагування зображення ви можете встановити його назву, підпис, опис та альтернативний текст. На жаль, ви не можете змінити назву файлу зображення - воно збереже свою автоматично створену назву, наприклад image-1.png і так далі. Такий тип імен файлів може бути невеликим недоліком з точки зору SEO-оптимізації через конфлікт з рекомендаціями щодо іменування файлів. Тому вам потрібно врахувати цей аспект перед переміщенням зображень WordPress до області контенту.

Вирівнювання зображення

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

Зміна розміру зображень

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

Новий стиль блоків, який перетворює зображення у форму кола

Якщо ви використовуєте останню доступну версію WordPress, ви могли помітити новий стиль обтікання колом, який ви можете використовувати для вашого зображення. Форму зображення можна змінити за допомогою верхньої панелі інструментів, натиснувши на першу іконку "Змінити тип або стиль блоку". Форма за замовчуванням (прямокутник) буде обрізана до форми кола.

Нові функції в блоці зображень WordPress (додані в WP 5.3)

Підтримка зображень високої роздільної здатності

Однією з найбільших особливостей WP 5.3 є покращена обробка зображень на платформі WordPress. Робота з зображеннями тепер має дві основні функції:

1. Відновлення завантаження - якщо ви завантажуєте фотографії у високій роздільній здатності, а інтернет-з'єднання обривається, процес завантаження автоматично продовжиться з перерваного місця.
2. Автоматичне обертання зображень - остання версія WP гарантує, що неправильно повернуті зображення автоматично повертаються в правильне положення під час завантаження

Налаштування в Інспекторі

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

Це дуже швидко і практично, тому що ви можете робити всі зміни розміру зображень прямо в блоці WordPress Images і все в одному місці в редакторі блоків.

Налаштування блоку "Інші зображення

Як додати URL-адресу

Зображення можна використовувати як статичні, а можна зробити їх клікабельними і розмістити на них посилання:

•   Медіа-файл
•   Вкладена сторінка
•   Власна URL-адреса

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

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

Чому важливо, щоб ці тексти були заповнені?

Якщо відвідувачі натиснуть на зображення, щоб побачити його більшим, вони побачать заголовок зображення (наприклад, домашня сторінка Citadela), а не ім'я файлу зображення. Крім того, якщо виникнуть проблеми із завантаженням зображення, на вашому сайті буде показано альтернативний текст.

Додаткові поради

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

У наш час люди лінуються читати. Вони вважають за краще прокручувати картинки вниз, щоб знайти відповіді. Як же ваші фотографії та зображення можуть ранжуватися? Відповідь - тексти. Для SEO-оптимізації дуже важливим є ідеальний заголовок та опис зображення. Не забудьте заповнити альтернативний текст. Тоді Google зможе краще зрозуміти зображення. Таким чином, у вас буде більше шансів підняти його в результатах пошуку зображень.

2 способи додати підпис до зображення

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

Другий спосіб - написати підпис до зображення за допомогою іконки олівця (Редагувати зображення) в медіатеці. Таким чином ви додасте підпис до зображення глобально на всьому веб-сайті. Це означає, що якщо ви використовуєте одне і те ж зображення в трьох різних місцях, воно завжди буде мати цей підпис.

Вам подобається, як легко додавати зображення в блоці зображень WordPress? Спробуйте самі!

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