• iborra
    borde slide
    DESCUBRE A TRAVÉS DE
    borde slide
    NUESTRO BLOG
    Artículos de interés sobre diseño web

Cómo instalar google reCAPTCHA en Wordpress y hacerlo responsive

recaptcha-wordpress

Recaptcha o reCAPTCHA es una extensión de la prueba Captcha que se utiliza para reconocer texto presente en imágenes. Emplea por tanto la prueba desafío-respuesta utilizada en computación para determinar cuándo el usuario es o no humano para, a su vez, mejorar la digitalización de textos.

reCAPTCHA se basa en el hecho de que para un ser humano puede ser simple determinar el texto presente en una imagen cuando para una máquina esta tarea resulta en ocasiones demasiado compleja. El lema de reCAPTCHA es "Stop spam, read books" (deten el spam!, lee libros).

A continuación vamos a explicar la forma de insertar la versión 2 de Recaptcha en nuestro sitio de Wordpress y que se adapte a todos los dispositivos, ya que por defecto no es responsive.

Lo primero será descargar el plugin Google Captcha (reCAPTCHA) e instalarlo en nuestro sitio de Wordpress.

Una vez instalado el plugin lo activamos y accedemos a los ajustes. Lo primero que nos pide es autentificarnos mediante el Site Key (Clave del sitio) y la Secret Key (Clave secreta). Para conseguir esas claves debemos registrarnos primero en la web oficial de Google reCAPTCHA.

Donde dice Registrar un nuevo sitio rellenamos los datos que nos piden: en Etiqueta ponemos el nombre de nuestro sitio web donde vayamos a insertar el reCAPTCHA, luego elegimos la casilla de reCAPTCHA V2, en el apartado Dominios la url de nuestro sitio web, aceptamos los términos y por último le damos a Registro.

En el siguiente panel nos aparecerá la Clave del sitio y la Clave secreta más la información para insertar reCAPTCHA en nuestra página web de Wordpress.

Volvemos a los ajustes del plugin en el panel de administración de Wordpress y ponemos las claves que hemos obtenido anteriormente. Luego le damos al botón de abajo que dice Test Keys para verificarlas, rellenamos el resto de opciones y le damos a Guardar Cambios. En las opciones ponerlo a vuestro gusto donde dice Enable reCAPTCHA for y Hide reCAPTCHA in Comments form for. En Whitelist notification podéis poner por ejemplo "Eres humano!", en reCAPTCHA version elegir la versión 2 y en reCAPTCHA theme elegir el color de fondo, sólo se puede entre light y dark, esperemos que para futuras actualizaciones den más opciones aquí porque no se puede editar esta parte del CSS luego. Si os gusta más la otra versión del reCAPTCHA también es muy válida de ser utilizada.

Para insertar reCAPTCHA en un formulario de nuestro sitio web primero debemos acceder al archivo header.php de nuestro tema Child y pegar el siguiento código antes de la etiqueta de cierre </head>.

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

Luego en nuestro formulario (dentro del plugin), en el lugar donde queramos poner el reCAPTCHA, debemos pegar el siguiente shortcode. Lo podemos poner en varios formularios de nuestro sitio web.

[bws_google_captcha]

También debemos poner la clase g-recaptcha. Si utilizamos, por ejemplo, un formulario con el plugin Caldera Forms, podemos poner la clase y el shortcode como muestro en la siguiente imagen. Si por ejemplo utilizáis un formulario con el plugin Contact Form 7 envolver el shortcode con un div con la clase g-recaptcha.

Como hemos dicho anteriormente, reCAPTCHA no es responsive, si lo vemos en dispositivos móviles (smartphones) veremos que no se adapta al tamaño de la pantalla. Para conseguir que se vea de forma correcta debemos pegar el siguiente código dentro de nuestro archivo style.css de nuestro tema Child. Cambiar los siguientes datos para adaptar reCAPTCHA a la resolución deseada.

@media (max-width: 433px) {
#rc-imageselect, .g-recaptcha {transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;}
}

Si no utilizáis el CMS de Wordpress, para implementar reCAPTCHA en nuestro sitio web HTML, primero deberemos registrarnos, luego poner el script antes de la etiqueta de cierre </head> en la página donde se vaya a poner el reCAPTCHA, a continuación en vez de utilizar un shortcode deberemos pegar el siguiente código que muestro en el lugar donde queramos mostrar el reCAPTCHA y por último poner el código anterior en style.css para que sea responsive.

<div class="g-recaptcha" data-sitekey="PONER CLAVE DEL SITIO"></div>

Aquí podéis ver un ejemplo con el resultado final:

A continuación podéis ver el vídeo oficial promocional de Google reCAPTCHA v2.

Espero que os sea útil este tutorial y podáis poner reCAPTCHA sin ningún problema. Cualquier duda sois libres de poder comentar.

Comenta y comparte este post!

¿Tienes alguna sugerencia, idea, consejo, duda, pregunta, agradecimiento, encuentras algún error o este post no está actualizado? Entonces esperamos tu comentario.

También puedes recomendar y compartir este post. Estamos muy agradecidos por tu apoyo!

Comentarios (0)

No hay Comentarios todavía en este post. Podrías ser el primero!

Deja un comentario

Este blog se nutre de los comentarios de los visitantes! Así que vamos, únete a nosotros!

Por favor esperamos que entiendas que se eliminarán aquellos comentarios que no tengan nada que ver con el contenido de este post o siempre que se utilicen palabras ofensivas.

COMENTARIO PARA ESTE POST

Imagen mínimo: 300x300 - Formato: jpg o png - Tamaño máximo: 10Mb

CAPTCHA code