Додавання зображень і мультимедійних файлів у WordPress

1. Вступ
2. Завантаження медіафайлу
3. Додавання медіафайлу
4. Налаштування властивостей
5. параметри файлу
6. Тема, підпис і альтернативний текст
7. Налаштування відображення файлу
8. вирівнювання
9. Посилання
10. Розмір

Дана інструкція завершена, але в ній є посилання на ще не опубліковані матеріали. Прошу не лякатися, якщо якась із посилань не відкриється. Скоро все запрацює! 🙂

З повагою, Олександр.

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

Ось саме про це ми і поговоримо з вами в цій інструкції. 🙂

вміст статті

Вступ

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

Поки не почали детальний огляд, скажу відразу: існує два варіанти завантаження файлів. Перший - через розділ «Медіафайли» головного меню, другий - через кнопку «Додати мультимедійний» в інтерфейсі створення запису або сторінки. Різниця між ними невелика.

Якщо ви завантажуєте мультимедійний з вашого комп'ютера через інтерфейс створення сторінки або записи, то вона автоматично «прив'язується» до неї. Тобто, в списку медіафайлів (розділ меню) ви побачите, коли, ким і до якої сторінки або запису був завантажений цей файл.

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

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

А тепер продовжимо ...

Завантаження медіафайлу

Розглянемо ситуацію: вам треба додати в новий запис тематичне зображення. Звичайна така ситуація, чи не так? Читати простирадло тексту без картинок дуже нудно, принаймні мені.

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

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

Ось він, мій файл:

Файл, який треба завантажити

Для завантаження і вставки зображення в редакторі WordPress є кнопка з однойменною назвою «Додати мультимедійний»:

Кнопка «Додати мультимедійний»

Натискаємо по ній і бачимо наступне спливаюче вікно:

Інтерфейс завантаження файлу

У вас є два варіанти: завантажити новий файл або ж звернутися до Бібліотеки файлів для пошуку серед раніше завантажених файлів. Нам поки це не треба, тому нас цікавить вкладка «Завантажити файли» цього вікна.

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

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

Так ось, для завантаження файлу нам необхідно натиснути на кнопку «Виберіть файли», після якої з'явиться спливаюче вікно для вибору файлу. Знаходьте в ньому той файл, який будете завантажувати.

Інтерфейс тим часом зміниться на такий:

Перегляд завантаженого файлу

Оскільки файл вже завантажився, то і вкладка зміниться на «Бібліотеку файлів», в якій можна побачити всі раніше завантажені файли і документи.

Автоматично буде виділено той файл, який ви завантажили в даний момент. Якщо ви вибрали декілька файлів, то обрані будуть все автоматично.

Додавання медіафайлу

Тепер достатньо буде натиснути на кнопку «Вставити в запис» і файл буде вставлено в текст вашого поста або сторінки.

Відступ: ви могли звернути увагу, що файл був один, а завантажився інший. Нічого страшного - під час написання матеріалу я вибрав інший файл з робочого столу. 😉

На скріншоті нижче ви можете спостерігати ситуацію, коли файл завантажений в редактор з візуальним режимом, картинка стає відразу видно (це знімок редактора з файлом):

Приклад завантаженого і доданого файлу

Якщо перед завантаженням файлу у вас був активний текстовий режим редактора, то ви побачите зовсім іншу картину:

Щоб відобразити файл в текстовому режимі редактора

Ну і дурниця ... Але людині знайомому з HTML це про багато скаже: у нашого зображення є напис (caption), є атрибути вирівнювання, підписів і заміщають написів, вказані розміри зображення і шлях до нього на хостингу. 🙂

Вибачте, я відволікся! 🙂

Налаштування властивостей

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

Всі ці властивості задаються в правій частині екрану після вибору будь-якого файлу в тому самому спливаючому вікні. Я взяв випадковий файл в Бібліотеці і виділив його:

Відображення властивостей завантаженого файлу

Давайте розглянемо детально кожен блок.

параметри файлу

У цьому розділі представлена ​​зведена інформація про завантаженому файлі: назва на сервері, дата завантаження, розмір і дозвіл.

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

параметри файлу

Тема, підпис і альтернативний текст

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

Налаштування підписів і заголовків медіафайлу

З обов'язкових налаштувань тут тільки два: «Тема» і «Атрибут alt». Перший впливає на те, який текст з'явиться при наведенні миші на зображення, а другий відобразиться в тому випадку, якщо в браузері користувача відключені зображення.

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

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

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

Поле «Підпис» не у всіх темах буде працювати, тим не менш, в моїй Twenty Fifteen він додає під зображенням текстову підпис, яка словами описує те, що зображено на картинці. Це не обов'язково, але мені подобається так. 🙂

Налаштування відображення файлу

У цьому розділі вам належить визначитися і вибрати ті варіанти відображення, як буде показуватися завантажений вами файл.

Налаштування відображення файлу

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

вирівнювання

Має три значення: зліва, справа і по центру. Якщо сказати точніше, то вибір варіантів «Зліва» і «Справа» спричинить за собою обтікання цього зображення текстом з тієї чи іншої сторони. Зручно для вставки ілюстрацій.

Посилання

У даній настройці пропонуються чотири значення на вибір: мультимедійний, сторінка вкладення, довільний URL і відмова від використання посилання.

«Медіафайл» використовується найчастіше для того, щоб при кліці на зображення воно відкрилося в новій вкладці браузера в полноразмерном варіанті. Дуже часто це значення використовується для так званого ефекту «LightBox» , Коли зображення відкривається в цьому ж вікні на затемненому фоні. Ви можете клацнути на будь-яке зображення в цьому блозі і побачити, як воно працює.

Приклад ефекту Lightbox для зображення

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

«Довільний URL» дозволяє зробити активне посилання на будь-яку сторінку вашого сайту, або взагалі на зовнішній сайт і при кліці по ній ви автоматично будете переадресовані на нього. Зручно для вставки банерів або партнерських посилань, наприклад.

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

Сподіваюся, що стосується посилань для вас стало більш-менш ясним.

Розмір

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

Наявність тих чи інших варіантів залежить від розміру вихідного зображення і налаштувань в розділі «Налаштування» - «Медіафайли» (докладніше про них читайте в відповідної інструкції (Тут буде робоче посилання, як тільки матеріал буде опублікований))

Так ось, наприклад, у вас зображення більше 2 тисяч пікселів по ширині, тоді WordPress зробить всі можливі варіанти зображень і в розділі «Розмір» при розміщенні файлів ви побачите кожен з них.

Вибравши той чи інший варіант буде вставлена ​​НЕ зменшена копія оригінального файлу, а саме той розмір, який ви вибрали. Це дуже зручно для сайтів про подорожі з великою кількістю фотографій. Або ж для сайтів-візиток фотографів, де розміри фотографії просто величезні.

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

І? .. 🙂

Якщо ви ще не зрозуміли, продовжу - користувачеві доведеться завантажити 20 мегабайт на одній тільки сторінці. Не думаю, що він скаже вам «Спасибі» за це. А з огляду на той факт, що є регіони, де до сих пір немає нормального інтернету і люди користуються мобільним з обмеженим трафіком, то біда стає ще більш серйозною.

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

Уф ... Сподіваюся, я зрозуміло і доступно пояснив. Якщо немає - задайте ваше запитання в коментарях, обговоримо більш детально! 🙂

Якщо ви знайшли помилку - виділіть фрагмент тексту і натисніть Ctrl + Enter.