Cómo instalar reCAPTCHA de Google en WordPress

Google reCAPTCHA permite proteger los formularios de un sitio web frente a envíos automatizados y actividades maliciosas.

Importante: Los siguientes pasos están orientados a sitios web que utilizan un tema similar al mostrado o que han sido desarrollados mediante código personalizado. Aunque dos sitios utilicen el mismo tema, pueden existir diferencias en su configuración y estructura.

1. Acceda a WordPress Manager desde cPanel

Ingrese a cPanel y acceda a WordPress Manager.

2. Acceda a la administración de plugins

Desde WordPress Manager, podrá administrar diferentes aspectos de su sitio web, incluyendo sus temas y plugins.

3. Ingrese a la administración de plugins

Seleccione Administración de Plugins, donde podrá activar, desactivar o instalar nuevos plugins para su sitio web.

4. Añada un nuevo plugin

Seleccione Añadir Plugins (Add Plugins) para acceder al administrador de plugins.

5. Busque reCAPTCHA

En el buscador de plugins, escriba reCAPTCHA y seleccione el plugin que utilizará para integrar el servicio en su sitio web.

6. Configure reCAPTCHA de Google

Configure el servicio reCAPTCHA desde el plugin o acceda directamente al sitio oficial de Google:

Google reCAPTCHA

7. Obtenga las claves de reCAPTCHA

Una vez configurado el servicio, Google proporcionará las siguientes credenciales:

• Clave del sitio (Site Key)
• Clave secreta (Secret Key)

Estas claves serán necesarias para integrar reCAPTCHA en el formulario.

Importante: La clave secreta no debe hacerse pública ni incluirse directamente en el código HTML del sitio web.

8. Verifique el tema utilizado

Desde WordPress Manager, seleccione Administrar Theme para verificar el tema utilizado por el sitio web.

9. Identifique el tema activo

Verifique qué tema se encuentra actualmente activo en su instalación de WordPress.

10. Acceda a la administración de WordPress

Para ingresar al panel de administración de su sitio web, haga clic en Acceder o Login.

11. Acceda al personalizador del tema

Seleccione Customize Theme o Personalizar tema para realizar las modificaciones correspondientes.

12. Ubique la sección de contacto

En este ejemplo, se añadirá reCAPTCHA al formulario de contacto del sitio web.

13. Añada el código de reCAPTCHA al formulario

Añada el código correspondiente dentro de la sección del formulario de contacto:

<!-- Añadir reCAPTCHA -->
<div class="g-recaptcha" data-sitekey="TU_CLAVE_DEL_SITIO_WEB"></div>

<!-- Botón de enviar -->
<input type="submit" value="Enviar">

<!-- Incluir el script de reCAPTCHA -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Reemplace TU_CLAVE_DEL_SITIO_WEB por la clave del sitio proporcionada por Google

14. Añada la validación en functions.php

Finalmente, añada el código de validación en el archivo functions.php, ubicado en:

wp-content/themes/tu-tema/functions.php

Utilice el siguiente código:

add_action('wp_ajax_nopriv_procesar_formulario', 'procesar_formulario');
add_action('wp_ajax_procesar_formulario', 'procesar_formulario');

function procesar_formulario() {

    $secretKey = 'TU_CLAVE_SECRETA';
    $responseKey = $_POST['g-recaptcha-response'];
    $userIP = $_SERVER['REMOTE_ADDR'];

    // Validar reCAPTCHA
    $url = 'https://www.google.com/recaptcha/api/siteverify?secret='
        . $secretKey
        . '&response='
        . $responseKey
        . '&remoteip='
        . $userIP;

    $response = file_get_contents($url);
    $responseKeys = json_decode($response, true);

    if ($responseKeys["success"]) {
        // El reCAPTCHA fue exitoso.
        // Aquí puede añadir el código para procesar los datos del formulario.
    } else {
        // Error en la validación.
        // Aquí puede manejar el error o mostrar un mensaje al usuario.
    }

    wp_die();
}

Reemplace TU_CLAVE_SECRETA por la clave secreta proporcionada por Google.

Recomendación: Antes de modificar functions.php, realice una copia de seguridad del archivo. Un error de sintaxis en este archivo puede afectar el funcionamiento del sitio web.

¿Necesita ayuda adicional?

Si necesita asistencia para cargar archivos o configurar su conexión FTP, puede comunicarse con nuestro equipo de soporte.

Solicitar soporte

Hosting SSD Perú