Галерея в 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.

Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!

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

(голосов - 12, средний балл: 4,92 из 7)

Загрузка...

Категории: Возможности; Начинающим; Плагины;
Теги: базовые знания, вывод постов, галереи, изображения, простые плагины, текстовый редактор.