Вітаю вас, читачі мого блогу!

Нещодавно мене запитували, як створити галерею зображень на wordpress і я вирішив записати відео та написати статтю на цю тему. Відео вище, стаття нижче:)

Галерею ми будемо створювати без встановлення додаткових плагінів, тільки засобами двигуна WordPress.

Як створити галерею на WordPress

Ви можете вставити галерею в наявні сторінки або записи на вашому сайті, або створити нові.

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

Після цього у нас два варіанти:

1. Створити галерею з тих зображень, що вже завантажені до нашої бібліотеки файлів;

2. Завантажити нові файли.

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

Я підготував заздалегідь 4 зображення автомобілів.

Наші зображення завантажились. Тут я виділив цифрами 3 важливі моменти:

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

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

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

3. Кнопка "Створити нову галерею". Після того як всі налаштування зроблено, ви можете натиснути на цій кнопці, щоб завершити створення галереї.

Налаштування галереї на WordPress

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

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

2. Натискаючи на хрестик над зображенням, можна виключити його з галереї.

3. Блок із налаштуваннями галереї:

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

Нас більше цікавить варіант "Медіафайл". Якщо ми виберемо його, то при натисканні мініатюри з галереї зображень відкриється збільшена копія нашої картинки.

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

Другий параметр – кількість колонок.Тут ми можемо вибрати скільки колонок буде у нашій галереї. Я не можу сказати скільки потрібно вибрати, тут вам потрібно самостійно поекспериментувати і вибрати відповідний для вас варіант. Давайте поки що залишимо 3, а далі подивимося.

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

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

Четвертий параметр – розмір.Тут є 4 варіанти: мініатюра, середній, великий та повний. Тут знову ж таки вибирайте на ваш розсуд. Зазвичай розміри «великий» та «повний» не використовуються. Спробуйте варіанти «мініатюра» та «середній» та підберіть той варіант, який вам підходить. Я залишу варіант "мініатюра".

4. Кнопка "Вставити галерею". Після того як всі налаштування зроблено, натискаємо її.

Наша галерея розмістилася у тексті сторінки. Не забудьте після редагування сторінки натиснути кнопку «Оновити»

Після цього переходимо на сторінку, яку редагували та дивимося, що в нас вийшло. Галерея готова!

Покращуємо галерею на WordPress

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

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

Але ми можемо покращити нашу галерею, і для цього потрібно встановити одну плагін. Він називається Fancybox. Даний плагін не вимагає налаштування, його потрібно просто встановити та активувати.

Після встановлення плагіна Fancybox оновіть сторінку з галереєю та перегляньте як тепер відображаються зображення при натисканні.

Погодьтеся стало набагато зручніше переглядати картинки з галереї.

Тепер розглянемо ще одне важливе питання.

Як редагувати галерею WordPress.

Дуже легко можна відредагувати створену вами галерею. Переходимо до редагування запису або сторінки, на якій розміщена галерея, знаходимо її та натискаємо по галереї мишкою. Галерея виділиться сірим кольором і зверху з'являться дві невеликі іконки: редагувати та видалити.

Іконка у вигляді олівця – це редагування, натискаємо по ній та переходимо до налаштувань галереї. Змінюємо те, що нам потрібно, і тиснемо кнопку «Оновити галерею». Після цього не забудьте оновити редагований запис або сторінку. Галерею оновлено.

Ось так легко і просто можна створити галерею WordPress.

На цьому сьогодні все. Ставте "лайки", ділитесь з друзями. Якщо залишилися питання, пишіть у коментарях.

Цей короткий пост – для новачків-вебмайстрів, хто ще не навчився користуватися редактором повідомлень сайтів на WordPress. Тема статті виникла не сама по собі, а звернув увагу на одному сайті на те, як один вебмайстер пропонував скористатися плагіном для створення галереї знімків у повідомленнях та сторінках записів.

В якому стародавньому джерелі він знайшов рекомендацію щодо встановлення плагіна, але тим, хто користується двигуном від WordPress як мінімум рік-два і вивчив можливості його текстового редактора, вміє створювати галереї і без плагінів остання версіявордпрес - 3,5, яка вийшла зовсім недавно, - взагалі значно покращила його можливості в плані редагування та додавання будь-яких медіафайлів, створивши спеціальне вікно безпосередньо в блоці їх завантаження та вибору. Відмінна ідея, яка, можливо, була запозичена від гуглівського блогспоту. Та це не так важливо – але від мене (та й не лише) респект розробникам!

Як створити галерею із картинок на сторінках сайту WordPress?

Метод завантаження

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

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

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

У візуальному редакторі позначиться таке зображення:

Тепер щоб переконатися, що все вийшло нормально, в редакторі запису кличем «Подивитися». Повинно вийти приблизно так:

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

Перетягування

Створити галерею або додати БУДЬ-ЯКИЙ медіафайл можна так само методом перетягування. Для цього потрібно

1) відкрити вікно додавання медіафайлів;

2) відкрити потрібну папкукомп'ютера, на якому вони розташовані і зробити її розмір таким, щоб було видно поле медіафайлів у папці та вікні додавання файлів нашого редактора

Зробивши кілька перетягувань, вибираємо картинки, тиснемо "Створити галерею", вибираємо картинки - і все тип-топ! Для зручності користування в налаштуваннях галереї виберіть посилання на медіафайл, а не сторінку вкладення, втім, як забажаєте.

Дивіться:

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

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

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

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

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

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

Код для вставки галереї:
Сюди вставляємо коди фотографій

Код фотографії має виглядати не як звичайна адреса, а ось так:

Отже, ви вставили коди фотографій замість слів "Сюди вставляємо коди фотографій". Тепер приступимо до регулювання швидкості прокручування. Параметр scrollamount="2" відповідає за швидкість прокручування. Якщо ви хочете збільшити швидкість, замініть 2 інше число. Параметр scrolldelay="1" відповідає за затримку перед кожним новим рухом. Якщо ви хочете щоб картинка рухалася з великими затримками, тоді поставте число 500 або 1000, якщо хочете рух без гальм то не чіпайте даний параметр. Отриманий код публікуємо блог та радіємо читача.

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

Далі я розповім вам, як ще можна урізноманітнити вже створену галерею. Наприклад, ви хочете, щоб фотографії йшли не праворуч, а навпаки. Для цього додайте до коду команду direction="right". Якщо ви хочете, щоб фотографії ходили праворуч на ліво, а потім назад, вставте в код галереї команду behavior="alternate".

Якщо ви хочете пустити фотографії з верху вниз або знизу вгору, скористайтеся цими командами:
direction="down" - фотографії йдуть згори донизу;
direction="up" - фотографії йдуть знизу нагору.

Для регулювання ширини та висоти вставляйте дані команди у код галереї:
width="500" - ця команда регулює ширину галереї. Щяс коштує цифра 500, отже ширина галереї буде звужена до 500 пікселів;
height="500" - ця команда регулює висоту галереї. Щяс коштує цифра 500, отже висота галереї буде звужена до 500 пікселів.

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

Всім привіт!

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

Створення простої галереї WordPress

Насправді все банально просто і схоже на додавання зображень до публікації через редактор WordPress.

Публікуючи статтю, у редакторі виберіть кнопку ДОДАТИ МЕДІАФАЙЛ:

Наступним кроком, перебуваючи в бібліотеці файлів, тиснемо праворуч зверху на посилання. СТВОРИТИ ГАЛЕРЕЮ:

Тепер потрібно вибрати зображення для галереї WordPress. Просто наголошуйте на потрібних. Для створення галереї бажано готувати картинки однакового розміру, щоб усе виводилося рівно.

При завантаженні або додаванні до статті зображень завжди прописуйте атрибути alt="" та title="".

Вибрали, підписали і тиснемо кнопку Створити нову галерею:

Налаштування галереї WordPress

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

Вибираємо посилання галереї

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

Вибираємо кількість зображень в одному рядку галереї WordPress

Для мініатюр (див. скріншот нижче), раджу вибирати 5-6 зображень в одному рядку. Менше не дуже добре виглядає на великих моніторах, більше – погано на маленьких. Для середнього розміру 3-4 картинки у ряд. Але знову ж таки все залежить від налаштувань (нижче).

Вибираємо розмір зображень

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

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

Ось що в результаті виходить:

Галерея із застосуванням мініатюр у п'ять картинок у ряд:

Галерея з налаштуваннями середнього розміру три картинки в ряд:

Створення галереї WordPress із використанням плагіна Responsive Lightbox by dFactory

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

Даний недолік усуває WordPress плагін Responsive Lightbox by dFactory.

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

ГОЛОВНЕпри публікації картинок або при створенні галереї, привласнити картинки посилання на медіафайл. Решта плагін зробить автоматично.

Ще один плюс використання плагіна Responsive Lightbox by dFactory – прискорення швидкості завантаження сторінки.
Якщо у вас на сторінці використовується багато зображень, можна створити галерею з мініатюр або картинок середнього розміру, а відкривати великі оригінальні картинки плагіном. Можна легко створювати тематичні альбоми, відкривати в Лайтбокс окремі медіафайли, відео.

Налаштування плагіна Responsive Lightbox by dFactory

p align="justify"> Плагін Responsive Lightbox by dFactory має ряд налаштувань, але вони настільки інтуїтивно зрозумілі, що розписувати їх немає сенсу. Але на деяких налаштуваннях все ж таки потрібно загострити увагу.

• Gallery image size- Розмір зображень. Я вибрав оригінальний
• Gallery image title- напис під картинкою, звідки брати, з атрибуту alt="" , title="" , або без напису.
• Force gallery lightbox- якщо використовуєте галерею JetPak, активуйте цю опцію.
• Video links- якщо хочете показувати відео з ютьюба, то залиште це налаштування увімкненим, якщо ні, то відключіть.
- я вибрав у footer для оптимізації швидкості. Якщо плагін не працюватиме, переставте в header.
• Налаштування користувача jQuer y- Найкласніша настройка. Дозволяє завантажувати скрипти та стилі лише на сторінки, які містять зображення або галереї у змісті посту.
• На цьому усі друзі.
• БЕРЕЖІТЬ СЕБЕ!

Ці красуні хочуть, щоб ти їх жорстко лайкнув і навіть кілька разів твітнув!