Адаптивная фотогалерея на WordPress

    Адаптивная фотогалерея на Wordpress

    Выбор подходящего плагина

    Для начала давайте определимся с плагином фотогалереи для WordPress. Поскольку на момент написания статьи самым популярным плагином является NextGEN Gallery, то для создания адаптивной фотогалереи мы собственно на нем и остановимся.

    О том, как установить  и настроить данный плагин фотогалереи, мы останавливаться в этом уроке не будем, так как на эту тему можно найти  много материала.

    Будем считать, что NextGEN Gallery вы установили и настроили удачно. Теперь остается нам сделать из обычной фотогалереи – адаптивную, т.е. чтобы  наша с вами галерея красиво и корректно отображалась на всех типах устройств, начиная с мобильных телефонов с маленьким экраном и заканчивая мониторами с большим разрешением экрана.

    Также Вам нужно знать,  как использовать Bootstap и иметь базовые навыки работы с WordPress.

    Как мы помним, галерея ставится через шорткод [nggallery id=»1″] , где id – это номер соответствующей галереи.

    Настройка плагина NextGEN Gallery

    У данного плагина имеется свое оформление, где не предусмотрена адаптивность галереи. Однако плагин позволяет создавать и использовать собственные шаблоны отображения данных.

    Для этого нам нужно выполнить следующие шаги.

    1. Нужно создать папку nggallery в корневой директории, где лежат файлы текущего шаблона WordPress.
    2. Скопировать с созданную папку файл gallery.php, который находится в папке \nextgen-gallery\products\photocrati_nextgen\modules\ngglegacy\view
    3. Переименовать скопированный только что файл в gallery-собственное_название.php. Например gallery-mygal.php.
    4. Ну и самое главное, в этом файле можно использовать boostarp2 для того, чтобы сделать нашу фотогалерею на WordPress адаптивной.
    5. Теперь остается только подключить новый шаблон галереи прямо в соответствующем шорткоде, [nggallery id=»1″ template=»mygal»]