1 min 26/04/2019

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 class="soivigol-popup">
    <div class="soivigol-popup-inner">
        // Contenido de tu pop up
    <span class="soivigol-close">&times;</span>
    </div>
</div>

Lo ideal es poner este código con un hook en el functions.php o en un plugin de funcionalidades de la siguiente manera:

/**
 * Insertar el html del pop up en el footer por código.
 */
function soivigol_insert_popup() {
    ?>
    <div class="soivigol-popup">
       <div class="soivigol-popup-inner">
        // Contenido de tu pop up
       <span class="soivigol-close">&times;</span>
       </div>
    </div>
    <?php
}
add_action( 'wp_footer', 'soivigol_insert_popup' );

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:

.soivigol-popup {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.7);
    z-index: 1111111;
    visibility: hidden;
    opacity: 0;
    transition: all .2s ease-in;
}

.soivigol-popup-inner {
    background-color: white;
    width: 800px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    padding: 30px;
    border-radius:10px;
}

.soivigol-close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    width: 20px;
    text-align: center;
    font-size: 22px;
    line-height: 1;
}

.soivigol-popup.open {
    visibility: visible;
    opacity: 1;
}

@media (max-width: 768px){
    #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:

.sovigol-popup{
    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;
}

@media (max-width: 460px){
    .soivigol-popup {
        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:

window.addEventListener( 'load', 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() {
        const popup = document.querySelector( '.soivigol-popup' );
        popup.classList.add( 'open' ); 
    }, 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
     const btnAbrirPopup = document.querySelector( '#abrir-pop-up' );
     btnAbrirPopup.addEventListener( 'click', () => { 
        const popup = document.querySelector( '.soivigol-popup' );
        popup.classList.add( 'open' );
     });

    //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
    let scrolling = false;
    window.addEventListener( 'scroll', function() {
         scrolling = true;
    } );
    setInterval( function() {
        if ( scrolling ) {
            scrolling = false;
            const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
            if ( winScroll > 500 ) {
                const popup = document.querySelector( '.soivigol-popup' );		       
                popup.classList.remove( 'open' );
            }
        } 
    }, 500 );

    //Cerrar el pop up al pulsar en la aspa
    const btnClosePopup = document.querySelector( '.soivigol-close' );
    if ( btnClosePopup ) {
        btnClosePopup.addEventListener( 'click', () => {
	    const popup = document.querySelector( '.soivigol-popup' );		       
            popup.classList.remove( 'open' );
        });
    }

}); 

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. Eso sí, pon solo el evento que tu quieres, no todos.

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.
function soivigol_my_content( $content ) {
    $my_pop_up='
        <div id="fondo">
            <div id="pop-up">
                <button id="cerrar-pop-up"><span>&times;</span></button>
                //Tu contenido del pop up
            </div>
        </div>';
    if(is_single() && !is_home()) {
        $content .= $my_pop_up;
    }
    return $content;
}
add_filter( 'the_content', 'soivigol_my_content', 10 );

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!!

28 comentarios

  1. Hola, qué tal, gracias por tu aporte. Quería preguntarte qué habría que implementar para que el aviso solo saliera una vez y que no volviera a salir si el usuario sigue navegando.

    1. Hola Jorge. Gracias por comentar ????
      Solo tienes q poner uno de los disparadores de js que hay en el artículo. Si te refieres a seguir navegando por otras páginas habría que guardar una variable en el navegador con localStorage.setItem(«Nombre_var», false); y recuperarla con var verificar = localStorage.getItem(«Nombre_var»); poniendo un if (verificar){} adicional en el disparador que uses.
      Espero haberte ayudado ????

      1. Hola David, ha estado excelente el post. Pero no logro hacer que solo se muestre una vez por usuario. Te agradecería mucho.

        1. Hola Camilo.
          Gracias por tu comentario.
          Para eso tendrías que guardar un dato en el navegador del usuario con localStorage.setItem( ‘dato’, ‘valor_del_dato’ ); una vez aparece por primera vez. Luego tienes que verificar que ese dato existe con un if ( » !== localStorage.getItem( ‘dato’ ) ){// codigo que lanza el evento}.
          Por ej., si tienes el evento
          //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);
          }
          Lo tendrías que modificar así:
          if ( » !== localStorage.getItem( ‘dato’ ) ){
          $(‘#abrir-pop-up’).click(function(){
          $(‘#fondo’).fadeIn(300);
          localStorage.setItem( ‘dato’, ‘valor_del_dato’ );
          }
          }

          Recuerda que esto al fin y al cabo es una cookie. Te lo comento por la política de privacidad ????.

          Un saludo!!!

  2. Hola David,

    Un gran post y me ha sido muy útil. Tengo el pop up en un botón load_more pero quiero que solo aparezca a los usuarios no loggeados. A los que si están conectados con su usuario no les aparezca y cargue el resto de post.¿cómo puedo hacerlo?
    Muchas gracias de antemano!

    1. Cuando ingresas el contenido con el hook add_filter(‘the_content’,’add_my_content’,1);, en la función tienes que verificar si el usuario está logueado con if ( is_user_logged_in() ) { //contenido del pop up }. De esta forma solo te aparece si está logueado el pop up.
      Muchas gracias por el comentario!!!

    1. Hola Ricardo.
      Pues con la información que me das creo que no puedo ayudarte. Si seguiste todos los pasos correctamente debería lanzarse el popup sin fallo.
      En muchos casos el problema es que no se carga el javaScript. Para comprobarlo puedes poner alert(‘Funciona’) en el javaScript. Así compruebas que este archivo carga correctamente.
      También te invito a que consultes el post que tengo sobre el inspector de Chrome ya puede ayudarte a resolver muchos problemas.

      Un saludo

  3. Hola,

    Muy bueno el post, pero me surge un problema. Trabajo en Mac, y normalmente en Firefox. Me he pasado más de una hora dando vueltas al código, y no lograba que funcionase. Al final, volví al punto de partida, probe en Chrome y en Safari, y todo funciona sin problema.

    Está claro que el problema viene de Firefox, pero no se el porqué. El tema es que parece que no está haciendo bien la selección del elemento css.

    ¿Sabes que podría ser?

    Muchas gracias por adelantado, y sigo investigando

    1. Me contesto a mi mismo, y añado más incertidumbre al tema… Solo ocurre con Firefox Developer Edition, en la versión normal de Firefox, el código también funciona correctamente.

      Es muy desconcertante.

    2. Por lo que dices, debe ser algún problema de interpretación del CSS, pero cualquiera de los q pongo en este post debería ser compatible con Firefox. Yo tengo esos mismos códigos en distintas webs y se ven bien en todos los navegadores.
      Saludos!!

  4. Muy bueno el post. Yo no soy experto, pero hice mi página para mi restaurante y solo tengo un popup establecido, y si es mucho poner un plugin para un solo popup. ¿Cómo podría establecer que el popup sólo se muestre en un horario específico?

    Muchas Gracias!!

    1. Hola Adal. Gracias por tu comentario!!!

      Mete el html de esta manera desde el functions.php o desde un plugin personalizado:
      add_action( ‘wp_footer’, ‘add_my_content’, 1 );

      function add_my_content() {
      $hora_actual = wp_date( ‘h’ );
      if ( 8 < $hora_actual && 22 > $hora_actual ) {
      ?>


      //Tu contenido del pop up

  5. Cojonudo el post la verdad, una preguntilla, crees que puede servir para otros Cms (para xenforo por ejemplo)? o solo valido para wordpress?

    1. Hola Albert. Gracias por el comentario!!!
      En principio el post está pensado para WordPress, pero si tu sabes donde meter el HTML, CSS y el javaScript en tu CMS, debería funcionar exactamente igual.

  6. Hola buenas tengo dos dudas, la primera es como puedo optimizar el rendimiento de mi web si uso elementor,(si hay alguna parte de su código prescindible que no utilice y pueda borrar o algo ) ya que esta lo ralentiza muchísimo. Y la segunda es , he creado un popup que utiliza un formulario de contacto, quiero saber como codificarlo para que se deslice contigo conforme vas bajando a lo largo de la página

    1. Buenas.
      Para optimizar Elementor lo mejor en no usarlo!! Pero sino te queda más remedio, tendrás q usar algún plugin de cache, minificación de código y combinación. Por ej. WP-Rocket.
      Si quieres q el formulario se mantenga fijo (es lo que entiendo) tienes que ponerle position: fixed;
      Un saludo

      1. lo que quiero es que conforme vas bajando en la página el popup baje contigo en vez de quedarse fijo donde aparece

  7. Buenas!

    Se podría añadir un evento de que únicamente saliera el pop-up cuando uno entra en el check-out de la tienda de woocommerce???

    Por ejemplo para avisar de que no se olviden de revisar los gastos de envio.

    Un saludo!

    1. Hola!!

      Si, puedes ponerlo de la siguiente forma:
      //añadir contenido al final de cada post.
      add_action(‘wp_footer’,’add_my_popup’,1);

      function add_my_popup() {
      $my_pop_up=’


      //Tu contenido del pop up

      ‘;
      if( is_page( ‘checkout’ ) ) {
      echo $my_pop_up;
      }
      }

  8. Hola me ha resultado muy interesante pero soy novata y no tengo ni idea de cómo hacerlo. Quiero un popup con una imagen que salga al entrar al sitio. En el centro… He copiado el código, pero dónde y cómo pongo la foto?? Estoy muy perdida. Me puedes ayudar? gracias 🙂

  9. Hola, ya he visto el problema: en el código JQuery falta un cierre del paréntesis aquí:

    //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);
    } <— Aquí (debería cerrar paréntesis de ".click", y luego el punto y coma. Así sí funcionó)

    Muchas gracias. Esto me sirvió un montón.

  10. Hola! Gracias por los códigos queda buenísimo.
    En el caso del botón que gatilla el popup, tuve que agregar un parámetro a la función addEventListener.
    O sea, esta línea
    btnAbrirPopup.addEventListener( () => {
    Me funciona sólo si la cambio a
    btnAbrirPopup.addEventListener( ‘click’, () => {
    Saludos!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *