WordPress капча: мой опыт использования

Автор: | 05.11.2017

wordpress-kapchaВсем привет! :-)

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

Сейчас вы, наверное, удивитесь, но всё это было вступление к сегодняшней статье :-)

Изначально я планировал написать именно об установке капчи для WordPress и поделиться своим скромным опытом, приобретённым в процессе трёх переустановок различных решений. Но при продумывании темы пришёл к выводу, что информации, которой я хочу с вами поделиться, слишком много.

В результате появились предыдущие 4 статьи. Вот так иногда бывает :-)

Статья не будет посвящена обзору всех существующих плагинов капчи, которые можно найти на просторах Интернета по запросу «WordPress капча». Вместо этого я поделюсь с вами отзывами лишь о тех решениях, с которыми я сталкивался на практике лично, и у меня была возможность самостоятельно оценить их плюсы и минусы.

О чём речь пойдёт в статье, думаю, вам понятно. Следовательно, она будет полезна всем, кто заботится о безопасности WordPress сайтов: как разработчикам, так и владельцам ресурсов, кто хочет установить капчу для WordPress самостоятельно.

Напомню, что CAPTCHA не только ограждает ваш сайт от спама, но и позволяет защитить его от других видов автоматизированных атак с помощью ботов, направленных на потерю контроля над ресурсом.

Так что установка капчи на WordPress сайт — обязательная и первостепенная мера, для произведения которой нужно от силы минут 10: 5 на чтение данной статьи, 3 на выбор нужного решения и 2 на его установку :-)

Не буду тянуть кота за хвост и переходим непосредственно к тому, какие реализации капчи испробовал я на своём опыте, от каких отказался и к чему пришёл в итоге.

Летс гоу :-)

Зачем мне понадобилась WP капча

Впервые об установке капчи я задумался незадолго после запуска данного ресурса, когда меня стали атаковать регистрациями фейковых пользователей.

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

Последний фактор, кстати, может привести к прекращению работы сайта из-за превышения серверных ресурсов хостинг-провайдера.

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

В результате тогда я решил ограничиться закрытием регистрации пользователей на ресурсе вообще.

Во второй раз о необходимости установки WordPress CAPTCHA я задумался, когда меня стали заваливать спамом в комментариях. Полностью закрывать комментарии для всех пользователей выглядит совсем дико и попахивает тоталитарным режимом :-) Поэтому я решил искать альтернативы.

Первой стала установка стороннего модуля комментариев с помощью виджета ВКонтакте. Думаю, многие видели его на сайтах и ту чушь, которая подчас там содержится.

Всё из-за того, что, в отличие от стандартных комментариев WordPress, при установке сторонних виджетов нет никакой возможности модерирования: что клиент написал, то на твоём сайте и появится.

Такое положение дел меня тоже не устраивало, поэтому я и решил вернуться к использованию механизма WordPress для добавления комментариев, защитив его от спамеров с помощью CAPTCHA, как самого простого и эффективного средства в данной ситуации.

Однако, если с простотой использования мало кто поспорит благодаря массе готовых плагинов WordPress капчи, то с эффективностью, как показала практика, имеются проблемы, о которых я далее и поведаю.

Установка графической капчи для WordPress

Именно к старой доброй графической капче, для прохождения которой нужно ввести символы с картинки, я решил обратиться в первую очередь. Данное решение в различных вариациях видели, наверное, все.

Я тоже не раз с ней сталкивался, поэтому и решил не отдаляться от коллектива и установить её себе на сайт. Заморачиваться тогда с изучением принципов её работы и реализацией с нуля я не захотел, поэтому решил обойтись установкой готового плагина.

Мой выбор пал на WordPress Captcha Code, который можно скачать в официальном каталоге плагинов ВордПресс по следующему адресу — https://wordpress.org/plugins/captcha-code-authentication/

Я обратил своё внимание на данное решение, т.к. оно было максимально простым и имело по-минимуму разнообразных настроек.

nastrojki-plagina-graficheskoj-kapchi-dlya-wordpress

Как видите, среди них только выбор типа символов (буквы и/или числа), их количество, место размещения на сайте и возможность отображения её зарегистрированным пользователям или нет. Как говорится, ничего лишнего :-)

Выглядит данная графическая WordPress капча на сайте следующим образом:

graficheckaya-wordpress-captcha-v-forme-kommentariev

