Многие уже вероятно видели новости, что использование Google Analitics и прочих «вражеских» инструментов отслеживания пользователей находятся в серой зоне или вовсе запрещено. А в условиях когда этот трафик иногда недоступен извне или вовсе не работает для нас, решил сделать интеграцию формы Elementor Pro с Yandex SmartCaptcha.
Elementor SmartCaptcha — это WordPress плагин, который добавляет поддержку Yandex SmartCaptcha в формы Elementor Pro. Плагин предоставляет простой и эффективный способ защиты форм от спама и ботов, используя современную технологию капчи от Яндекса.
В отличие от Google reCAPTCHA, Yandex SmartCaptcha полностью соответствует российскому законодательству и не требует передачи данных на зарубежные серверы, что делает его идеальным выбором для российских сайтов.
Технические требования
- WordPress: версия 5.0 или выше
- Elementor Pro: обязательно установлен и активирован
- PHP: версия 7.4 или выше
- Yandex SmartCaptcha: зарегистрированный аккаунт и API ключи
Ключевые особенности
1. Простая интеграция с Elementor Pro
Плагин добавляет новый тип поля «SmartCaptcha» в конструктор форм Elementor, что позволяет добавить защиту капчей буквально в несколько кликов.
2. Полная совместимость с Elementor
- Работает со всеми типами форм Elementor Pro
- Поддержка всплывающих окон (popups)
- Автоматическая реинициализация при динамической загрузке форм
- Корректная работа в режиме предварительного просмотра
3. Гибкая настройка внешнего вида
- Настраиваемый цвет фона виджета капчи
- Визуальный выбор цвета через color picker
- Адаптивный дизайн с закругленными углами
- Стилизация под дизайн вашего сайта
4. Надежная валидация
- Серверная проверка токена капчи
- Поддержка нескольких серверов валидации Яндекса
- Передача IP-адреса пользователя для дополнительной защиты
- Детальные сообщения об ошибках
5. Оптимизированная загрузка скриптов
- Скрипты загружаются только на страницах с формами
- Предотвращение дублирования загрузки API
- Версионирование скриптов для корректного кэширования
- Асинхронная загрузка для улучшения производительности
6. Расширенная отладка
- Подробное логирование в консоль браузера
- Серверные логи в debug.log WordPress
- Глобальная функция диагностики window.checkSmartCaptcha()
- Информативные сообщения об ошибках для администраторов
7. Многоязычность
- Поддержка локализации через WordPress
- Готовый .pot файл для переводов
- Все строки подготовлены для перевода
8. Безопасность
- Проверка наличия Elementor Pro перед активацией
- Санитизация всех входящих данных
- Защита от прямого доступа к файлам плагина
- Безопасное хранение API ключей
Установка и подключение плагина Elementor SmartCaptcha
Шаг 1: Загрузка плагина
- Скачайте архив плагина
- Установите zip-архив как обычный плагин или распакуйте папку elementor-smartcaptcha в директорию /wp-content/plugins/
- Активируйте плагин
Важно: Если Elementor Pro не установлен, вы увидите предупреждение об ошибке. Установите Elementor Pro перед активацией плагина.
Шаг 2: Получение API ключей
- Перейдите на сайт Yandex SmartCaptcha
- Войдите в свой аккаунт Яндекс или зарегистрируйтесь
- Создайте новую капчу:
- Укажите название (например, «Мой сайт»)
- Добавьте домены, на которых будет использоваться капча
- Выберите тип капчи (рекомендуется «Обычная»)
- После создания скопируйте:
- Site Key (клиентский ключ)
- Secret Key (серверный ключ)
Шаг 3: Настройка плагина
- В админ-панели WordPress перейдите в «Настройки» → «Elementor SmartCaptcha»
- Вставьте Site Key в соответствующее поле
- Вставьте Secret Key в соответствующее поле
- (Опционально) Настройте цвет фона капчи:
- Используйте color picker для визуального выбора
- Или введите HEX-код цвета вручную (например, #313036)
- Нажмите «Сохранить изменения»
Использование плагина
Добавление капчи в форму
- Откройте страницу или шаблон в редакторе Elementor
- Найдите виджет формы (Form) или создайте новую форму
- В настройках формы перейдите на вкладку «Поля»
- Нажмите «Добавить поле»
- В выпадающем списке «Тип» выберите «SmartCaptcha»
- Настройте позицию поля (обычно размещается перед кнопкой отправки)
- Сохраните и опубликуйте страницу
Настройка внешнего вида
Плагин автоматически применяет стили к виджету капчи:
- Закругленные углы (border-radius: 6px)
- Настраиваемый цвет фона
- Адаптивное позиционирование
- Тень для визуального выделения
Для дополнительной кастомизации вы можете добавить собственные CSS-стили:
.elementor-smartcaptcha .smart-captcha {
margin: 20px 0; /* Ваши стили */
}
Работа с несколькими формами
Плагин поддерживает несколько форм на одной странице. Каждая капча инициализируется независимо и имеет свой уникальный токен.
Использование во всплывающих окнах
Плагин автоматически реинициализирует капчу при открытии popup-окон Elementor. Никаких дополнительных настроек не требуется.
Отладка и устранение неполадок
Капча не отображается
Возможные причины:
- Не введены или неверные API ключи
- Домен не добавлен в настройки капчи в Yandex Cloud
- Блокировка скриптов браузером или плагином безопасности
Решение:
- Проверьте правильность введенных ключей в настройках плагина
- Убедитесь, что домен сайта добавлен в список разрешенных в Yandex Cloud
- Откройте консоль браузера (F12) и проверьте наличие ошибок JavaScript
- Временно отключите плагины безопасности и кэширования
Форма не отправляется
Возможные причины:
- Токен капчи не передается в форме
- Ошибка валидации на сервере
- Конфликт с другими плагинами
Решение:
- Включите отладку WordPress:define(’WP_DEBUG’, true); define(’WP_DEBUG_LOG’, true);
- Проверьте файл /wp-content/debug.log на наличие ошибок
- В консоли браузера выполните: window.checkSmartCaptcha();
- Проверьте, что токен присутствует в форме: console.log(document.querySelector(’input[name=»smart-token»]’));
Диагностическая функция
Плагин предоставляет глобальную функцию для диагностики:
window.checkSmartCaptcha();Эта функция выведет в консоль:
- Статус загрузки SmartCaptcha API
- Количество найденных контейнеров капчи
- Количество форм Elementor на странице
- Наличие и значения токенов
Проверка серверной валидации
Если капча отображается, но форма не проходит валидацию:
- Проверьте логи WordPress (
/wp-content/debug.log) - Убедитесь, что сервер может подключиться к API Яндекса
- Проверьте, что Secret Key введен правильно
- Убедитесь, что IP-адрес сервера не заблокирован
Безопасность и производительность
Безопасность
- Все данные санитизируются перед сохранением
- API ключи хранятся в базе данных WordPress
- Токены валидируются на сервере
- Защита от прямого доступа к файлам плагина
- Проверка прав доступа для настроек
Производительность
- Скрипты загружаются только на страницах с формами
- Использование wp_register_script для предотвращения дублирования
- Версионирование скриптов для корректного кэширования
- Минимальное количество HTTP-запросов
- Асинхронная загрузка JavaScript
Удаление плагина
При деактивации плагина:
- Очищается кэш WordPress
- API ключи остаются в базе данных
При полном удалении плагина (через файл uninstall.php):
- Удаляются все настройки из базы данных
- Очищается кэш
