Додавання фотографій і галерей картинок в WordPress

  1. Додавання фото
  2. Редагування властивостей зображення
  3. Додавання фотогалерей

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

Додавання фото

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

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

У рядку «Вирівнювання» можна вибрати опцію «Зліва». Це означає, що картинка буде розташовуватися зліва, а текст буде обтікати її по правій стороні, також можна вибрати розташування по центру (Center), або праворуч (Right). Я вибираю розташування праворуч.

Ми також можемо зробити це зображення посиланням. Це означає, що після кліка по зображенню, читач перейде по посиланню, яка буде вказана в налаштуваннях. Тут можливе або вказати посилання на повнорозмірне зображення, або вибрати показ у повний розмір на окремій сторінці. Крім того, можна просто вказати будь-яку адресу в Інтернеті, наприклад google.com, щоб при натисканні на посилання читач відразу переходив туди. Я вибираю опцію «Media File / Медіа-файл», що означає перехід до полноразмерному зображенню при натисканні.

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

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

Отже, ми бачимо нашу картинку, яка вирівняна по правій стороні. Оскільки ми додали підпис до неї, вона відображається прямо під зображенням, при цьому підпис може бути відкоригована в будь-який момент без переходу в меню настройки властивостей картинки. Саму картинку можна редагувати через натискання значка «Редагувати» в лівому верхньому кутку картинки. Після натискання відкриється вікно редагування зображення, де можна змінити його розмір, задавши необхідний відсоток від його розміру на даний момент. Також тут можна змінити тип вирівнювання, назва зображення, альтернативне опис і підпис, крім цього можна редагувати і посилання.

У вкладці «Додатково» можна відредагувати URL зображення, якщо воно взято з Інтернету, або встановити розміри зображення вручну. Якщо ви можете створювати власні CSS-стилі, ви можете додати, або скасувати деякі CSS класи для цього зображення, або додати CSS код бажаного стилю прямо в рядок «Стилі». Наприклад, якщо я хочу зробити зображення круглим, я додам в рядок «Стилі» властивість - «border-radius: 100%«.

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

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

Додавання фотогалерей

Крім додавання окремих зображень, можна додавати цілі фотогалереї - колекції зображень для окремих записів або сторінок. Це робиться за аналогічною схемою, за допомогою завантажувача drag-and-drop. Єдина відмінність - це вибір вкладки «Створити галерею», - а потім перетягнути кілька файлів в поле завантаження. Щоб виділити тільки що завантажені зображення, необхідно з меню, що випадає вибрати опцію «Завантажені до цього запису». У правій частині меню можна редагувати назви, підписи та інші деталі до кожної картинки окремо, при цьому всі ваші зміни будуть збережені в реальному часі. Після того, як ви внесете всі необхідні зміни, натисніть на кнопку «Створити нову галерею». Ви також можете змінювати порядок відображення картинок, просто перетягуючи їх.

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

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

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

шорткод для галереї - посилання на файл і середній розмір мініатюри

Тут параметр link = "file" вказує, що в якості посилання ми будемо використовувати повнорозмірну версію зображення, а параметр size = "medium» означає, що замість мініатюр ми будемо використовувати середній розмір зображень. Ви можете подивитися повний список параметрів для шорткода галереї на цій сторінці http://codex.wordpress.org/Gallery_Shortcode

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

Якщо у вас виникли проблеми з переглядом - ви можете подивитися « Додавання фотографій і галерей картинок для WordPress (WordPress для початківців) »Відео на YouTube.