Однако, как выяснилось позже, лаконичность настроек — это как плюс, так и минус, т.к. маленькие баги в вёрстке самого элемента капчи в HTML форм сайта пришлось править вручную. Например, красную звёздочку обязательности ввода значения поля WP CAPTCHA пришлось руками перемещать на одну строку с надписью «Код безопасности» в коде плагина.

Но, самый главный минус данного решения проявился немного позже.

Спустя всего неделю после установки WordPress CAPTCHA Code на свой сайт я обнаружил, что данный плагин не справляется со своими задачами. Поток спама, правда, превратился в ручеёк, но он всё же был.

Видимо, за время, пока ресурс не был защищён с помощью капчи от спама, он уже успел попасть в базы спам ботов, которые продолжали его атаковать и после установки WordPress CAPTCHA. Но в этом был и положительный момент, т.к. данный факт показал несостоятельность плагина WordPress CAPTCHA Code в борьбе со спамом.

Как известно, программисты — народ ленивый :-) И поэтому я уже был готов оставить всё как есть.

В принципе, сократившееся количество спама меня тоже устраивало, а на поиски нового плагина нужно было бы тратить своё драгоценное время, и то ещё не факт, что новый справлялся бы лучше старого. Однако, меня всё-таки заставило отказаться от WordPress CAPTCHA Code одно жирное «НО».

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

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

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

Поначалу моя реакция на это явление была предсказуема :-)

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

Но, в один прекрасный день, о данном баге мне написал один из пользователей. И вот в этот момент у меня внутри что-то ёкнуло… Мне стало настолько неудобно, что я решил всё-таки положить край творящемуся беспределу.

Вот такой эффект имеет самый банальный комментарий, которые многие из вас ленятся писать. Поэтому если вы вдруг заметите какую-то вещь на сайте или в статье, которая вам не нравится (или нравится), то обязательно пишите об этом в комментариях. Этим вы сделаете данный ресурс и его статьи лучше не только для вас, но и для других пользователей.

И это, кстати, касается не только моего сайта, но и других. Уверен, что их владельцам это также будет приятно и необходимо.

Так что, пожалуйста, не будьте равнодушными! Иногда ваши 2-3 слова становятся мощнейшим катализатором, помогающим принимать порой судьбоносные решения, на которые вебмастера не могут решиться самостоятельно годами. Задумайтесь над этим, пожалуйста.

Итак, я прервался на том, что решил поменять плагин ВордПресс капчи. Оставалось только выбрать подходящий.

Установка плагина WordPress reCAPTCHA от Google

При выборе новой WP капчи я снова принялся изучать все существующие на сегодняшний день разновидности. Помню, как в процессе поисков я на одном из форумов наткнулся на тему, в которой народ обсуждал аналогичную проблему — некорректную работу «классических» графических капчей для ВордПресс, генерирующих задания на сервере.

Оказалось, что описанные выше проблемы наблюдались не только у меня. Да и ничего удивительного в этом нет. Поскольку большинство плагинов кэширования WordPress работают на основании серверного кэширования, то часто используемые запросы к БД и прочая часто вызываемая информация сохраняется на сервере для дальнейшего быстрого вызова.

В случае же с плагинами WordPress кэширования, как выяснилось, сохраняются даже html блоки страниц статей, сайдбара и  т.д. для быстрой выдачи данных браузеру, из-за чего и происходит неверная работа капчи.

В итоге, на том же форуме я нашёл и решение всех бед.

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

Примером такой капчи является популярная Google reCAPTCHA v2, которая называется noCAPTCHA. Самым известным плагином, работающим на её базе, является Google Captcha (reCAPTCHA) by BestWebSoft, которым я и решил воспользоваться для ускоренной интеграции WP капчи на сайт, не вдаваясь в подробности её работы.

Сразу скажу, что поначалу плагин меня порадовал своей полнотой настроек, которые при этом понятны и не избыточны. Кроме того, возле каждого пункта настроек WP капчи есть комментарии по поводу его назначения и скриншоты форм сайта, на которые плагин может быть добавлен:

recaptcha-google-wordpress-nastrojki-plagina

Поскольку плагин работает на базе Google API, то для использования WordPress Google reCAPTCHA необходимо создать ключ API по ссылке, которая есть на странице настроек плагина.

Помимо того, что вы видите на картинке выше, есть ещё следующие возможности:

  1. выбор группы пользователей (Администраторы, Редакторы, Авторы и т.д.), для которых капча не будет отображаться;
  2. возможность составления «белого списка» IP адресов, при заходе с которых пользователи смогут совершать действие без ввода капчи;
  3. изменения текста сообщения для посетителей из «белого списка»;
  4. выбор цветовой темы оформления (есть светлая и тёмная);
  5. возможность установки Google reCAPTCHA v1, которая, если кто-то ещё помнит, была обычной графической капчей;
  6. задание собственных стилей оформления с помощью CSS и пользовательского PHP кода.

Устанавливать Google капчу с помощью данного плагина можно, как вы видите, на стандартные формы WordPress, перечисленные в настройках. Также можно установить её и в другие места сайта, в том числе и интегрировать её в другие плагины (например, в Contact Form 7, которую очень любят использовать для форма обратной связи).

Но в последнем случае вам нужно будет разбираться в коде или приобрести Premium версию плагина Google Captcha (reCAPTCHA) by BestWebSoft, в которой есть возможность интеграции в различные плагины путём проставления галочки на странице настроек.

В итоге, на моём сайте в форме комментариев WordPress reCAPTCHA, сгенерированная данным плагином, выглядела следующим образом:

wordpress-google-captcha-v-forme-kommentariev

Что я в итоге могу сказать про данный плагин? В дизайн сайта WordPress Google CAPTCHA noCAPTCHA вписалась идеально. А, самое главное, что со своими функциями — защитой WordPress от спама — данный плагин справлялся идеально.

После его установки прекратился даже тот ручеёк, который оставался после графической капчи от WordPress CAPTCHA Code. Ну и, что немаловажно, Google Captcha (reCAPTCHA) by BestWebSoft решил проблему, создаваемую предыдущим плагином.

Благодаря тому, что Google reCAPTCHA noCAPTCHA — это JavaScript AJAX капча, то серверное кэширование никак не влияло на её работу, позволяя пользователям проходить её каждый раз, как они это пожелают сделать, а не только в тех случаях, когда сгенерированная картинка отображалась на экране.

Ну, и при вводе WordPress рекапчи от пользователей требуется меньше телодвижений и сил по сравнению с вводом символов с картинки, которые не всегда могут генерироваться корректно. Хотя, это, конечно, не преимущества отдельно данного плагина а всей технологии Google noCAPTCHA в целом.

Резюмируя всё вышесказанное, мой отзыв о Google Captcha (reCAPTCHA) by BestWebSoft положительный. Но, несмотря на это, я всё же отказался от данного варианта капчи на своём блоге. Почему — читайте далее.

Установка WordPress reCAPTCHA без плагина

На самом деле, всему виной девушки :-) А в сложившейся ситуации — моя вторая половинка, которая является создателем и автором проекта 50 килограммов счастья, к разработке и поддержке которого я имею непосредственное отношение.

Ну, и, естественно, на данном сайте присутствуют практически все фишки, наработки и плагины, которые я протестировал при создании своего собственного. В том числе, на нём капча до недавнего времени была реализована с помощью Google Captcha (reCAPTCHA) by BestWebSoft.

Но, ввиду особенностей вёрстки шаблона её сайта у неё в форме комментариев на мобильных устройствах WordPress Google CAPTCHA noCAPTCHA, установленная с помощью вышеописанного плагина, стала вылезать за пределы экрана, мешая реальным пользователям её проходить.

Вёрстку менять было нельзя (девушки — народ капризный :-) ), поэтому было принято решение изменить вид самой Google reCAPTCHA.

Сам Google предоставляет два вида reCAPTCHA noCAPTCHA — стандартный, который вы видели выше, и компактный, который предназначен как раз-таки для мобильных устройств. В данном случае Google капча будет выглядеть следующим образом:

wordpress-recaptcha-kompaktnyj-vid

Реализуется это прописыванием одного-единственного параметра в клиентском HTML коде noCAPTCHA, добавляемом на сайт. Но, к сожалению, в Google Captcha (reCAPTCHA) by BestWebSoft данная опция доступна только в премиум версии плагина.

Платить за это маленькое новшество я, естественно, не захотел, поэтому сперва решил дополнить плагин данной фичей самостоятельно. Но, к сожалению, вставка пользовательского кода Google reCAPTCHA в HTML сайта в нём была реализована слишком запутанно, поэтому я принял решение интегрировать noCAPTCHA на сайт самостоятельно с помощью API Google.

