Июн

Галерея в WordPress с эффектом Lightbox

Для того чтобы сделать простую галерею в WordPress сайте совсем не обязательно использовать сторонние плагины. Современные базовые функции системы позволяют реализовать это максимально легко — процесс не сложнее добавления ссылки на изображение, реально каждый сможет его реализовать.

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

Обновление 14.04.2015: Обратите внимание на то, что пост написан достаточно давно (в 2011 году) и некоторые скриншоты уже не соответствуют действительности. Хотя принцип создания галереи WordPress остался более-менее похожим.

Собственно самым популярным модулем для создания простой wordpress галереи есть NextGEN Gallery, но не всегда его применение обязательно. Если вам нужно получить что-то вроде:

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

Для того чтобы создать простую галерею WordPress заходим в админку и нажимаем «Добавить новую» запись. Картинки будем загружать прямо в процессе написания поста, что позволит «привязать» их к статье, и чтобы система понимала к какой заметки они относятся. Итак, в текстовом редакторе находим специальную иконку для загрузки картинок:

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

Кстати, при выборе можно выделять сразу несколько картинок за раз. После загрузки вы увидите список картинок, напротив которых будет ссылка «Показать». При нажатии на нее увидите информацию по каждому изображению, а также сможете дописать для него Alt, Title, выбрать размер, расположение и вставить его в пост.

В нашем случае можно просто указать Alt и Title, после чего жмем кнопку «Сохранить все изменения». После этого вы сразу попадете в закладку «Галерея». Здесь и происходит, по сути, создание галереи. Можно указать некоторые ее параметры: порядок и вариант сортировки, число столбцов, а также указать куда именно ведут ссылки с картинок — на страницу вложений или само изображение.

Последнее что нужно сделать — нажать кнопку «Вставить галерею». После этого она появится в текстовом редакторе. Если сохраните черновик и посмотрите его отображение — увидите галерею в блоге.

Эффект Lightbox для wordpress галереи

Так как у нас для каждой картинки имеется ссылка, то можем добавить немного эффектов в их отображение. Во-первых, при создании галереи указываем ссылки с миниатюр на «Файл изображения», а во-вторых, установим плагин WP Lightbox 2. Установка стандартная и простая — скачиваем архив, разархивируем, загружаем на ФТП в директорию /wp-content/plugins/, после чего в админке его активируем.

Дальше в разделе «Параметры» появится пункт Lightbox 2, где можно будет задать кое-какие настройки для плагина.

Выбираете разные опции для фона, эффектов при открытии изображения. После этого сохраняем и смотрим что получилось в итоге на сайте.

Кстати, раньше я пользовался плагином Lightbox 2, который хоть и был актуальным до WordPress 2.9.2, исправно работал на более старших версиях. Новый WP Lightbox 2 совместим с WordPress 3.0 — 4.1.1. Однако, учитывая его простоту, думаю, он прослужит и для последующих обновлений системы.

С другой стороны есть достаточно альтернативных разработок, из которых всегда можно кое-что подобрать. Например, видел Lightbox 3 с более новой версией скрипта или рассказывал про работу с функциональным плагином Fancybox в Вордпресс. Можно также попробовать подключить Lightbox 2 без плагина.

Дополнения по галерее wordpress

Есть несколько моментов, которые хотел дополнить по поводу галерее. Миниатюры используют стандартных размер изображений, указанный в меню настроек «Параметры» — «Медиафайлы». По умолчанию это 150х150 пикселей, хотя вы можете поменять на любое другое значение.

Для того чтобы исключить из галереи изображение, придется немного пошаманить. Например, вы используете отдельные картинки, которые вставляет по ходу текста, а в конце добавляете галерею — такие ситуации иногда возникают. Итак, первым делом нужно для исключаемой картинки нажать ссылку «Показать», которая находится напротив нее. Дальше в поле ссылка кликаем по кнопке «Ссылка на запись», после чего в поле появится линк с ID соответствующего приложения-картинки. Запоминаем его.

Дальше, после того как галерея уже вставлена в статью, переходим в режим HTML и находим место добавления галереи. Добавляем в код параметр exclude с указанием картинок, которые нужно исключить:

[gallery exclude="3000"]

Сохраняем запись и проверяем как все работает. Кстати, для галереи на официальном сайте есть перечень разных кодов которые можно использовать в режиме HTML. Жаль, конечно, что нельзя все сделать в настройках галереи, но тем не менее, главное чтобы все корректно работало.

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

P.S. Часто продвижение зависит от типа сайта. Узнайте как раскрутить интернет магазин на блоге компании SEOinUA.

Оцените статью:

(голосов - 13, средний балл: 5,08 из 7)

