В этой статье мы научимся создавать галерею для своего сайта без сторонних громоздких плагинов для вывода галерей.
Для реализации будем использовать готовое решение для лайтбоксов «lightGallery» - который в свою очередь работает на jQuery.
Создать на сайте возможность управлять медиа галереей с возможностью настраивать вывод на фронт в зависимости от потребностей пользователя.
Важно!
Для этого у вас должен быть установлен и активирован плагин Carbon Fields.
В этой статье Установка плагина Carbon Fields на WordPress я рассказал как можно установить его разными способами.
Для начала давайте создадим плагин и назовём его SV Media Gallery
Создадим директорию sv-media-gallery и главный файл плагина sv-media-gallery.php
В итоге иерархия плагина должна получиться следующая:
/wp-content/plugins/sv-media-gallery/
└── sv-media-gallery.php
Чтоб наш wordpress его распознал, запишем минимальный заголовок в файл sv-media-gallery.php
Теперь у нас появился в общем списке плагин SV Media Gallery - активируем его.
Для начало нам нужно зарегистрировать новый тип записи в наш wordpress, для этого запишем следующее:
После этого нужно зайти в Настройки постоянных ссылок и пере сохранить их.
'menu_icon' - данный аргумент добавляет иконку в меню, которую я подобрал для галереи.
Весь список иконок которые входят в состав ядра WordPress можно посмотреть тут: Dashicons
После чего как и хотели в админке появляется новый тип записи Галерея с заданной нами иконкой.
Теперь нужно подключить Carbon Fields и добавить мета-бокс галереи.
Конечно по хорошему нужно разбить это всё на классы и работать в них, но для примера и чтобы вас не путать, будем работать в одном файле.
И теперь при добавлении новой галереи, появился наш желанный мета-бокс с добавлением новых фото.
Предположим, что общая ширина контейнера галереи 960px, а сетка должна быть разбита по 5 изображений и между ними отступ 10px, то соответственно размер миниатюры
должен быть 184 x 125px
Давайте зарегистрируем новый размер миниатюры наших будущих изображений, для этого воспользуемся готовой wp функцией: add_image_size()
Добавим в наш файл:
Для этого создадим директорию css в ней создаём файл стилей style.css
В итоге иерархия плагина должна получиться следующая:
/wp-content/plugins/sv-media-gallery/
├── css/
└── style.css
└── sv-media-gallery.php
Чуть-чуть HTML
Немного CSS
Теперь нужно создать шаблон страниц плагина для вывода на фронт.
Создаём директорию в нашем плагине templates и в ней же создаём файлы single.php и archive.php
В итоге иерархия плагина должна получиться следующая:
/wp-content/plugins/sv-media-gallery/
├── css/
└── style.css
├── templates/
├── archive.php
└── single.php
└── sv-media-gallery.php
Добавим константы для правильной работы с директориями плагина
Для того чтоб переопределить стандартные шаблоны темы single.php и archive.php добавим код
Когда все файлы и верстка подготовлены, подключим необходимые файлы плагина LightGallery.
Для этого переходим в репозиторий плагина на GitHub и скачиваем архив: GitHub lightGallery
Возьмем из скаченного архива LightGallery лишь минифицированные версии css и js в целях оптимизации нашего плагина. Плюс изображения и шрифты для правильной работы LightGallery.
Создадим новую директорию в нашем плагине lightgallery и переносим нужные файлы.
В итоге иерархия плагина должна получиться следующая:
/wp-content/plugins/sv-media-gallery/
├── css/
└── style.css
├── templates/
├── archive.php
└── single.php
├── lightgallery/
├── css/
└── lightgallery.min.css
├── js/
├── lg-fullscreen.min.js
├── lg-thumbnail.min.js
└── lightgallery-all.min.js
├── fonts/
├── lg.svg
├── lg.ttf
└── lg.woff
└── img/
├── loading.gif
├── video-play.png
├── vimeo-play.png
└── youtube-play.png
└── sv-media-gallery.php
Далее пропишем их подключение в главном файле нашего плагина
Для начала нужно добавить фото в нашу новую галерею.
Теперь когда контент наполнен данными и все файлы подключены можно поработать над выводом цикла наших фото на странице.
Берём наш заготовленный html контейнер с классом sv-container в файле single.php
между тегами <!-- SV Media Gallery --> и <!--/ SV Media Gallery --> заменяем на
Отмечу что миниатюра которую мы генерируем в процессе, а именно:
Осталось указать настройки галереи согласно документации lightGallery Docs добавим в наш файл:
Теперь давайте представим, что нам нужно вывести галерею на любой странице в любом месте контента и тут на помощь приходит шорткод.
Давайте напишем обработчик будущего шорткода, пишем:
Затем нужно произвести корректировку вывода js и css, для этого выставим условия, для того чтоб файлы не грузились там где это не нужно.
Теперь нам доступен шорткод на любой странице вида[sv-gallery id="187"] где id - страницы галереи.
Так же плагин будет поддерживать несколько шорткодов на одной странице блога или отдельной страницы.
Но так не удобно, давайте выведем шорткод в общий список галерей в админку так, чтоб можно было скопировать его в буфер.
Для этого добавим:
В итоге получаем то, что хотели:
Так как мы задумали, что нашу галерею можно использовать как на основной странице галереи, так и на отдельной, по этому логику придётся организовать соответствующую.
В рамках данного плагина мы не станем переносить все настройки lightGallery Settings, только те которые прописывали выше. Если нужно будет больше настроек, то думаю вам не трудно будет добавить по аналогии.
Можно сделать настройки на отдельной странице, чтоб можно было задать их один раз и они будут работать на всех будущих галереях, но мы не ищем легких путей 😉 так что будем пилить для каждой отдельной галереи собственные настройки.
При этом сделаем так, чтоб пользователь не парился для каждой отдельной страницы выставляя желанные настройки, по этому выставим настройки по умолчанию при создании новой галереи.
В начале займемся написанием настройки эффектов вывода слайдов, так как их не мало, по этому организуем их списком.
Хранить наши настройки будем в таблице *_postmeta и для этого воспользуемся типом контейнера Carbon Fields post_meta, а для удобства расположим в правом сайт-баре страницы редактирования.
И получаем желанный результат
Далее нам нужно их принять в нашем js скрипте
Осталось дописать по аналогии для всех остальных
По итогу получаем все настройки
Посмотреть исходный код можно в нашем репозитории на GitHub, а так же
скачать полностью готовый плагин с интегрированным Carbon Fields + основными настройками по умолчанию и локализацией Rus and Eng: GitHub SV Media Gallery
