¿Quieres aumentar tu base de datos de emails para enviar promociones y ofertas relevantes? Este código te proporciona una forma eficiente y profesional de captar correos electrónicos en tu sitio WordPress. A través de un sistema de verificación por email, los usuarios deben proporcionar su dirección de correo para desbloquear contenido exclusivo. Este método no solo protege tu contenido premium, sino que también asegura que los correos recopilados son válidos y pertenecen a usuarios interesados en tus productos o servicios.
La funcionalidad incluye una pantalla inicial donde los usuarios ingresan su correo, aceptan términos y condiciones, y reciben un código único de verificación en su bandeja de entrada. Al verificar este código, se desbloquea el contenido desenfocado, proporcionando acceso inmediato. Además, este sistema registra la actividad de cada usuario, vinculando su email al contenido que visitan, para que puedas personalizar tus campañas de marketing con precisión.
Esta herramienta es ideal para negocios que buscan transformar visitantes en potenciales clientes, aumentando las conversiones y manteniendo una comunicación activa a través de email marketing. Con una configuración sencilla y un diseño adaptable, este sistema es una solución poderosa para captar leads de calidad.
El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.
// Agrega una acción para insertar contenido en el <head> del sitio
add_action('wp_head', 'custom_blur_content_styles_and_scripts');
function custom_blur_content_styles_and_scripts() {
// Si el usuario actual es un administrador, no se aplica el difuminado ni se cargan estilos y scripts
if (current_user_can('administrator')) {
return;
}
?>
<!-- Estilos CSS -->
<style>
/* Contenedor principal para el contenido difuminado */
#blurred-content-wrapper { position: relative; }
/* El contenido que será difuminado inicialmente */
#content-blur {
filter: blur(8px); /* Aplica un efecto de difuminado */
transition: filter 0.3s ease-in-out; /* Suaviza el cambio al desbloquear */
opacity: 0.7; /* Reduce ligeramente la opacidad */
}
/* Overlay que aparece sobre el contenido */
#blur-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.7); /* Fondo semitransparente */
display: flex;
justify-content: center; /* Centra el formulario horizontalmente */
align-items: center; /* Centra el formulario verticalmente */
z-index: 10; /* Asegura que esté por encima del contenido */
}
/* Contenedor del formulario */
#form-container {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra para darle profundidad */
text-align: left;
max-width: 500px;
margin: 0 auto;
}
/* Estilos para los inputs y botones dentro del formulario */
#form-container input, #form-container button {
width: 100%; /* Ocupan todo el ancho disponible */
box-sizing: border-box; /* Incluye padding y border en el ancho total */
}
/* Estilo específico para los inputs */
#form-container input {
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 5px;
}
/* Estilo para los botones */
#form-container button {
padding: 10px 20px;
background: #0073aa; /* Color azul */
color: white; /* Texto en blanco */
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 15px;
font-size: 16px;
}
/* Efecto hover en botones */
#form-container button:hover { background: #005177; }
/* Estado deshabilitado para los botones */
#form-container button:disabled { background: #ccc; cursor: not-allowed; }
/* Caja de términos y condiciones, oculta inicialmente */
#terms-box {
display: none; /* No visible hasta que se activa */
background: #f9f9f9;
border: 1px solid #ddd;
padding: 15px;
margin-top: 10px;
border-radius: 5px;
}
/* Título dentro de la caja de términos */
#terms-box h4 { margin-top: 0; }
</style>
<!-- JavaScript -->
<script>
// Se ejecuta cuando el DOM está completamente cargado
document.addEventListener("DOMContentLoaded", function () {
// Obtiene referencias a elementos clave
const showTermsLink = document.getElementById("show-terms");
const termsBox = document.getElementById("terms-box");
const acceptTermsButton = document.getElementById("accept-terms");
const sendCodeButton = document.getElementById("send-code");
const verifyCodeButton = document.getElementById("verify-code");
const emailForm = document.getElementById("email-form");
const codeField = document.getElementById("code-field");
const errorMessage = document.getElementById("error-message");
const blurOverlay = document.getElementById("blur-overlay");
const contentBlur = document.getElementById("content-blur");
// Muestra los términos y condiciones cuando se hace clic en el enlace
showTermsLink.addEventListener("click", function (e) {
e.preventDefault(); // Previene el comportamiento por defecto del enlace
termsBox.style.display = "block"; // Muestra la caja de términos
});
// Marca los términos como aceptados y habilita el botón para enviar el código
acceptTermsButton.addEventListener("click", function () {
termsBox.style.display = "none"; // Oculta la caja de términos
document.getElementById("terms-text").innerHTML = "Has aceptado los términos y condiciones.";
sendCodeButton.disabled = false; // Habilita el botón de "Recibir código"
});
// Envía el código al email proporcionado
sendCodeButton.addEventListener("click", function () {
const email = document.getElementById("user-email").value;
const referer = window.location.href;
if (!email) {
alert("Por favor, ingresa un email válido."); // Valida el email
return;
}
sendCodeButton.disabled = true; // Desactiva el botón temporalmente
sendCodeButton.textContent = "Verificando...";
// Envío de solicitud AJAX al servidor
fetch(ajaxurl, {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: new URLSearchParams({ action: "check_or_send_code", email, referer }),
})
.then((response) => response.json())
.then((data) => {
sendCodeButton.disabled = false;
sendCodeButton.textContent = "Recibir código";
if (data.success) {
emailForm.style.display = "none"; // Oculta el formulario de email
codeField.style.display = "block"; // Muestra el campo para ingresar el código
alert("Código enviado a tu email.");
} else {
alert(data.data); // Muestra un mensaje de error si la solicitud falla
}
})
.catch((error) => {
console.error(error); // Muestra el error en la consola
sendCodeButton.disabled = false;
sendCodeButton.textContent = "Recibir código";
alert("Ocurrió un error al procesar la solicitud.");
});
});
// Verifica el código ingresado por el usuario
verifyCodeButton.addEventListener("click", function () {
const email = document.getElementById("user-email").value;
const code = document.getElementById("user-code").value;
if (!email || !code) {
alert("Por favor, ingresa tu email y el código."); // Valida ambos campos
return;
}
verifyCodeButton.disabled = true; // Desactiva el botón temporalmente
verifyCodeButton.textContent = "Verificando...";
// Solicitud AJAX para verificar el código
fetch(ajaxurl, {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: new URLSearchParams({ action: "verify_code", email, code }),
})
.then((response) => response.json())
.then((data) => {
verifyCodeButton.disabled = false;
verifyCodeButton.textContent = "Ver contenido";
if (data.success) {
blurOverlay.style.display = "none"; // Elimina el overlay
contentBlur.style.filter = "none"; // Elimina el efecto de difuminado
} else {
errorMessage.style.display = "block"; // Muestra un mensaje de error
errorMessage.textContent = "Código incorrecto o expirado.";
}
})
.catch((error) => {
console.error(error); // Muestra el error en la consola
verifyCodeButton.disabled = false;
verifyCodeButton.textContent = "Ver contenido";
alert("Ocurrió un error al verificar el código.");
});
});
});
</script>
<?php
}
// Agrega una acción para insertar el valor de `ajaxurl` en el frontend
add_action('wp_enqueue_scripts', 'add_ajaxurl_to_frontend');
function add_ajaxurl_to_frontend() {
?>
<script type="text/javascript">
// Define una variable global `ajaxurl` con la URL del archivo admin-ajax.php
// Esto es necesario para que las solicitudes AJAX puedan ser enviadas desde el frontend
var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
</script>
<?php
}
// Agrega un shortcode para implementar el contenido difuminado en las páginas o publicaciones
add_shortcode('blur_content', 'custom_blur_content_shortcode');
function custom_blur_content_shortcode($atts, $content = null) {
// Inicia la captura de salida
ob_start();
?>
<div id="blurred-content-wrapper">
<!-- Contenedor del contenido difuminado -->
<div id="content-blur">
<?php
// Procesa y muestra el contenido dentro del shortcode, permitiendo que contenga otros shortcodes
echo do_shortcode($content);
?>
</div>
<!-- Overlay que bloquea el contenido hasta que se desbloquee -->
<div id="blur-overlay">
<div id="form-container">
<!-- Título del formulario -->
<h3>Para ver este contenido, ingresa tu email:</h3>
<!-- Descripción del proceso -->
<p>Recibirás un código de 6 dígitos en tu correo electrónico que debes ingresar en el formulario. Una vez validado el código tendrás acceso directo al contenido. Si cambias de página o la actualizas tendrás que volver a solicitar el código.</p>
<!-- Texto inicial sobre los términos y condiciones -->
<p id="terms-text">Para continuar, acepta los <a href="#" id="show-terms" style="color: #0073aa; text-decoration: underline;">términos y condiciones</a>.</p>
<!-- Caja de términos y condiciones (inicialmente oculta) -->
<div id="terms-box">
<h4>Términos y Condiciones</h4>
<p>Tu email será usado para enviarte contenido relevante. No se compartirá con terceras personas. Puedes darte de baja en cualquier momento enviándonos un correo a info@miweb.com.</p>
<button type="button" id="accept-terms">Acepto los términos</button>
</div>
<!-- Formulario para ingresar el email -->
<form id="email-form">
<input type="email" id="user-email" placeholder="Tu email" required>
<button type="button" id="send-code" disabled>Recibir código</button>
</form>
<!-- Campo para ingresar el código recibido (inicialmente oculto) -->
<div id="code-field" style="display: none;">
<input type="text" id="user-code" placeholder="Ingresa el código" required>
<button type="button" id="verify-code">Ver contenido</button>
</div>
<!-- Mensaje de error para códigos incorrectos o expirados -->
<p id="error-message" style="color: red; display: none;">Código incorrecto o expirado.</p>
</div>
</div>
</div>
<?php
// Devuelve el contenido capturado para que sea procesado por WordPress
return ob_get_clean();
}
// Registra las acciones AJAX para enviar el código, tanto para usuarios autenticados como para visitantes
add_action('wp_ajax_nopriv_check_or_send_code', 'check_or_send_code');
add_action('wp_ajax_check_or_send_code', 'check_or_send_code');
function check_or_send_code() {
// Sanitiza y valida el email enviado desde el frontend
$email = sanitize_email($_POST['email']);
$referer = sanitize_text_field($_POST['referer']);
// Si el email no es válido, devuelve un error
if (!is_email($email)) {
error_log("Email inválido: $email"); // Registra el error en los logs
wp_send_json_error('Email inválido.'); // Envía la respuesta con error al frontend
}
// Recupera la lista de visitantes almacenada en las opciones de WordPress
$visitantes = get_option('visitantes_emails', array());
// Asegura que la lista de visitantes sea un array
if (!is_array($visitantes)) {
error_log("visitantes_emails no es un array válido.");
$visitantes = array();
}
// Obtiene información del artículo actual (si corresponde)
$post_id = url_to_postid($referer) ?: 0; // ID del artículo basado en la URL referida
$post_title = $post_id ? get_the_title($post_id) : 'Sin título';
$post_url = $post_id ? get_permalink($post_id) : 'Sin URL';
// Si el email no está registrado en la lista de visitantes, se añade
if (!array_key_exists($email, $visitantes)) {
$visitantes[$email] = array(
'fecha' => current_time('mysql'), // Fecha y hora actual
'articulo' => array( // Información del artículo
'title' => $post_title,
'url' => $post_url,
),
'acepto_terminos' => true, // Marca como que aceptó términos
);
// Actualiza la lista de visitantes en las opciones de WordPress
if (!update_option('visitantes_emails', $visitantes)) {
error_log("No se pudo actualizar visitantes_emails.");
}
}
// Genera un código aleatorio de 6 caracteres
$code = substr(str_shuffle('ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'), 0, 6);
// Guarda el código en un transitorio (temporal) asociado al email, válido por 15 minutos
set_transient('email_code_' . $email, $code, 15 * MINUTE_IN_SECONDS);
// Construye el mensaje de correo electrónico con el código
$message = "
<html>
<body>
<h2>Tu Código de Verificación</h2>
<p>Usa este código: <strong>$code</strong></p>
<p>Válido por 15 minutos.</p>
</body>
</html>";
// Envía el correo electrónico con el código
wp_mail($email, 'Código de Verificación', $message, array('Content-Type: text/html; charset=UTF-8'));
// Responde al frontend indicando que el código fue enviado
wp_send_json_success(['unlocked' => false]);
}
// Registra las acciones AJAX para verificar el código, tanto para usuarios autenticados como para visitantes
add_action('wp_ajax_nopriv_verify_code', 'verify_user_code');
add_action('wp_ajax_verify_code', 'verify_user_code');
function verify_user_code() {
// Sanitiza y obtiene el email y código enviados desde el frontend
$email = sanitize_email($_POST['email']);
$code = sanitize_text_field($_POST['code']);
// Recupera el código almacenado en el transitorio para el email proporcionado
$stored_code = get_transient('email_code_' . $email);
// Verifica si el código existe o ha expirado
if (!$stored_code) {
// Responde con un error si el transitorio no existe
wp_send_json_error('Código expirado o no encontrado.');
}
// Compara el código ingresado con el almacenado (sin considerar espacios en blanco)
if (trim($stored_code) === trim($code)) {
// Si el código es correcto, elimina el transitorio para evitar reutilización
delete_transient('email_code_' . $email);
// Crea una cookie que indica que el email ha sido verificado, válida por 1 día
setcookie('email_verified', $email, time() + DAY_IN_SECONDS, COOKIEPATH, COOKIE_DOMAIN);
// Responde con éxito al frontend
wp_send_json_success('Código correcto.');
} else {
// Responde con un error si el código no coincide
wp_send_json_error('Código incorrecto o expirado.');
}
}
// Agrega una página personalizada al menú de administración
add_action('admin_menu', 'create_visitantes_page');
function create_visitantes_page() {
// Usa la función `add_menu_page` para agregar una nueva página al menú de administración
add_menu_page(
'Visitantes', // Título de la página
'Visitantes', // Texto del menú
'manage_options', // Capacidad requerida para acceder
'visitantes', // Slug de la página
'render_visitantes_page', // Función que renderiza el contenido de la página
'dashicons-email-alt', // Icono del menú
20 // Posición en el menú
);
}
// Función que renderiza la página de administración de visitantes
function render_visitantes_page() {
// Obtiene la lista de visitantes almacenada en las opciones de WordPress
$visitantes = get_option('visitantes_emails', array());
// Asegura que la lista sea un array
if (!is_array($visitantes)) {
$visitantes = array();
}
// Maneja las acciones del formulario (eliminar o exportar)
if (isset($_POST['action']) && $_POST['action'] === 'delete') {
// Si se seleccionaron emails para eliminar
if (!empty($_POST['emails'])) {
foreach ($_POST['emails'] as $email) {
unset($visitantes[$email]); // Elimina el email de la lista
}
update_option('visitantes_emails', $visitantes); // Actualiza la lista en la base de datos
}
} elseif (isset($_POST['action']) && $_POST['action'] === 'export_csv') {
// Si se solicita la exportación a CSV
export_visitantes_to_csv($visitantes); // Llama a la función para exportar
}
// HTML para mostrar la tabla de visitantes
?>
<div class="wrap">
<h1>Visitantes</h1>
<form method="post" action="">
<table class="wp-list-table widefat fixed striped">
<thead>
<tr>
<th><input type="checkbox" id="select-all"></th> <!-- Checkbox para seleccionar todos -->
<th>Email</th>
<th>Fecha</th>
<th>Artículo</th>
<th>Términos Aceptados</th>
</tr>
</thead>
<tbody>
<?php if (!empty($visitantes)): ?>
<?php foreach ($visitantes as $email => $info): ?>
<tr>
<td><input type="checkbox" name="emails[]" value="<?php echo esc_attr($email); ?>"></td>
<td><?php echo esc_html($email); ?></td>
<td><?php echo esc_html($info['fecha'] ?? 'N/A'); ?></td>
<td>
<?php if (!empty($info['articulo']['title']) && !empty($info['articulo']['url'])): ?>
<a href="<?php echo esc_url($info['articulo']['url']); ?>" target="_blank">
<?php echo esc_html($info['articulo']['title']); ?>
</a>
<?php else: ?>
N/A
<?php endif; ?>
</td>
<td><?php echo !empty($info['acepto_terminos']) ? 'Sí' : 'No'; ?></td>
</tr>
<?php endforeach; ?>
<?php else: ?>
<tr>
<td colspan="5">No hay visitantes registrados.</td>
</tr>
<?php endif; ?>
</tbody>
</table>
<p>
<!-- Botón para eliminar visitantes seleccionados -->
<button type="submit" name="action" value="delete" class="button button-secondary">Eliminar Seleccionados</button>
<!-- Botón para exportar a CSV -->
<button type="submit" name="action" value="export_csv" class="button button-primary">Exportar a CSV</button>
</p>
</form>
</div>
<?php
}
// Función para exportar la lista de visitantes a un archivo CSV
function export_visitantes_to_csv($visitantes) {
// Si no hay visitantes registrados, detiene la ejecución con un mensaje
if (empty($visitantes)) {
header('Content-Type: text/plain; charset=utf-8');
echo 'No hay datos para exportar.';
exit;
}
// Asegúrate de que no se haya enviado salida previa (HTML, errores, etc.)
if (ob_get_length()) {
ob_clean(); // Limpia cualquier salida previa en el buffer
}
// Configuración de encabezados para la descarga del archivo CSV
header('Content-Type: text/csv; charset=utf-8');
header('Content-Disposition: attachment; filename="visitantes.csv"');
// Abre la salida para escribir los datos
$output = fopen('php://output', 'w');
// Escribe los encabezados del archivo CSV
fputcsv($output, array('Email', 'Fecha', 'Título del Artículo', 'URL del Artículo', 'Términos Aceptados'));
// Escribe los datos de cada visitante en filas
foreach ($visitantes as $email => $info) {
fputcsv($output, array(
$email, // Email del visitante
$info['fecha'] ?? 'N/A', // Fecha de registro o 'N/A'
$info['articulo']['title'] ?? 'N/A', // Título del artículo o 'N/A'
$info['articulo']['url'] ?? 'N/A', // URL del artículo o 'N/A'
!empty($info['acepto_terminos']) ? 'Sí' : 'No', // Indicador de aceptación de términos
));
}
// Cierra el puntero de salida
fclose($output);
exit; // Termina la ejecución del script
}
Lenguaje del código: PHP (php)Entendiendo el Código
1. add_action('wp_head', 'custom_blur_content_styles_and_scripts')
- Propósito: Inserta los estilos CSS y el JavaScript necesarios en la cabecera del sitio web.
- Detalles:
- Define los estilos para el desenfoque del contenido, el formulario de email y la superposición.
- Incluye un script JavaScript para manejar la interacción del usuario: mostrar términos y condiciones, enviar el código de verificación, y desbloquear el contenido si el código es correcto.
- Evita cargar estos estilos y scripts si el usuario es un administrador.
2. add_action('wp_enqueue_scripts', 'add_ajaxurl_to_frontend')
- Propósito: Define una variable global
ajaxurlen el frontend para realizar solicitudes AJAX hacia el backend de WordPress. - Detalles:
ajaxurlapunta aadmin-ajax.php, que procesa las solicitudes AJAX enviadas desde el frontend.
3. add_shortcode('blur_content', 'custom_blur_content_shortcode')
- Propósito: Crea un shortcode
[blur_content]que permite proteger contenido específico. - Detalles:
- Genera el HTML del contenido protegido, incluyendo el desenfoque, la superposición y el formulario.
- Utiliza el contenido entre las etiquetas del shortcode como el contenido desenfocado.
- Facilita la implementación rápida en cualquier página o post.
4. check_or_send_code()
- Propósito: Procesa la solicitud AJAX para verificar o enviar el código de verificación al email del usuario.
- Detalles:
- Valida el email ingresado por el usuario.
- Genera un código único de 6 caracteres y lo guarda como un transiente (temporal) vinculado al email.
- Envía el código por correo electrónico al usuario.
- Registra el email del usuario en la base de datos, junto con el artículo visitado y la fecha.
5. verify_user_code()
- Propósito: Verifica el código ingresado por el usuario.
- Detalles:
- Comprueba si el código almacenado coincide con el proporcionado por el usuario.
- Si es correcto, elimina el transiente y configura una cookie para desbloquear el contenido.
- Si es incorrecto o ha expirado, devuelve un mensaje de error.
6. create_visitantes_page()
- Propósito: Crea una página en el panel de administración para gestionar los emails recopilados.
- Detalles:
- Agrega un menú en el panel de administración llamado «Visitantes».
- Muestra una tabla con los emails registrados, la fecha, el artículo visitado y si aceptaron los términos.
- Proporciona opciones para eliminar emails seleccionados o exportar la lista completa en formato CSV.
7. render_visitantes_page()
- Propósito: Renderiza el contenido de la página «Visitantes» en el panel de administración.
- Detalles:
- Muestra una tabla con los datos de los usuarios registrados.
- Permite seleccionar emails para eliminar o exportar.
- Incluye un botón para exportar todos los datos en un archivo CSV.
8. export_visitantes_to_csv()
- Propósito: Exporta los datos de visitantes recopilados a un archivo CSV descargable.
- Detalles:
- Genera un archivo CSV con los campos: email, fecha, artículo visitado y términos aceptados.
- Establece los encabezados HTTP necesarios para descargar el archivo automáticamente.
9. Estilos CSS
- Propósito: Define el diseño visual del contenido desenfocado, la superposición y los formularios.
- Detalles:
- Usa
filter: blur(8px)para desenfocar el contenido. - Estiliza el formulario para que sea atractivo y fácil de usar.
- Define transiciones suaves para mejorar la experiencia de usuario.
- Usa
10. JavaScript en el Frontend
- Propósito: Maneja la lógica de interacción en el frontend.
- Detalles:
- Mostrar términos: Despliega la sección de términos y condiciones cuando el usuario hace clic en el enlace.
- Enviar código: Realiza una solicitud AJAX para enviar el código al email ingresado.
- Verificar código: Valida el código ingresado y desbloquea el contenido si es correcto.
- Manejo de errores: Muestra mensajes claros en caso de errores.
En conclusión,iImplementar un sistema de captura de emails en tu sitio WordPress, como el descrito en este artículo, es una estrategia poderosa para hacer crecer tu base de datos de clientes potenciales. Este código no solo protege tu contenido exclusivo, sino que también te permite obtener información valiosa de tus visitantes para personalizar ofertas y promociones. Además, la funcionalidad integrada de exportar datos y gestionar registros facilita su uso en cualquier estrategia de email marketing.
Si necesitas ayuda para implementar este código en tu sitio, deseas personalizarlo según tus necesidades o mejorar sus funcionalidades, ¡estoy aquí para ayudarte! Contáctame directamente a través de mi WhatsApp y trabajemos juntos en llevar tu sitio web al siguiente nive.
Nos vemos en el siguiente tutorial. Un saludo.
Deja tus opiniones o dudas en los comentarios.