О том, как установить Google reCAPTCHA на сайт, я уже писал в статье по ссылке. Изложенные там рекомендации универсальные, а, поскольку у WordPress есть своё API, позволяющая производить многие действия быстрее и красивее с помощью специальных функций, то я решил воспользоваться данной возможностью.

Если будете повторять за мной, то для начала создайте Google аккаунт или войдите в него, т.к. доступ к API Google сервисов происходит через него.

Итак, аккаунт вы создали, теперь самое время разместить Google reCAPTCHA на своём WordPress сайте. Напоминаю, что получить ключ reCAPTCHA и подробные инструкции по установке капчи на сайт можно получить на этой странице — https://www.google.com/recaptcha/admin.

Если путаетесь с тем, что и как на ней делать, а также вам будут непонятны какие-то из описанных далее действий, то прочитайте мою статью об установке reCAPTCHA, ссылку на которую я разместил ранее в статье.

Первое, что нам нужно, — это разместить клиентский код капчи у себя на сайте.

В моём случае WordPress reCAPTCHA располагается на форме комментариев. Её код можно было бы вставить в файл комментариев вручную, но, поскольку я решил воспользоваться API WordPress, то весь мой код будет расположен в файле темы functions.php.

Помимо единства расположения всего кода в данном подходе есть и ещё один весомый плюс. Он заключается в том, что functions.php доступен для редактирования в админке WordPress в отличие от того же файла с формой комментариев, который там скрыт.

Открываем functions.php и пишем следующий код:

function recaptcha_field($fields) {
    global $user_ID;

    if (!$user_ID || ($user_ID && !is_super_admin($user_ID))) {
        $fields['recaptcha'] = '<div class="g-recaptcha" data-size="normal" data-sitekey="ваш_ключ_recaptcha"></div>';
    }
    
    return $fields;
}

add_filter('comment_form_default_fields', 'recaptcha_field');

Как видите, для размещения HTML кода капчи на форме комментариев я решил использовать WP функцию add_filter() с хуком comment_form_default_fields.

Если вы не в курсе работы этой функции, то она нужна для добавления каких-либо пользовательских действий перед выполнением стандартных событий WordPress, которые и называются хуками.

Данный механизм, кстати, очень популярен при разработке сторонних решений и используется во многих платформах. Например, аналогом WordPress hooks являются Laravel Middleware, о которых я упоминал при знакомстве вас с этим замечательным PHP фреймворком.

В качестве входных параметров add_filter() я передал имя хука и название мое пользовательской функции, в которой будет прописан вывод WordPress reCAPTCHA на экран. В моём случае она называется recaptcha_field, вы же можете придумать что-то пооригинальнее :-)

У хука есть параметр $fields, который соответствует набору полей формы комментирования. В него же мы будем добавлять и нашу капчу в recaptcha_field(), возвращая видоизменённый набор полей.

Также, как вы могли заметить, я установил в теле функции проверку прав текущего пользователя. Если мы залогинены под учёткой главного администратора, то капча нам показываться не будет. Во всех остальных случаях (в том числе и для неавторизованных пользователей) ВордПресс reCAPTCHA будет присутствовать на форме комментариев перед полем для ввода текста.

Сохраняем изменения в functions.php и открываем любую страницу, на которой есть форма добавления комментариев (не забудьте, что нужно быть незалогиненным на сайте).

Если капча не появилась, то не забудьте почистить кэш браузера и проверьте, не забыли ли вы подключить Google reCAPTCHA API на своём сайте. Делается это путём размещения следующей строки перед закрывающимся тэгом или :

<script src='https://www.google.com/recaptcha/api.js'></script>

Если всё сделали верно, а капчи всё так же нет — пишите в комментариях по статьёй, разберёмся вместе 😉

Кстати, если вы хотите установить WordPress reCAPTCHA на другие стандартные формы WordPress (авторизации, восстановления пароля и т.д.), то можно воспользоваться той же WordPress функцией add_filter с другими значениями хуков. Полный их список вы можете найти здесь — https://developer.wordpress.org/reference/hooks/

Если же вам нужно интегрировать WP рекапчу на формы, создаваемые другими плагинами (тот же Contact Form 7), то для этих целей лучше воспользоваться не хуками (если у плагина не будет, конечно, собственного пользовательского хука), а шорткодами.

Для этого достаточно прописать свой шорткод с помощью add_shortcode(). Если это — ваш вариант, то удалите описанный выше код из functions.php и вставьте вместо него следующий:

