✅Notificaciones Emergentes (POPUPS) Sin Plugins | WordPress

En el vasto mundo de WordPress, la comunicación efectiva con los usuarios es clave. El código que abordamos aquí ofrece una solución inteligente para resaltar información importante: notificaciones emergentes. Estas pequeñas alertas no solo añaden un toque visualmente agradable a tu sitio, sino que también están respaldadas por una lógica astuta que evita ser intrusivas.

Desde la elegancia de los estilos CSS que definen su presentación hasta la funcionalidad hábil del script jQuery, cada línea de este código contribuye a una experiencia de usuario mejorada. Su magia radica en la capacidad de aparecer solo cuando es necesario, gracias a una «cookie» inteligente que evita repeticiones molestas.

¿En qué situaciones se puede desplegar esta herramienta? Desde destacar ofertas especiales hasta anunciar novedades, estas notificaciones se convierten en aliadas poderosas.

A lo largo de este artículo, exploraremos cómo este código eleva la interactividad del usuario en WordPress, ofreciendo un equilibrio perfecto entre estilo y funcionalidad. ¡Descubre cómo mejorar la comunicación en tu sitio con estas notificaciones efectivas!

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

// Agrega estilos y scripts para notificaciones emergentes
function agregar_notificaciones_emergentes() {
    ?>
    <style>
        /* Estilos para notificaciones emergentes */
        .notificacion-emergente {
            display: none;
            position: fixed;
            bottom: 20px;
            left: 20px;
            max-width: 300px;
            width: 100%;
            padding: 30px;
            background-color: #f4f4f4;
            color: black;
            border-radius: 5px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
            z-index: 9999; /* Z-index más alto */
        }

        .cerrar-notificacion {
            cursor: pointer;
            color: black;
            background: none;
            border: none;
            padding: 0;
            font-size: 20px;
            position: absolute;
            top: 10px;
            right: 10px;
        }

        .enlace-boton {
            display: inline-block;
            margin-top: 10px;
            padding: 10px 15px;
            background-color: black;
            color: white;;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.3s;
        }

        .enlace-boton:hover {
            background-color: white;
			color:black;
			border: 1px solid black;
        }
    </style>

    <script>
        // Script para notificaciones emergentes
        jQuery(document).ready(function ($) {
            // Verifica si la cookie 'notificacion_mostrada' no existe
            if (document.cookie.indexOf('notificacion_mostrada') === -1) {
                // Muestra la notificación emergente
                $('.notificacion-emergente').fadeIn(1000);

                // Cierra la notificación al hacer clic en el botón de cerrar
                $('.cerrar-notificacion').on('click', function () {
                    $(this).closest('.notificacion-emergente').fadeOut(500);
                    // Crea la cookie 'notificacion_mostrada' que durará 1 día (ajústala según tus necesidades)
                    var fechaExpiracion = new Date();
                    fechaExpiracion.setDate(fechaExpiracion.getDate() + 1);
                    document.cookie = 'notificacion_mostrada=true; expires=' + fechaExpiracion.toUTCString() + '; path=/';
                });
            }
        });
    </script>

    <!-- Notificación emergente HTML -->
    <div class="notificacion-emergente">
        <button class="cerrar-notificacion">×</button>
        <p style="padding-bottom: 10px;">¡Tenemos una promoción especial por tiempo limitado! Aprovéchala ahora.</p>
        <a href="https://tu-enlace.com" class="enlace-boton">Ver oferta</a>
    </div>
    <?php
}
add_action('wp_footer', 'agregar_notificaciones_emergentes');

Lenguaje del código: PHP (php)

Entendiendo el Código

La función agregar_notificaciones_emergentes se encarga de agregar estilos, scripts y la estructura HTML necesarios para las notificaciones emergentes. Esta función se engancha al evento wp_footer, lo que significa que se ejecutará al final del área de contenido de WordPress.

Estilos CSS

El código comienza definiendo estilos CSS que se aplicarán a las notificaciones emergentes. Algunos puntos clave son:

• .notificacion-emergente: Define estilos para la caja de la notificación, incluyendo posición fija en la esquina inferior derecha, máxima anchura, sombras y bordes redondeados.
• .cerrar-notificacion: Establece estilos para el botón de cierre, como posición absoluta en la esquina superior derecha y tamaño del texto.
• .enlace-boton: Define estilos para el enlace que puede estar presente en la notificación, especificando colores, bordes y transiciones de animación.

Script jQuery

Luego, se incorpora un script jQuery que controla el comportamiento de las notificaciones emergentes:

• Verificación de Cookie: Antes de mostrar la notificación, el script verifica si la cookie llamada ‘notificacion_mostrada’ no existe en el documento.
• Mostrar Notificación: Si la cookie no existe, la notificación se muestra con una animación de fundido (fadeIn) durante 1000 milisegundos.
• Cerrar Notificación: Se agrega un manejador de eventos al botón de cierre (cerrar-notificacion) para ocultar la notificación cuando se hace clic. También crea una cookie que indica que la notificación ha sido mostrada y establece su expiración para 1 día.

Estructura HTML

Finalmente, se incluye la estructura HTML real de la notificación emergente. Este bloque HTML contiene el botón de cierre, un mensaje y un enlace de botón que podría dirigir a los usuarios a una oferta especial.

Implementación en WordPress

La función add_action asegura que la función agregar_notificaciones_emergentes se ejecute al final del área de contenido de WordPress, permitiendo así la inclusión de estas notificaciones en el pie de página del sitio.

Conclusión

En resumen, este código crea un sistema de notificaciones emergentes en WordPress utilizando HTML, CSS y jQuery. La lógica de las cookies garantiza que la notificación no se muestre repetidamente a los usuarios, proporcionando así una experiencia de usuario más amigable. Este enfoque sencillo pero efectivo puede mejorar la visibilidad de promociones o información esencial en un sitio web.

Nos vemos en el siguiente tutorial. Un saludo.