WP Magnifier — Лупа для WordPress

Плагин добавляет на страницы сайта интерактивную кнопку-лупу. Пользователь нажимает на неё — курсор превращается в иконку лупы, а при наведении на любой элемент появляется круглая линза с увеличенным содержимым.

Версия: 1.0.0  |  WordPress: 5.8+  |  PHP: 7.4+  |  Лицензия: GPL-2.0

Возможности плагина

• Смена курсора — при активации стандартная стрелка заменяется кастомным SVG-курсором в форме лупы.
• Круглая линза — плавно появляется рядом с курсором, имеет глянцевый эффект, перекрестие и тень.
• Умный зум — алгоритм определяет оптимальный элемент под курсором (текст, картинка, блок) и клонирует его в линзу.
• Подсветка цели — элемент, который сейчас увеличивается, выделяется голубой обводкой.
• Горячие клавиши — управление лупой без мыши: Alt+M включает/выключает, Esc закрывает.
• Гибкие настройки — уровень увеличения, размер линзы, цвет и положение кнопки настраиваются в админ-панели.

Установка

1. В админ-панели перейдите в Плагины → Добавить новый → Загрузить плагин и выберите файл wp-magnifier.zip.
2. Нажмите Установить, затем Активировать плагин. Кнопка лупы сразу появится на сайте.
3. Перейдите в Настройки → 🔍 WP Magnifier и настройте параметры под свой сайт.
4. Откройте любую страницу — кнопка лупы отображается в выбранном углу экрана.

Настройки

Страница настроек доступна в меню Настройки → 🔍 WP Magnifier. Все параметры сохраняются стандартными средствами WordPress (wp_options).

Параметры лупы

Параметры кнопки

Прочие параметры

Совет: для текстовых сайтов и блогов рекомендуется увеличение ×2 и линза 180 px. Для галерей и портфолио попробуйте ×2.5 и линзу 220–260 px.

Горячие клавиши

Как работает Лупа для WordPress

Определение целевого элемента

При движении мыши плагин вызывает document.elementFromPoint() в точке курсора и проходит вверх по DOM-дереву, выбирая элемент с наилучшей семантикой: приоритет у тегов <p>, <h1–h6>, <img>, <a>, <li> и других контентных блоков.

Клонирование и масштабирование

Найденный элемент клонируется (cloneNode(true)) и помещается внутрь линзы. Копируются ключевые CSS-свойства: шрифт, цвета, фон, границы, object-fit для изображений. Масштабирование выполняется через transform: scale(N) — точка под курсором всегда остаётся в центре линзы.

Производительность

Все обновления выполняются внутри requestAnimationFrame — это обеспечивает плавность 60 fps без лишних перерисовок. Клон пересоздаётся только при смене целевого элемента, а не при каждом движении мыши.

Структура файлов плагина

wp-magnifier/
├── wp-magnifier.php       ← регистрация хуков, страница настроек
└── assets/
    ├── wp-magnifier.css   ← стили кнопки, линзы, курсора
    └── wp-magnifier.js    ← вся логика лупы, события, RAF

Совместимость