Июн
14
35

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

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

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

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

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

галерея wordpress

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

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

создание галереи wordpress

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

галерея wordpress загрузка изображений

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

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

галерея wordpress

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

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

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

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

галерея wordpress

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

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

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

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

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

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

wordpress галерея

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

[gallery exclude="3000"]

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

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

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

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 13, средний балл: 5,08 из 7)
Загрузка...

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

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

  • Tod   14.04.2015

    Галия, внес некоторые правки в пост. Принцип создания галереи не сильно поменялся, хотя визуально и выгляди это по другому. Вместо плагина Lightbox2, который перестал существовать сейчас есть похожий WP Lightbox 2. Можете также попробовать модуль Lightbox Plus.

  • Иван   09.09.2015

    WP Lightbox 2 открывает картинки в лайтбоксе даже там где не надо. У меня стоит плагин слайдеа изображений на главной где у него уже есть лайтбокс, и получается что открывается два лайтбокса один поверх другого. Как с этим бороться? Как заставить WP Lightbox 2 работать только в постах?

  • Tod   10.09.2015

    Иван, у меня на этой странице, кстати, такая же проблема — отображается сразу 2 лайтбокса:) Тут 2 варианта:
    1) В посте про использование скрипта Lightbox 2 без плагина есть пункт «Ручное подключение скрипта Lightbox 2», там стоит условие is_single для отображения только на страницах. То есть удаляете плагин и подключаете вручную.
    2) Второй вариант выводить лайтбокс другим модулем — плагин Lightbox Plus использовал для некоторых сайтов, у него достаточно много настроек и по моему он не конфликтует с другими (но точно не помню).

  • Иван   10.09.2015

    Спасибо! Я нашел такое решение: поставил плагин SimpleLightbox у которого в настройках можно указать где именно его применять, я указал применение только в постах.

  • Tod   10.09.2015

    Иван, спасибо за инфу, буду знать на будущее)

Оставить комментарий


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости