image-spoiler

Image Spoiler для WordPress

Плагин для WordPress, добавляющий функцию спойлера к стандартному блоку "Изображение" в редакторе Gutenberg.

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

• ✨ Размытие изображений с плавным переходом при наведении
• 🎨 Настраиваемый текст предупреждения
• 🌍 Полная локализация (русский и английский)
• 📱 Адаптивный дизайн для мобильных устройств
• ⚡ Минимальное влияние на производительность
• 🎛️ Простой интерфейс в редакторе Gutenberg

📦 Установка

1. Скопируйте папку image-spoiler в wp-content/plugins/
2. Активируйте плагин через меню "Плагины" в WordPress
3. Готово! Кнопка спойлера появится в блоке Изображение

🚀 Использование

1. Добавьте блок "Изображение" в редактор Gutenberg
2. Загрузите изображение
3. Нажмите кнопку "Спойлер" в панели инструментов блока (иконка перечеркнутого глаза)
4. (Опционально) Настройте текст предупреждения в правой панели
5. Опубликуйте страницу

На фронтенде изображение будет размыто до наведения курсора мыши.

🎨 Настройки

После активации спойлера в правой панели редактора появится секция "Настройки спойлера" с полем для ввода текста предупреждения. По умолчанию используется текст:

• 🇷🇺 "Потенциально неприемлемый контент"
• 🇬🇧 "Potentially sensitive content"

💡 Примеры использования

• Спойлеры: Скрытие изображений, содержащих спойлеры сюжета
• Медицинский контент: Предупреждение о медицинских изображениях
• Возрастной контент: Маркировка контента 18+
• Образовательные материалы: Скрытие ответов на задачи

🛠 Технические детали

Структура

image-spoiler/
├── image-spoiler.php          # Основной файл плагина
├── src/                       # Исходные файлы
│   ├── index.js              # Логика расширения блока
│   ├── style.css             # Стили фронтенда
│   └── editor.css            # Стили редактора
├── build/                     # Собранные файлы
├── languages/                 # Файлы локализации
└── README.md                  # Этот файл

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

• WordPress Gutenberg API для расширения блоков
• React для UI компонентов
• @wordpress/scripts для сборки
• CSS3 для визуальных эффектов

CSS классы

• .image-spoiler-wrapper - обертка изображения
• .image-spoiler - само изображение со спойлером
• .image-spoiler-text - текст предупреждения

🎨 Кастомизация

Вы можете настроить внешний вид, добавив CSS в вашу тему:

/* Изменить степень размытия */
.image-spoiler {
    filter: blur(30px);
}

/* Изменить фон текста */
.image-spoiler-text {
    background-color: rgba(255, 0, 0, 0.8);
}

/* Изменить скорость перехода */
.image-spoiler {
    transition: filter 0.5s ease;
}

🌍 Локализация

Плагин полностью локализован и поддерживает:

• 🇷🇺 Русский язык (ru_RU)
• 🇬🇧 Английский язык (en_US)

Язык интерфейса определяется автоматически на основе настроек WordPress.

📋 Требования

• WordPress 5.8 или выше
• PHP 7.4 или выше
• Активный редактор Gutenberg

🔧 Разработка

Для сборки плагина из исходников:

cd image-spoiler
npm install
npm run build

Для компиляции переводов:

cd languages
msgfmt -o image-spoiler-ru_RU.mo image-spoiler-ru_RU.po
msgfmt -o image-spoiler-en_US.mo image-spoiler-en_US.po

📝 Лицензия

GPL v2 or later

👨‍💻 Автор

Владимир Бычко

• Сайт: http://bychko.ru

📚 Дополнительная документация

• sol.md - Подробная инструкция по использованию
• pz.md - Техническая пояснительная записка
• release-history.json - История версий

🐛 Поддержка

При возникновении проблем или вопросов, пожалуйста, посетите сайт автора.

---

⭐ Если вам понравился плагин, оставьте отзыв!