✅ Implementar una Verificación de Edad en tu Sitio WordPress (Sin Plugins)

En la era digital, donde el acceso a la información es instantáneo y universal, garantizar la seguridad de los usuarios más jóvenes es más importante que nunca. Si administras un sitio web con contenido destinado a adultos, implementar una verificación de edad no es solo una responsabilidad ética, sino también una práctica necesaria para cumplir con las normativas legales y proteger a tu audiencia.

Más allá de la protección moral y ética, la verificación de edad cumple un rol fundamental en el cumplimiento de la ley. Muchos países tienen regulaciones estrictas que requieren que ciertos contenidos sean accesibles solo para adultos. Implementar un sistema de verificación de edad es una medida proactiva para cumplir con estas regulaciones y reducir el riesgo de sanciones legales.

Uno de los aspectos clave de este sistema es la capacidad de demostrar que has hecho un esfuerzo razonable para restringir el acceso de menores. Al implementar un aviso de verificación de edad, como el que se detalla en este artículo, se establece un registro implícito de que el usuario ha declarado ser mayor de edad. Aunque este método no verifica la edad de manera absoluta, puede servir como una prueba suficiente en un contexto legal para demostrar que el usuario ha sido informado y ha dado su consentimiento explícito.

En caso de que sea requerido por las autoridades o en situaciones legales, los propietarios del sitio pueden presentar la existencia del script de verificación y la lógica detrás de su implementación como evidencia de que se han tomado medidas para evitar el acceso de menores. Aunque no es infalible, este tipo de verificación puede fortalecer tu posición legal, demostrando que has actuado de buena fe y dentro de los límites de lo que es razonable esperar de un administrador de sitios web.

En este artículo, te muestro cómo puedes integrar de manera sencilla un sistema de verificación de edad en tu sitio web utilizando JavaScript. A través de un simple script, podrás desplegar un popup que solicitará la confirmación de mayoría de edad antes de permitir el acceso al contenido. Este enfoque no solo es efectivo, sino que también asegura una experiencia de usuario fluida y profesional, mientras te ayuda a cumplir con tus obligaciones legales.

El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.

function age_verification_popup_script() {
    ?>
    <script type="text/javascript">
    // Función para establecer una cookie
    function setCookie(name, value, days) {
        var expires = "";
        // Si se especifica la cantidad de días, calcula la fecha de expiración
        if (days) {
            var date = new Date();
            // Obtiene la fecha actual y le suma el tiempo en milisegundos correspondiente a los días
            date.setTime(date.getTime() + (days*24*60*60*1000));
            // Convierte la fecha de expiración a formato UTC
            expires = "; expires=" + date.toUTCString();
        }
        // Establece la cookie con el nombre, valor y fecha de expiración
        document.cookie = name + "=" + (value || "")  + expires + "; path=/";
    }

    // Función para obtener el valor de una cookie por su nombre
    function getCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        // Recorre todas las cookies almacenadas
        for(var i=0;i < ca.length;i++) {
            var c = ca[i];
            // Elimina los espacios al inicio de la cookie
            while (c.charAt(0)==' ') c = c.substring(1,c.length);
            // Si la cookie encontrada coincide con el nombre buscado, devuelve su valor
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        // Si no se encuentra la cookie, devuelve null
        return null;
    }

    // Evento que se ejecuta cuando el DOM ha terminado de cargarse
    document.addEventListener('DOMContentLoaded', function() {
        // Verifica si el usuario ya ha aceptado ser mayor de 18 años comprobando la existencia de la cookie 'isAdult'
        if (!getCookie('isAdult')) {
            // Si no existe la cookie, crea el popup
            let popup = document.createElement('div');
            popup.style.position = 'fixed';
            popup.style.top = '0';
            popup.style.left = '0';
            popup.style.width = '100%';
            popup.style.height = '100%';
            popup.style.backgroundColor = 'rgba(2, 2, 2, 0.9)';
            popup.style.color = '#fff';
            popup.style.display = 'flex';
            popup.style.justifyContent = 'center';
            popup.style.alignItems = 'center';
            popup.style.zIndex = '1000';
            popup.style.fontFamily = 'Arial, sans-serif';
            popup.innerHTML = `
                <div style="text-align: center; max-width: 600px; background-color: #222; padding: 20px; border-radius: 10px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);">
                    <h2 style="margin-bottom: 15px; color:white;">¿Eres mayor de 18 años?</h2>
                    <p style="font-size: 16px; margin-bottom: 20px;">Para acceder a esta web necesitas ser mayor de 18 años.<br>Si haces clic en Sí significa que eres mayor de edad.</p>
                    <button id="yesBtn" style="background-color: #28a745; color: #fff; border: none; padding: 10px 20px; font-size: 16px; border-radius: 5px; cursor: pointer; margin-right: 10px;">Sí</button>
                    <button id="noBtn" style="background-color: #dc3545; color: #fff; border: none; padding: 10px 20px; font-size: 16px; border-radius: 5px; cursor: pointer;">No</button>
                </div>
            `;

            // Añade el popup al cuerpo del documento
            document.body.appendChild(popup);

            // Maneja el clic en el botón "Sí"
            document.getElementById('yesBtn').addEventListener('click', function() {
                // Almacena la cookie 'isAdult' con valor 'true' por 30 días
                setCookie('isAdult', 'true', 30);
                // Remueve el popup del documento
                document.body.removeChild(popup);
            });

            // Maneja el clic en el botón "No"
            document.getElementById('noBtn').addEventListener('click', function() {
                // Redirige al usuario a Google si selecciona "No"
                window.location.href = 'https://www.google.com';
            });
        }
    });
    </script>
    <?php
}
// Añade la función 'age_verification_popup_script' al footer de la página para que se ejecute el script cuando se cargue el footer
add_action('wp_footer', 'age_verification_popup_script');

