Выбор подходящего плагина
Для начала давайте определимся с плагином фотогалереи для WordPress. Поскольку на момент написания статьи самым популярным плагином является NextGEN Gallery, то для создания адаптивной фотогалереи мы собственно на нем и остановимся.
О том, как установить и настроить данный плагин фотогалереи, мы останавливаться в этом уроке не будем, так как на эту тему можно найти много материала.
Будем считать, что NextGEN Gallery вы установили и настроили удачно. Теперь остается нам сделать из обычной фотогалереи — адаптивную, т.е. чтобы наша с вами галерея красиво и корректно отображалась на всех типах устройств, начиная с мобильных телефонов с маленьким экраном и заканчивая мониторами с большим разрешением экрана.
Также Вам нужно знать, как использовать Bootstap и иметь базовые навыки работы с WordPress.
Как мы помним, галерея ставится через шорткод [nggallery id="1″] , где id — это номер соответствующей галереи.
Настройка плагина NextGEN Gallery
У данного плагина имеется свое оформление, где не предусмотрена адаптивность галереи. Однако плагин позволяет создавать и использовать собственные шаблоны отображения данных.
Для этого нам нужно выполнить следующие шаги.
- Нужно создать папку nggallery в корневой директории, где лежат файлы текущего шаблона WordPress.
- Скопировать с созданную папку файл gallery.php, который находится в папке \nextgen-gallery\products\photocrati_nextgen\modules\ngglegacy\view
- Переименовать скопированный только что файл в gallery-собственное_название.php. Например gallery-mygal.php.
- Ну и самое главное, в этом файле можно использовать boostarp2 для того, чтобы сделать нашу фотогалерею на WordPress адаптивной.
- Теперь остается только подключить новый шаблон галереи прямо в соответствующем шорткоде, [nggallery id="1″ template="mygal"]