Записная книжка айтишника

Реклама на сайте:

Hosteria Modal Gallery

Категория: WordPress

Hosteria Modal Gallery — это лёгкая и производительная модальная галерея (Lightbox) для WordPress. Построенная на базе Swiper.js, она автоматически обнаруживает ссылки на изображения и отображает их в адаптивной модальной галерее с поддержкой масштабирования.

Плагин разработан в соответствии с рекомендациями WordPress.org: сторонние библиотеки отделены от собственного кода, а для хранения настроек используется стандартный WordPress Settings API.

✨ Возможности

  • Автоматический Lightbox — автоматически распознаёт ссылки на изображения без использования шорткодов и дополнительной настройки.
  • Адаптивная галерея — корректно работает на компьютерах, планшетах и мобильных устройствах.
  • Поддержка жестов и масштабирования — свайпы, управление колесом мыши и масштабирование изображений.
  • Подписи к изображениям — при необходимости отображает подписи из атрибута alt.
  • Ленивая загрузка (Lazy Loading) — изображения загружаются только при необходимости, что повышает производительность.
  • Совместимость с темами — не использует глобальные CSS-сбросы и не вмешивается в стили активной темы.
  • Готовность к локализации — поддерживает систему переводов WordPress и текстовые домены.

Используемые технологии

  • JavaScript (ES6+)
  • Swiper.js
  • Webpack 5
  • Babel
  • Tailwind CSS v4
  • PostCSS
  • PHP 7.4+
  • WordPress Settings API

Установка и разработка

1. Клонируйте репозиторий и установите зависимости:

npm install

npm run dev

npm run build

hosteria-gallery/
├── src/                      # Исходные файлы
│   ├── js/                   # Пользовательская JavaScript-логика
│   │   └── swiper.js         # Инициализация галереи и обработчики событий
│   ├── css/
│   │   └── index.css         # Пользовательские стили и точка входа Tailwind
│   ├── php/                  # Код WordPress-плагина
│   │   ├── languages/        # Файлы локализации (.pot, .po, .mo)
│   │   ├── assets/           # Подготовленные ресурсы
│   │   ├── vendor/           # Сторонние библиотеки (Swiper JS/CSS)
│   │   └── hosteria-gallery.php
│   ├── index.html            # Шаблон для локальной разработки
│   └── index.js              # Точка входа Webpack
├── hosteria-gallery/         # Production-сборка
│   ├── assets/
│   ├── languages/
│   ├── vendor/
│   └── hosteria-gallery.php
├── webpack.config.js         # Конфигурация Webpack
├── package.json
└── README.md

Установка

  1. Выполните команду:

    npm run build
  2. Упакуйте созданную папку hosteria-gallery в ZIP-архив.
  3. Установите архив через:

    Консоль WordPress → Плагины → Добавить новый → Загрузить плагин

    или скопируйте папку в каталог:

    wp-content/plugins/
  4. Активируйте плагин Hosteria Modal Gallery.
  5. Настройте параметры плагина в панели управления:

    Консоль → Hosteria Modal Gallery

⚙️ Требования

  • WordPress 6.0 или новее
  • PHP 7.4 или новее

Лицензия

Плагин распространяется по лицензии GPL v2 или более поздней версии.

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