function recaptcha_html($atts, $content)
{
    global $user_ID;

    if (!$user_ID || ($user_ID && !is_super_admin($user_ID))) {
        $content .= '<div class="g-recaptcha" data-size="normal" data-sitekey="ваш_ключ_recaptcha"></div>';
    }
    
    return $content;
}

add_shortcode('recaptcha_field' , 'recaptcha_html');

Принцип работы данного кода, как видите, такой же, только оформлен он в виде шорткода [recaptcha_field], с помощью которого WordPress reCAPTCHA можно использовать внутри любого текста. Для демонстрации можете разместить его на какой-то текстовой странице и полюбоваться результатами :-)

Итак, код WP капчи в HTML сайта мы добавили. Теперь осталось прописать код проверки правильности её ввода. Для этого у Google так же есть рекомендации, с учётом которых получился следующий код, который также нужно разместить в functions.php после прописанного ранее:

function verify_recaptcha() {
    if (isset($_POST['g-recaptcha-response'])) {
        $captcha_response = $_POST['g-recaptcha-response'];
    } else {
        return false;
    }
    
    $response = wp_remote_post(
            'https://www.google.com/recaptcha/api/siteverify', array(
        'body' => array(
            'secret' => 'ваш_ключ_recaptcha',
            'response' => $captcha_response,
            'remoteip' => $_SERVER['REMOTE_ADDR']
        )
            )
    );
    
    $success = false;

    if ($response && is_array($response)) {
        $decoded_response = json_decode($response['body']);
        $success = $decoded_response->success;
    }
    
    return $success;
}

add_action('preprocess_comment', "precomment_function");

function precomment_function($commentdata) {
    global $user_ID;
    
    if ($user_ID && is_super_admin($user_ID)) {
        return $commentdata;
    }
    if (!verify_recaptcha()) {
        echo '<html>
<head>
<meta charset="UTF-8"><link rel="stylesheet" href="' . get_template_directory_uri() . '/recaptcha_error.css" type="text/css" >
</head>
<body>
<div>
Вы не прошли защиту от спама Google reCAPTCHA. Вернитесь на <a href="#" onclick="history.go(-1);">предыдущую страницу</a> и повторите попытку.
</div>
</body>
</html>';
        exit;
    }

    return $commentdata;
}

Снова немного комментариев, чтобы вы знали где что и как править при необходимости.

Смысл изложенного выше кода заключается в том, что мы снова вмешиваемся в процессы WordPress. На этот раз вносим коррективы в добавление нового комментария в БД с помощью add_action(), который имеет такой же смысл и параметры, как и add_filter(), только предназначен для действий, а не для обработки данных.

В качестве хука мы используем preprocess_comment, а функция для описания самого действия носит название precomment_function.

В её теле сперва происходит такая же проверка, как и при отображении нашей WP капчи в HTML, т.е. проверять ввод CAPTCHA мы будем только для тех пользователей, которым она показалась.

Ну, а дальше происходит сама проверка правильности ввода с помощью функции verify_recaptcha(), содержимое которой точь-в-точь, как в статье об установке reCAPTCHA на сайт, о которой я уже упоминал ранее и оставлял на неё ссылку.

Единственное, что я решил модернизировать, так это сама отправка POST запроса на сервер Google, которую я решил реализовать с помощью WordPress функции wp_remote_post(), а не PHP curl_exec() с указанием кучи заголовков.

Если проверка прошла успешно, то мы добавляем комментарий пользователя в БД сайта. Если же нет, то выводим на экран сообщение с просьбой вернуться на предыдущую страницу и ввести капчу правильно. HTML код сообщения прописываем здесь же.

Ну, а CSS стили оформления сообщения я вынес в отдельный файл, который назвал recaptcha_error.css и разместил в директории моей текущей темы на сервере, для чего при вызове файла использовал get_template_directory_uri(). Вы можете разместить его в любом другом удобном для вас месте, не забудьте только url поменять.

Сообщение я решил оформить в стиле экрана авторизации WordPress, для чего использовал следующие стили:

body {
    background:#f1f1f1;
    min-width:0;
    font-family:"Open Sans",sans-serif;
    line-height:1.5;
}
body div {
    width:350px;
    padding:24px 26px;
    margin:40px auto;
    color:#777;
    font-size:14px;
    background:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,.13);
}
@media screen and (max-width: 400px) { 
    body div {
        width:300px;
        font-size:12px
    }
}

Ну вот и всё. Капча для WordPress готова. Осталось только протестировать :-)

Если капчу не ввести или как-то умудриться сделать это неверно, то на экране мы увидим следующее сообщение:

oshibka-prokhozhdeniya-kapchi-dlya-wordpress

Если же всё прошло успешно, то комментарий появится в админке сайта:

kommentarij-dobavlennyj-posle-vvoda-wordpress-google-captcha

И на этой позитивной ноте я уже было хотел попрощаться с вами, но неожиданно вспомнил то, из-за чего весь этот сыр-бор с самописной WordPress капчей вообще затеялся. А именно, из-за того, что я не не знал как сделать компактную Goggle reCAPTCHA на WordPress.

Так вот. Для того, чтобы придать ей мобильный вид необходимо в HTML коде капчи изменить значение параметра data-size с normal на compact. Ну, а поскольку изначально проблемы с размером ВордПресс reCAPTCHA у моей девушки на сайте наблюдались только в мобильной версии, то я видоизменил строку добавления капчи на форму комментариев следующим образом:

$fields['recaptcha'] = '<div class="g-recaptcha" data-size=' . (wp_is_mobile() ? "compact" : "normal") . ' data-sitekey="ваш_ключ_recaptcha"></div>';

После того, как я решил проблему на другом сайте, подумал о том, почему бы мне и на свой не установить подобное. Таких прямо огромных проблем, как у моей девушки, у меня не наблюдалось (смотрите на картинку ниже), поэтому я решил не устанавливать компактную версию reCAPTCHA, а ограничиться пропорциональным уменьшением стандартного варианта средствами CSS.

vordpress-kapcha-v-kommentariyakh-na-mobilnykh-ustrojstvakh

Для этого мне нужно было узнать какой-то идентификатор капчи (класс или id), который присваивался HTML элементу самим Google. Таковым оказался класс .g-recaptcha, которому я и задал необходимые стили. А, поскольку проблема с размером WordPress reCAPTCHA у меня наблюдалась только на экранах мобильных устройств шириной менее 420px, то итоговый CSS код, добавленный в style.css моей темы вышел таким:

@media screen and (max-width:420px) {
    .g-recaptcha {
        transform:scale(0.96);
        -webkit-transform:scale(0.96);
        transform-origin:0 0;
        -webkit-transform-origin:0 0;
    }
}

Кстати, можете использовать данный идентификатор для того, чтобы всячески манипулировать вёрсткой вашей капчи. Полностью её изменить вряд ли удастся, но с отступами от соседних элементов проблем точно не будет.

В итоге, на моём сайте на мобильных устройствах капча приняла следующий итоговый вид, который меня полностью устроил:

kapcha-v-kommentariyakh-wordpress-itogovyj-variant

На этом наша самостоятельная установка reCAPTCHA на WordPress сайт без плагина закончена.

И на данный момент последний описанный вариант реализации WordPress CAPTCHA является текущим для данного сайта, на котором я решил остановиться.

Понимаю, что он неидеален, т.к. требует от пользователей много телодвижений и, порой, специальных знаний, при установке на сайт, но зато гибкий и позволяет производить с капчей различные преобразования с помощью параметров, описанных в официальной документации Google reCAPTCHA — https://developers.google.com/recaptcha/docs/display#config

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

И жду от вас лайков и репостов в соцсетях, если сегодняшняя статья не оставила вас равнодушными.

На этом у меня всё. До новых встреч! :-)

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
5 голосов, в среднем: 5 из 5

4 комментария к статье "WordPress капча: мой опыт использования"

  1. Кирилл

    Добрый день.
    Спасибо за статью. Хотелось узнать в моем варианте необходимо использовать капчу в самодельной html форме, а не в форме комментариев. Я добавил, как описано у вас, через short code. Однако как организовать проверку в таком случае?

    Спасибо

    1. Pashaster Автор

      Здравствуйте! В вашем случае нужно прописать проверку правильности ввода капчи в обработчике формы перед выполнением самого действия, выполняемого при подтверждении формы. Обработчик — это скрипт или функция, которая прописана в JavaScript в submit() событии формы (если у вас AJAX-форма) или PHP скрипт, указанный в атрибуте action или onsubmit HTML формы.

  2. Александр

    Спасибо, полезно, сработало, только на десктопе по-русски написано «Я не робот», а на мобильнике на английском.

    1. Pashaster Автор

      Спасибо за отзыв :-) А какой язык браузера на мобильном? И сам язык системы (iOS, Android) какой установлен? Думаю, в этом проблема.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *