• Skip to primary navigation
  • Skip to main content
David Viña

Desarrollador web freelance especializado en WordPress

  • Diseño web
  • Optimización web
  • Conóceme
  • Blog
  • ¿Hablamos?

Como hacer un pop up en WordPress gratis sin plugins

26/04/2019 por David Viña

Si te gusta, comparte!! No cuesta nada!!

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?

Ayúdame a poner un pop up en mi web

Contenido

  • 1 Código HTML que necesitas para hacer un pop up
  • 2 Código CSS para un pop up en una ventana emergente en el centro de la pantalla
  • 3 Código CSS para un pop up en una ventana emergente en la esquina inferior derecha
  • 4 Añadir el evento que dispare nuestro pop up con javaScript
  • 5 Cómo añadir el pop up solo en las entradas de un blog
  • 6 Conclusión

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

Si te gusta, comparte!! No cuesta nada!!

Si te gusta, comparte!! No cuesta nada!!

David Viña

Soy Desarrollador Web freelance especializado en WordPress. Me gusta hacer páginas web que cargan muy rápido y estén lo más optimizadas posibles sin perder calidad ni diseño. I ❤️ Gutenberg!!

Reader Interactions

Comments

  1. joseluismktcuba says

    17/12/2019 at 06:31

    Excelente post, era lo que estaba buscando.

    Responder
    • David Viña says

      23/12/2019 at 20:20

      Muchas gracias👏👏😉

      Responder
  2. Jorge Gijón says

    18/03/2020 at 12:30

    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.

    Responder
    • David Viña says

      22/03/2020 at 13:22

      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 🤙

      Responder
      • Camilo says

        14/06/2020 at 04:35

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

        Responder
        • David Viña says

          14/06/2020 at 19:10

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

          Responder
  3. Zero says

    20/04/2020 at 21:26

    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!

    Responder
    • David Viña says

      27/04/2020 at 19:12

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

      Responder
  4. Ricardo says

    02/06/2020 at 17:34

    Hola, seguí las instrucciones y no muestra el pop up a pesar de colocar el evento settime. ¿Sabrás qué error pueda haber?

    Responder
    • David Viña says

      14/06/2020 at 19:15

      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

      Responder
  5. Cesar says

    04/08/2020 at 10:40

    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

    Responder
    • Cesar says

      04/08/2020 at 10:43

      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.

      Responder
    • David Viña says

      08/08/2020 at 09:54

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

      Responder
  6. Adal says

    01/09/2020 at 21:22

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

    Responder
    • David Viña says

      07/09/2020 at 19:46

      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

      Responder
  7. Albert says

    07/09/2020 at 17:00

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

    Responder
    • David Viña says

      07/09/2020 at 19:32

      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.

      Responder
  8. yosef says

    19/09/2020 at 11:01

    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

    Responder
    • David Viña says

      19/09/2020 at 11:32

      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

      Responder
      • yosef says

        19/09/2020 at 14:05

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

        Responder

Responder a Zero Cancelar la respuesta

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

  • Aviso legal
  • Política de privacidad y cookies

Copyright © 2021 | David Viña | Inspired by Jarnote | hola@davidvina.es

En este sitio web solo usamos cookies técnicas para el correcto funcionamiento de la web [Leer másAceptar
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necesarias
Siempre activado

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

No necesarias

Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.