Lenguaje del código: PHP (php)

Entendiendo el Código

1. Función setCookie(name, value, days)

• Propósito: Esta función se utiliza para establecer una cookie en el navegador del usuario.
• Parámetros:
  • name: El nombre de la cookie.
  • value: El valor que se asignará a la cookie.
  • days: El número de días durante los cuales la cookie será válida.
• Proceso:
  • Si se proporciona un número de días, se calcula la fecha de expiración de la cookie.
  • La fecha de expiración se calcula en milisegundos sumando los días especificados a la fecha y hora actuales.
  • La cookie se establece con el nombre, valor y fecha de expiración calculados, y se aplica a toda la ruta del sitio (path=/).

2. Función getCookie(name)

• Propósito: Esta función se utiliza para obtener el valor de una cookie específica almacenada en el navegador del usuario.
• Parámetros:
  • name: El nombre de la cookie que se desea obtener.
• Proceso:
  • Se recorre todas las cookies almacenadas en el navegador, dividiéndolas en un array utilizando ; como separador.
  • Se busca la cookie que coincida con el nombre proporcionado.
  • Si se encuentra la cookie, se devuelve su valor. De lo contrario, devuelve null.

3. Evento DOMContentLoaded

• Propósito: Este evento se ejecuta cuando el DOM (Document Object Model) ha terminado de cargarse, asegurando que los elementos HTML estén listos para ser manipulados.
• Proceso:
  • Se verifica si la cookie isAdult existe utilizando la función getCookie.
  • Si la cookie no existe (es decir, el usuario no ha confirmado ser mayor de edad), se crea y muestra un popup en la pantalla.

4. Creación y Estilo del Popup

• Propósito: Crear un elemento div que actúa como un popup para solicitar la verificación de edad al usuario.
• Proceso:
  • Se crea un div mediante document.createElement('div').
  • Se le aplican estilos CSS para posicionarlo como una superposición (position: fixed) que cubre toda la pantalla, con un fondo semi-transparente oscuro (backgroundColor: 'rgba(2, 2, 2, 0.9)').
  • Dentro de este div, se inserta otro div con contenido HTML que incluye un mensaje de verificación de edad, y dos botones: «Sí» y «No».

5. Botón «Sí» (yesBtn)

• Propósito: Este botón permite al usuario confirmar que es mayor de edad.
• Proceso:
  • Al hacer clic en el botón, se establece la cookie isAdult con el valor true y una duración de 30 días.
  • Después de establecer la cookie, el popup se elimina de la vista del usuario.

6. Botón «No» (noBtn)

• Propósito: Este botón redirige al usuario fuera del sitio web si indica que no es mayor de edad.
• Proceso:
  • Al hacer clic en el botón, el usuario es redirigido a https://www.google.com mediante window.location.href.

7. Función age_verification_popup_script

• Propósito: Esta función envuelve todo el script en un bloque de código PHP para que se inserte en el sitio web WordPress cuando se carga el pie de página.
• Proceso:
  • La función utiliza add_action('wp_footer', 'age_verification_popup_script'); para asegurarse de que el script se ejecute cuando se carga el pie de página, garantizando que todo el contenido de la página esté cargado antes de mostrar el popup.

Resumen

• El código muestra un popup de verificación de edad si el usuario no ha confirmado previamente su edad.
• Se utilizan cookies para recordar la decisión del usuario durante 30 días.
• Si el usuario confirma que es mayor de edad, se guarda esta información en una cookie y el popup se cierra.
• Si el usuario indica que no es mayor de edad, es redirigido a una página externa (Google en este caso).
• El código se inserta en el pie de página de un sitio web WordPress utilizando PHP para garantizar que se ejecute en el momento adecuado.

Nos vemos en el siguiente tutorial. Un saludo.