Como hacer un pop up en WordPress gratis sin plugins

En esta entrada quiero enseñarte como hacer un pop up en WordPress gratis y sin instalar ningún plugin. Los pop up son un recurso muy interesante para poner formularios de suscripción o llamadas a la acción que aparecen en el centro de la pantalla o en la esquina derecha como ventana emergente. Estos pop up son una forma muy interesante de poner ciertos elementos que aparecen al pasar un cierto tiempo, o al pulsar un determinado botón.

En este post te voy a contar cómo hacer fácilmente un pop up sin ningún plugin. Yo soy muy partidario de usar los mínimos plugins posibles por temas de optimización web y más cuando se pueden hacer implementado fácilmente con unas cuantas líneas de código durante el diseño de tu página web. Y lo mejor de todo, te voy poner aquí todo el código y explicarte cómo usarlo de la manera más sencilla posible. Si tienes tu propio plugin de funciones, este código lo debes poner allí. Sino, sigue los pasos que te indico, pero que sepas que este código va en tu plantilla y si cambias la plantilla debes copiar el código en la nueva. Necesitarás código HTML, código CSS y javaScript. ¿Te quedas?

Código HTML que necesitas para hacer un pop up

El siguiente código HTML lo puedes poner en un widget en el pie de página si quieres usarlo en cualquier página, dentro de un bloque HTML de tu editor si solo lo quieres usar en alguna página determinada o con una función en functions.php para ponerlo solo en las entradas de tu blog (luego te digo como ponerlo).

<div id="fondo">
    <div id="pop-up">
        <button id="cerrar-pop-up">
            <span>×</span> 
        </button>
        //Aquí insertamos el código de tu formulario, de tu llamada de acción o de lo que necesites poner
    </div>
</div>

Sencillo, ¿no?

Código CSS para un pop up en una ventana emergente en el centro de la pantalla

Para poner el pop up en el centro de la pantalla ocupando el centro de la pantalla y el resto de la pantalla traslúcida en la versión de escritorio, y ocupando toda la pantalla en la versión móvil, necesitamos el siguiente código CSS. En el panel de control de WordPress vamos a Apariencia->Personalizar->CSS Adicional e introducimos esto:

#fondo {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.7);
    z-index: 1111111;
}

#pop-up {
    background-color: white;
    width: 800px;
    position: absolute;
    top: 200px;
    left: 50%;
    margin-left:-400px;
    padding: 30px;
    border-radius:10px;
}

#cerrar-pop-up {
    position: absolute;
    top: 0;
    right: 0;
    background-color: transparent;
}

#cerrar-pop-up span{
    display: flex;
    width: 50px;
    height: 50px;
    background-color: grey;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    text-align: center;
    color: white;
    font-size: 40px;
    font-weight: bold;
    border-radius: 1000%;
}

@media (max-width: 800px){
    #pop-up {
        top: 0;
        left: 0;
        width: 100%;
        margin: 0;
        bottom: 0;
        overflow-y: scroll;
    }
}

El pop up está oculto por defecto, y al producirse el evento que se programe aparece el pop up como una ventana emergente.

Código CSS para un pop up en una ventana emergente en la esquina inferior derecha

Si este es tu caso, añadimos el siguiente CSS en los ajustes de Personalizar->CSS Adicional:

#fondo{
    display: none;
    position: fixed;
    bottom: 50px;
    right: 50px;
    z-index: 1111111;
    width: 400px;
    height: 400px;
    border-radius: 10px;
    padding: 30px;
    background-color: white;
    overflow-y: scroll;
}

#cerrar-pop-up {
    position: absolute;
    top: 0;
    right: 0;
    background-color: transparent;
}

#cerrar-pop-up span{
    display: flex;
    width: 50px;
    height: 50px;
    background-color: grey;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    text-align: center;
    color: white;
    font-size: 40px;
    font-weight: bold;
    border-radius: 1000%;
}

@media (max-width: 460px){
    #fondo {
        right: 0;
        width: 70%;
    }
}

Añadir el evento que dispare nuestro pop up con javaScript

Para que nuestro pop up aparezca podemos programar distintos eventos en los que eso ocurra. Pero todos ellos los hacemos añadiendo javaScript, con lo que debes crear un archivo js en tu child theme o tema activo. En el artículo que escribí sobre Storefront y como crear un tema hijo, os cuento cómo añadir un archivo javaScript a esa plantilla, pero ese método es válido para cualquier plantilla. Una vez tenemos nuestro custom.js (o como le hayas llamado) añades el siguiente código y pones el evento (u eventos), que quieras:

jQuery(document).ready(function( $ ) {
	
        //Evento para que aparezca el pop up a los 120 segundos. Puedes poner el tiempo que quieras pero ten en cuenta que el valor es en milisegundos
	setTimeout(function(){
            $('#fondo').fadeIn(300);
        },120000);

        //Evento para abrir el pop up al pulsar un botón. Solo tienes que ponerle al botón que quieras el id abrir-pop-up
        $('#abrir-pop-up').click(function(){
            $('#fondo').fadeIn(300);
        }

        //Abrir el pop up al hacer scroll 500px. Si quieres una distancia distinta solo tienes que cambiar el 500 por el número de píxeles que desees
        var control=true;
        $(window).scroll(function(){
            var windowHeight = $(window).scrollTop();
            if(windowHeight<=500 && control){
                $('#fondo').fadeIn(300);
                control=false;
            }
        });

        //Cerrar el pop up al pulsar en la aspa
	$('#cerrar-pop-up').click(function(){
            $('#fondo').fadeOut(300); 
        });

}); 

Es muy importante que no se ponga el evento del botón si no está asignado el id a ningún botón ya que en ese caso no funcionará el resto del código.

Creo que esta todo clarito. ¿No? ¿Hay más eventos para que aparezca el pop up? Sí, muchos más, pero creo que estes son los principales y más usados.

Cómo añadir el pop up solo en las entradas de un blog

Si tu objetivo es mostrar el pop up con un formulario de suscripción (por poner un ejemplo) solo en las entradas de tu blog, tienes que añadir el siguiente código a tu functions.php:

//añadir contenido al final de cada post.
add_filter('the_content','add_my_content',1);

function add_my_content($content) {
    $my_pop_up='
        <div id="fondo">
            <div id="pop-up">
                <button id="cerrar-pop-up"><span>×</span></button>
                //Tu contenido del pop up
            </div>
        </div>';
    if(is_single() && !is_home()) {
        $content .= $my_pop_up;
    }
    return $content;
}

Conclusión

Crear tus propios pop ups es relativamente fácil y te evitas instalar un plugin a mayores. Porque cuantos más plugins, más recursos, más código y más archivos. Y todo ello influye en los tiempos e carga de la web. Cuando son funcionalidades complejas, está bien usar plugins (yo no me planteo montar una tienda sin WooCommerce!!!), pero siempre que se pueda implementar una funcionalidad sin recurrir a un plugin, yo lo aconsejo.

Espero que te sirva de ayuda este post. Cualquier sugerencia será bienvenida en los comentarios.

Nos leemos en el próximo post!!