Загрузка...

Категории: Возможности; Начинающим; Плагины;

Теги: базовые знания, вывод постов, галереи, изображения, простые плагины, текстовый редактор.

комментариев 35 к статье “Галерея в WordPress с эффектом Lightbox”

1 2 Далее →

Крупенич Андрей 14.06.2011
Все это здорово, однако при активации плагина типа lightbox, он подгружает и jQ и CSS везде где можно. А как быть, если я не хочу всего этого безобразия на главной, к примеру странице, только там где is_singe() ?
Мне кажется задача тривиальная не сорить там где нет необходимости, но почему-то все практически плагины для wordpress грешат неразборчивостью в этом отношении…
Tod 14.06.2011
Андрей, да уж, кода там в header добавляется дайбоже, по правильному было бы логично грузить только для single, согласен. Остается вопрос как отключить ненужны код на остальных страницах, пробовал по своему же мануалу оптимизации WordPress header увы не поддалось, нужно копать глубже:)
z005 14.06.2011
Откройте пожалуйста секрет. Вот сколько читал все пишут что постовые это убийца блога. Но у вас я их целых три насчитал) Судя по тицу сайта человек вы опытный. В чем «фишка»? Вы просто не боитесь? Просто не верите? Или ваш вариант ответа? )
Крупенич Андрей 15.06.2011
А может быть пойти другим путем? Есть куча разных библиотек на jQuery, которые просто подключить только там, где нужно и скрипт, который бы обрабатывал все картинки на странице делая их галереей?
Никаких плагинов вообще, и быстро и как нужно.
То же и с CSS, я заметил ,что в вордпрессовском css ну лежит все, на все случаи жизни. Почему нельзя для главной подцепить один css, для страницы другой, а для записи третий? Все это мелочи конешно, но если у меня главная весит около 200к без рекламы — экономия 10 килобайт — это много, раз, а два, всеже неужели вывелись люди, которые любят красивый код?
Вообщем за решение этих 2х задач с грамотным выводом картинок только там, где нужно + разбиение css на куски я готов заплатить если найдутся желающие…
Вообще мне очень нужна кодерская помощь, в долгу не останусь :)
Tod 15.06.2011
z005, не вижу связи между постовыми и убийством блога. Для поисковиков вроде как проблем никаких не должно быть, обычные ссылки поставленные вручную без бирж и всего такого. Если для читателей, то тут постовые служат небольшим неудобством и компромиссом дабы я мог заниматься развитием проекта и уделять ему должное вниамние.
Крупенич Андрей, вообще, можно действительно зайти на сайт скрипта Lightbox 2 и подключить его вручную, единственная проблема добавить в functions какую-то обработку для ссылок картинок, дабы в них добавлялся нужный rel код. Но если это простой сайт-визитка, не сильно посещаемый блог, то можно потерпеть, нагрузки не должны быть большие (по описанию плагина) скрипты оптимизированные используются и все такое. Для блога вроде WordPress inside я бы конечно либо нашел решение проблемы, либо не использовал этот плагин)
z005 15.06.2011
пишут что современник блог обростает кучей не тематических ссылок и поисковики начинают выкидывать страницы с поиска.
Tod 15.06.2011
z005, пока что у меня с этим проблем не было, надеюсь и не будет в дальнейшем:) Если у вас качественный тематический проект с уникальными полезными статьями, то думаю все будет окей.
Серж 08.07.2011
Просто суперский плагин Litebox2 весь день его искал
ольга 06.10.2011
день добрый! Хочу создать патную галерею для пользователей. Т.Е. я хочу чтобы пользователи платили денюшку за просмотр моей галереи.Есть такая возможность?
Tod 06.10.2011
Ольга, к сожалению, я такой функциональности не встречал, поэтому подсказать не смогу.
Игорь 09.12.2011
Если честно, то это не совсем уж для чайников статья. Где о том что писать в «подпись, описание» в редактирование медиафайла? Хотелось бы все таки детальное, пошаговое действие работы в меню. Да и честно говоря плагинов существует множество, но вот чтобы конкретно подсказать какие обязательные, а какие полезные и для чего именно и что они дадут в итоге приходится изучать как по букварю, да и не сразу.
Tod 12.12.2011
Игорь, возможно не совсем для чайников, скорее «золотая середина» ибо опытным пользователям будет, например, лень читать очень детальное описание. По существу главный посыл в том что можно обойтись без крутых плагинов за счет обычной галереей и добавить к ней неплохие эффекты, в описании медиафайла нужно написать его название и текст, который будет отображаться в галерее. Даже если без эффекта, данная информация идет в alt и title картинки, что полезно в плане оптимизации страницы сайта под поисковики.
Алёна 25.01.2012
Спасибо за статью, очень помогла!!! -:)
Александр 01.12.2013
Не могу найти решение!К примеру у меня в одной записи несколько галерей,где для каждой соответствующий шорткод! Почему навигация плагина Lightbox (стрелки вперед, назад) выводит изображения из всех галерей в записи? И возможно ли добиться каким либо образом показа слайдов только одной конкретной галереи, где текст соответствует именно ей? Спасибо!
Tod 03.12.2013
Александр, в данном посте рассмотрена стандартная галерея + Lightbox, поэтому не уверен, что получится выводить так, как нужно вам. Но я бы все же посмотрел шорткоды тут. Вариант проще — найти популярный плагин галереи с эффектом и возможностью создавать несколько галерей в посте (для начала можно глянуть NextGEN Gallery).
Александр 04.12.2013
Спасибо Tod! Вы правы! После долгих поисков ответа, по рекомендации отзывчивых людей, установил плагин lightbox plus colorbox , где есть настройка взаимодействия между галереями и все теперь работает как и хотел!!!
Александр 12.01.2014
Изумительное простое решение если вам не нужны тонны англоязычных настроек, как в nextgen. Все просто, функционально и красиво. Спасибо Вам за эту статью.
еолек 29.06.2014
Да ладно, тема не актуальна! Таких меню в wordpress уже давно нет!
Tod 29.06.2014
еолек, все меняется, тем не менее, частично принцип галереи остался, правда сейчас админка новая и плагины, возможно, появились.
Yury 05.10.2014
Помогите, пожалуйста с поиском плагина. Нужна галерея, каждое изображение которой будет иметь свою якорную ссылку. То есть открываться на той же странице, где и пост, но со своим параметром. К примеру пост:
site.com/foto-slonov.html
а галерея к этому посту имеет вид ссылок к фото
site.com/foto-slonov.html#1
site.com/foto-slonov.html#2
и т.д., то есть можно дать ссылку на конкретное фото из галереи. стандартными средствами WP4.0 не нашёл как это сделать.
Tod 05.10.2014
Yury, если честно, то не знаю.
Alina 17.12.2014
Подскажите, пожалуйста, сейчас всё же можно вставить такую галерею? в админке нигде не могу найти ничего про галереи. Т.е. при вставке медиафайлов, они все по отдельности у меня вставляются и всё, а в плагине Jetpack есть про размещение фотографий «плиткой». Вот очень бы хотелось этим воспользоваться… Вопрос, как?
Tod 17.12.2014
Alina, заходите в создание новой записи, выбираете вставку картинки — у вас открывает окно где происходит загрузка изображений и там же есть Create Gallery пункт, он отвечает за создание галереи. Отмечаете нужные фотки и в правом нижнем углу есть кнопка создания галереи.
Alina 19.12.2014
Спасибо большое, нашла, что-то раньше даже не смотрела что на этой серой панели сбоку находится. Вот только всё
Dina 22.01.2015
Доброго времени суток! Подскажите пожалуйста, существует ли возможность дополнять изображения в уже существующую галерею. Причем дополнять периодически в одну и ту же! Пытаюсь добавить, но изображение получается не в галерее(
Tod 23.01.2015
Dina, сложно сказать наверняка, такой задачи у меня не было. В крайнем случае, если не получается, нужно будет просто создавать новую галерею, где отмечать и старые и новые фото, а потом заново вставлять ее в пост.
Dina 23.01.2015
ну да, такой вариант пробовала, но сложновато выходит, много нюансов. Спасибо большое за ответ.
Наталья 08.02.2015
Я установила два плагина lightbox plus colorbox и NextGEN, но похоже происходит несовместимость между ними. В моих постах (кстати, не во всех) если открываешь миниатюру с помощью Лайтбокс Плюс, то имеющаяся в тексте галерея NextGEN уже не хочет работать, фото не увеличиваются по клику. Подскажите, что можно сделать?
Tod 08.02.2015
Наталья, мне кажется в lightbox plus colorbox есть возможность выводит увеличение картинки разными методами — там где-то в настройках должен быть выбор между jQuery и еще чем-то. Также советую глянуть раздел FAQ на сайте вордпресс, где находится плагин — там рассмотрены некоторые методы решения проблемы. Конкретный рецепт посоветовать сложно, но тоже помню были проблемы с совместимостью некоторые модулей, возможно как раз речь идет о lightbox plus colorbox и NextGEN.
Еще вроде бы плагин Fancybox for WordPress может помочь, на одном из сайтов его использую с галереей.
Галия 14.04.2015
пост старый, пора убрать или полностью статью заменить — время потратила зря