суббота, 18 июля 2015 г.

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

Для того чтобы сделать простую галерею в wordpress совсем не обязательно использовать сторонние плагины. Возможно, базовые функции системы и раньше позволяли это все сделать, но сейчас этот процесс стал максимально легким, поэтому каждый сможет его реализовать.
На днях возникла задача создания именно такой «простой галереи» + на глаза попался небольшой англоязычных мануал по ней. А в итоге все это вылилось в данную статью. Кстати, тема про wordpress изображения на страницах блога поднимается не первый раз. Это и весьма популярный объемный пост про 20 полезных wordpress плагинов для изображений, с которого я всегда начинаю поиск решения задачи , если речь идет о картинках и галереях. Кроме того можно вспомнить плагин попроще Content Slide для небольшого и легкого слайдера, а также более громоздкий, функциональный и настраиваемый модуль Featured Content Gallery.  Но вернемся к нашей простой wordpress галереи.
Update (14.04.2015): Обратите внимание на то, что пост написан достаточно давно (в 2011 году) и некоторые скриншоты уже не соответствуют действительности. Хотя принцип создания галереи 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 с более новой версией скрипта Lightbox или, например, рассказывал про функциональный Lightbox Plus. Можно также попробовать подключить Lightbox 2 без плагина.

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

Есть несколько моментов, которые хотел дополнить по поводу галерее. Миниатюры используют стандартных размер изображений, указанный в меню настроек «Параметры» — «Медиафайлы». По умолчанию это 150х150 пикселей, хотя вы можете поменять на любое другое значение.
Для того чтобы исключить из галереи изображение, придется немного пошаманить. Например, вы используете отдельные картинки, которые вставляет по ходу текста, а в конце добавляете галерею — такие ситуации иногда возникают. Итак, первым делом нужно для исключаемой картинки нажать ссылку «Показать», которая находится напротив нее. Дальше в поле ссылка кликаем по кнопке «Ссылка на запись», после чего в поле появится линк с ID соответствующего приложения-картинки. Запоминаем его.
wordpress галерея
Дальше, после того как галерея уже вставлена в статью, переходим в режим HTML и находим место добавления галереи. Добавляем в код параметр exclude с указанием картинок, которые нужно исключить:
[gallery exclude="3000"]
Сохраняем запись и проверяем как все работает. Кстати, для галереи на официальном сайте есть перечень разных кодов которые можно использовать в режиме HTML. Жаль, конечно, что нельзя все сделать в настройках галереи, но тем не менее, главное чтобы все корректно работало.



Комментариев нет:

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