Ocultar el ícono de reCAPTCHA v3 en WordPress

En este artículo, te mostraremos cómo ocultar la banda o distintivo de Google reCAPTCHA v3 en las páginas o secciones de tu sitio WordPress donde no hay formularios. La implementación de reCAPTCHA es esencial para proteger tus formularios del spam, pero su presencia en páginas sin formularios puede resultar innecesaria y afectar el diseño de tu sitio.

La Importancia de reCAPTCHA

Todos sabemos lo crucial que es utilizar un CAPTCHA en los formularios para evitar la recepción de mensajes de spam molestos. Muchos usuarios optan por el reCAPTCHA v3 de Google debido a su calidad, gratuidad y facilidad de implementación. Por ejemplo, plugins populares como Contact Form 7 integran reCAPTCHA de forma predeterminada a partir de la versión 5.1.x, reemplazando la versión anterior que mostraba la casilla de «No soy un robot».

Sin embargo, la versión v3, que se considera «invisible», no muestra un CAPTCHA visible en el formulario, pero añade un distintivo en la esquina inferior derecha. Esto puede resultar ilógico en páginas donde no hay formularios, ya que puede estropear el diseño y entorpecer la navegación, especialmente si ya hay otros elementos en esa área.

Métodos para Ocultar el Ícono de reCAPTCHA

A continuación, te explicaremos dos métodos efectivos para quitar el distintivo de reCAPTCHA en las secciones que desees o en todas menos en las que se incluya un formulario de contacto.

MÉTODO 1: Ocultar la Insignia de reCAPTCHA con CSS

El primer método consiste en agregar CSS personalizado para ocultar la banda de reCAPTCHA. La mayoría de los temas de WordPress permiten incluir CSS personalizado fácilmente.

1. Accede a tu Panel de WordPress:

• Dirígete a Apariencia > Personalizar.

Agregar CSS Adicional:

•     Busca la opción CSS adicional y agrega el siguiente código:
• Hacer Visible en Páginas con Formularios:
  • Si deseas que la insignia sea visible en páginas específicas que contienen formularios, primero necesitas conocer el ID de esas páginas. Puedes encontrar el ID en la barra de direcciones al editar la página en el panel de administración.
  • Una vez que tengas el ID (por ejemplo, 3411), añade el siguiente código:
  css

  .page-id-3411 .grecaptcha-badge {
visibility: visible !important;
}

  • Si necesitas incluir varias páginas, puedes hacerlo así:
  css

  .page-id-3411 .grecaptcha-badge, .page-id-1000 .grecaptcha-badge {
visibility: visible !important;
}


Nota Importante: Evita usar display: none, ya que puede interferir con la funcionalidad del reCAPTCHA. Utiliza visibility: hidden para ocultar el ícono sin afectar su funcionamiento.

MÉTODO 2: Añadir Código PHP al Archivo functions.php

Este método es un poco más complejo pero mejora el rendimiento y la velocidad de carga de tu web, ya que solo carga las librerías del formulario de contacto y el script de Google reCAPTCHA en las páginas que realmente lo utilizan.

1. Accede al archivo functions.php:
   • Es recomendable hacerlo desde un tema hijo (child theme) para evitar perder cambios en actualizaciones.
2. Agregar el Código:
   • Inserta el siguiente código en el archivo functions.php:
   php

   function desactiva_cf7_recaptcha() {
   $hayformulario = false;

   // Cambia '3411' por el ID de tu página de contacto.
   if (is_page('3411')) {
   $hayformulario = true;
   }

   // Si no hay formulario, elimina los scripts.
if (!$hayformulario) {
wp_dequeue_script('contact-form-7');
wp_dequeue_style('contact-form-7');
wp_dequeue_script('google-recaptcha');
}
}
add_action('wp_enqueue_scripts', 'desactiva_cf7_recaptcha');


3. Condición para No Afectar Entradas del Blog:
   • Si deseas que esto solo se aplique a las páginas y no a los posts, añade la siguiente condición:
   php

   function desactiva_cf7_recaptcha() {
if (get_post_type(get_the_ID()) == 'page') {
$hayformulario = false;
if (is_page('3411')) {
$hayformulario = true;
}
if (!$hayformulario) {
wp_dequeue_script('contact-form-7');
wp_dequeue_style('contact-form-7');
wp_dequeue_script('google-recaptcha');
}
}
}
add_action('wp_enqueue_scripts', 'desactiva_cf7_recaptcha');


¿Es Permisible Ocultar la Insignia de reCAPTCHA v3?

Sí, Google permite ocultar la insignia de reCAPTCHA v3 siempre que incluyas la marca de reCAPTCHA de forma visible. En su página de preguntas frecuentes, sugieren incluir este texto en el formulario:

«Este sitio está protegido por reCAPTCHA y Google» <a href=»https://policies.google.com/privacy»>Política de privacidad</a> y <a href=»https://policies.google.com/terms»>Términos de servicio</a> aplican.

Por lo tanto, podrías ocultar la insignia de todas las páginas (incluidas las que tienen formularios) siempre y cuando incluyas este texto de forma discreta pero visible.

Conclusión

Ocultar el ícono de reCAPTCHA v3 en las páginas que no contienen formularios puede ayudar a mantener un diseño limpio y una mejor experiencia de usuario. Siguiendo estos métodos, puedes gestionar de manera efectiva la visibilidad del reCAPTCHA en tu sitio WordPress sin sacrificar la seguridad de tus formularios. ¡Implementa estos cambios y mejora la presentación de tu web hoy mismo!