💡 Cómo añadir una ventana emergente en WordPress

• Elija su enfoque: el plugin Popup Maker para un inicio rápido o código personalizado para un control total
• Instale Popup Maker a través de «Plugins → Añadir nuevo» y actívelo
• Cree una nueva ventana emergente, establezca el contenido de la entrada o página y configure un disparador (clic, temporizador o desplazamiento)
• Para una solución a medida, añada estilos CSS para la ventana modal en el archivo de su tema o en el personalizador
• Encole el archivo JavaScript mediante wp_enqueue_script() con dependencia de jquery, verificando el orden de carga
• Abra la página y pruebe la ventana emergente en su navegador mientras monitoriza la consola en busca de errores

Qué son las ventanas modales y por qué su sitio WordPress las necesita

Una ventana modal es un bloque emergente de contenido que se abre sobre la página mientras oscurece el fondo. El usuario nunca abandona la URL actual pero ve información adicional: texto de una entrada, un formulario, un vídeo o una galería.

Para un sitio WordPress, las ventanas modales resuelven tres problemas específicos. Primero, un panel de usuario: en lugar de una página de perfil separada, muestra ajustes, pedidos o mensajes en un bloque emergente. Segundo, vista previa rápida de contenido: un visitante hace clic en una ficha de producto o avance de artículo y ve el contenido completo sin recargar. Tercero, formularios de captación de leads: los formularios de suscripción, registro y contacto aparecen exactamente cuando el visitante está listo para actuar.

La ventaja clave de una ventana modal frente a una página separada es la velocidad. No hay espera por una carga completa de página con su cabecera, barra lateral y pie. Usted carga solo the_content(), contenido puro. Esto ahorra tanto tiempo del usuario como recursos del servidor.

WP Post Popup: por qué el plugin veterano abandonó el escenario

Hasta 2023, una de las soluciones más populares para ventanas modales en WordPress era el plugin WP Post Popup (wp-post-modal). Podía convertir cualquier entrada, página o tipo de contenido personalizado en una ventana emergente; solo tenía que especificar una URL con un parámetro. El plugin funcionaba con shortcodes, Contact Form 7 y BuddyPress; podía cargar páginas externas e incluso mostrar selectivamente un div específico de otro sitio.

En octubre de 2023, el plugin fue cerrado. El motivo fue una vulnerabilidad de seguridad. La página de WordPress.org muestra ahora el estado «Este plugin ha sido cerrado… Motivo: Problema de seguridad». Desde entonces no está disponible para descargar y las instalaciones activas han caído a cero.

Pero las ideas detrás de WP Post Popup no han desaparecido. La tarea de mostrar contenido en una ventana emergente sin recargar sigue siendo resoluble hoy, y por dos vías: plugins modernos y código puro.

3 Formas modernas de añadir una ventana modal en WordPress

Estas son las opciones actuales para 2026, desde plugins listos para usar hasta una solución completamente a medida.

Popup Maker es el plugin gratuito más popular para ventanas emergentes: más de 700 000 instalaciones activas y una valoración de 4,9 en WordPress.org. Crea cualquier tipo de ventana emergente, desde modales con contenido hasta paneles deslizantes y banners. Los disparadores incluyen clic, temporizador, desplazamiento o intención de salida. Si necesita una solución rápida sin código, este es el mejor punto de partida.

Bootstrap 5 está integrado en muchos temas modernos. Su componente Modal nativo funciona nada más instalarlo: responsividad, animación, cierre con Escape y clic fuera de la ventana. Solo incluya Bootstrap en su tema y use el marcado listo con atributos de datos.

Código puro es el camino para quienes necesitan control total sobre cada píxel y comportamiento de la ventana. Sin scripts extra, dependencias ni conflictos con otros plugins. Este es el método que recorreremos paso a paso.

El vídeo de arriba es un tutorial práctico para crear una ventana modal personalizada en WordPress desde cero: 12 minutos de código puro con un resultado listo al final.

Guía paso a paso: construir una ventana modal desde cero

Este método funciona en cualquier sitio WordPress independientemente del tema. Escribiremos un marco CSS para estilizar el bloque emergente, corregiremos un error típico de JavaScript y añadiremos un preloader inteligente para que el contenido aparezca suavemente sin parpadeos.

Paso 1: Marco CSS para la ventana modal

El estilizado básico logra tres cosas: centra la ventana en la pantalla, oscurece el fondo y adapta las tablas dentro del bloque modal. Aquí tiene el código funcional para el archivo style.css de su tema o la pestaña «CSS adicional» en el personalizador:

1
/* Modal window — basic styles */
2
.modal.show {
3
    max-width: 650px;
4
}
5
 
6
.modal.show .kk-star-ratings.bottom-right.rgt {
7
    display: none;
8
}
9
 
10
/* Tables inside the modal window */
11
.modal.show table {
12
    border-collapse: separate;
13
    max-width: 100%;
14
    overflow: auto;
15
    table-layout: fixed;
16
    border: none;
17
    width: auto;
18
}
19
 
20
.modal.show table th {
21
    background: #F8F0F8;
22
    padding: 17px 10px;
23
    vertical-align: middle;
24
    color: #7F617E;
25
    font-size: 12px;
26
    text-align: left;
27
}
28
 
29
.modal.show table th:first-child {
30
    border-radius: 5px 0 0 5px;
31
}
32
 
33
.modal.show table th:last-child {
34
    border-radius: 0 5px 5px 0;
35
}
36
 
37
.modal.show table th.th-border {
38
    border-left: 1px solid #ECE1EC;
39
}
40
 
41
.modal.show table td {
42
    color: #424242;
43
    font-size: 13px;
44
    border-bottom: 1px dashed #E5E5E5;
45
    padding: 10px 5px 5px 4px;
46
    text-align: left;
47
}
48
 
49
.modal.show table tr:last-child td {
50
    border-bottom: none;
51
    padding-bottom: 20px;
52
}
53
 
54
.modal.show table td {
55
    border-right: 1px solid #F7F7F7;
56
}
57
 
58
.modal.show table td:last-child {
59
    border-right: none;
60
}
61
 
62
.modal.show table tr:first-child td {
63
    padding-top: 20px;
64
}

El punto clave: el selector .modal.show asegura que los estilos se apliquen solo cuando la ventana modal está activa. En estado colapsado, el bloque no afecta la maquetación de la página. Las tablas dentro del bloque modal reciben un tratamiento separado: esquinas redondeadas en las cabeceras, divisores de fila discontinuos y desplazamiento responsivo.

Paso 2: Errores de JavaScript y cómo solucionarlos

El problema más común al trabajar con ventanas modales en WordPress es el error Uncaught ReferenceError: wp is not defined. Ocurre cuando un plugin o script personalizado intenta usar el objeto wp (la API de JavaScript de WordPress) antes de que el núcleo lo haya cargado.

En el caso de WP Post Popup, el problema estaba en la función modalCustomizer(), que obtenía ajustes del administrador mediante wp.customize. Así es como se veía en el código del plugin:

1
// Window load
2
$(window).on('load', function () {
3
    modalCustomizer();
4
});

La solución es simple: comente la llamada si estiliza la ventana mediante su propio CSS:

1
// Window load
2
$(window).on('load', function () {
3
    // modalCustomizer();
4
});

Una regla general para cualquier script modal en WordPress: verifique siempre el orden de carga de las dependencias. Encole sus scripts mediante wp_enqueue_script() con dependencias explícitas de jquery y wp-util. Y nunca inserte <script> directamente en el cuerpo de una entrada; ese es un camino seguro hacia errores como $ is not defined y wp is not defined.

Paso 3: Preloader inteligente con jQuery

El trabajo del preloader es mostrar un indicador de carga mientras el contenido de la entrada se carga vía AJAX. Una vez que los datos llegan, el preloader se desvanece suavemente. Para rastrear cambios en el DOM, usamos la micro-librería jquery-watch (25 líneas de código que monitorizan cambios de atributos y propiedades en un elemento).

CSS para el preloader: un indicador gif de fondo centrado en el bloque modal:

1
/* Modal window preloader */
2
.modal-wrapper.styled .modal {
3
    min-height: 385px;
4
    background-color: white;
5
    background-size: inherit;
6
}
7
 
8
div#modal-content {
9
    background-color: white;
10
}
11
 
12
.modal-wrapper.styled .modal {
13
    background: white url(/wp-content/uploads/2018/02/dollar-glass.gif) center center no-repeat scroll;
14
}
15
 
16
#single-post-meta-manager {
17
    opacity: 0;
18
}
19
 
20
div.modal-content-post-wrapped.load {
21
    opacity: 1;
22
}

Cómo funciona: inicialmente el contenido está oculto (opacity: 0) y el preloader de fondo es visible. Cuando los datos se han cargado, jQuery añade la clase .load, el contenido aparece gradualmente y el preloader desaparece. Aquí está el código JS:

1
jQuery(document).ready(function($) {
2
 
3
    // Smooth appearance of content in the modal window
4
    $("div#single-post-meta-manager").animate({ 'opacity': '1' }).fadeIn('slow');
5
 
6
    // Add class-informer "content loaded"
7
    $("div.modal-content-post-wrapped").addClass("load");
8
 
9
    // Track modal window changes via jquery-watch
10
    $(".modal-wrapper").watch({
11
        properties: "top,left,opacity,display,attr_class",
12
        watchChildren: true,
13
        callback: function (data, i) {
14
            // Set preloader as background image
15
            $('.modal-wrapper.styled .modal').css(
16
                'background',
17
                'white url(/wp-content/uploads/2018/02/dollar-glass.gif) center center no-repeat scroll'
18
            );
19
            // If content is loaded — remove preloader
20
            if ($('.modal-content-post-wrapped').is('.load')) {
21
                $('.modal.show').css('background', 'white');
22
            }
23
        }
24
    });
25
 
26
});

Advertencia importante. El código anterior usa jQuery y el plugin jquery-watch. Antes de insertarlo, asegúrese de que jQuery está encolado y se carga antes que su script. En sitios WordPress modernos jQuery viene con el núcleo, por lo que no son necesarias inclusiones adicionales. Añada el script mediante wp_enqueue_script() en functions.php, no directamente en el cuerpo de la entrada.

Qué hacer si la ventana modal no carga

En más de 6 años trabajando con modales de WordPress he compilado una lista de causas típicas, desde las obvias hasta las más oscuras. Aquí tiene una lista de verificación diagnóstica:

• jQuery no está cargado o está en conflicto. Revise la consola del navegador (F12 → Consola). El error $ is not defined significa que jQuery no está encolado o su script se ejecutó demasiado pronto. Solución: wp_enqueue_script('my-modal', ..., array('jquery')).
• La plantilla de página no emite the_content(). Algunas plantillas personalizadas como page-modal.php usan get_the_content() en lugar de the_content(). La primera no aplica filtros, por lo que los shortcodes y el formato se rompen.
• Conflicto con plugins de caché. Si carga contenido AJAX y el sitio usa WP Rocket o LiteSpeed Cache, desactive la caché para las URLs que la ventana modal obtiene.
• Error CORS al cargar una página externa. El navegador bloquea las peticiones a un dominio diferente. Esto se resuelve mediante un proxy a través de la API REST de WordPress o configurando cabeceras CORS en el servidor de destino.
• Punto de ruptura. En dispositivos móviles la ventana modal a menudo se reemplaza por un enlace directo para que el usuario simplemente navegue a la página. Revise las reglas @media en su CSS: por debajo de 768px la ventana puede no aparecer intencionadamente.

⁉️🤔 Preguntas frecuentes

¿Plugin o código puro: qué debo elegir para una ventana modal?

Si necesita una solución lista en 5 minutos, instale Popup Maker. Cubre la mayoría de los escenarios típicos: formularios de suscripción, vistas previas rápidas, notificaciones. Si tiene un diseño no estándar, lógica AJAX compleja o requisitos de rendimiento (ni un solo kilobyte extra), escríbalo a mano. El código puro da control total a costa de varias horas de desarrollo. Popup Maker añade aproximadamente 40-60 KB de scripts y estilos a una página. Una solución a medida cabe en 2-5 KB, una diferencia de 10 a 30 veces. Para un sitio de alto tráfico, eso es notable.

¿Puedo abrir una página externa en una ventana emergente?

Sí, pero con limitaciones. WordPress no proxyfica contenido de terceros por defecto. Si el sitio de destino no envía la cabecera CORS Access-Control-Allow-Origin: *, el navegador bloqueará la petición AJAX. La solución alternativa es escribir su propio proxy del lado del servidor usando wp_remote_get() o configurar un endpoint de la API REST que obtenga el contenido y lo entregue a su frontend. Para APIs públicas y fuentes confiables, CORS suele estar ya configurado. La API de GitHub y la API de WordPress.org están abiertas para lectura desde cualquier dominio.

¿Cómo afecta el uso de ventanas modales al SEO?

El contenido dentro de una ventana modal cargado vía AJAX es menos visible para los motores de búsqueda que el HTML estático en una página dedicada. La regla es simple: si el contenido importa para el posicionamiento, debe tener su propia página canónica con una URL directa. Use la ventana modal como un punto de entrada adicional, no como un reemplazo de una página. Googlebot ejecuta JavaScript desde 2019, pero la indexación de contenido cargado dinámicamente sigue siendo inestable. Es mejor ir sobre seguro y tener una versión estática.

¿Por qué se cerró WP Post Popup y qué puede reemplazarlo?

El plugin wp-post-modal se cerró en octubre de 2023 debido a una vulnerabilidad de seguridad no resuelta. Si todavía está instalado en su sitio, elimínelo inmediatamente. Como reemplazos, considere Popup Maker (gratuito, universal) o la solución personalizada descrita en este artículo. Ambas opciones son seguras y tienen soporte en 2026.

¿Es jQuery obligatorio para una ventana modal en WordPress?

No, no es obligatorio. El JavaScript nativo moderno (ES6+) cubre todas las operaciones necesarias: fetch() para AJAX, classList para alternar clases CSS y addEventListener para manejar clics. Sin embargo, jQuery todavía está profundamente integrado en el núcleo de WordPress y en la mayoría de los temas, por lo que es más fácil usar lo que ya está cargado que incluir otro framework más.

Ventanas modales en 2026: qué instalar y cómo construir

Si ha llegado a esta sección, tiene tres caminos listos. Popup Maker es para quienes necesitan una solución de «configurar y olvidar». 700 mil instalaciones activas no mienten: el plugin es estable, flexible y gratuito en su versión básica. Modal de Bootstrap 5: si su tema ya funciona con Bootstrap, use el componente nativo y no cree dependencias extra. Código puro es para perfeccionistas y cualquiera que quiera controlar cada línea.

Personalmente, en 2026 elijo el segundo o tercer camino. Los plugins para ventanas modales resuelven el problema aquí y ahora, pero el código personalizado lo resuelve para siempre, sin actualizaciones, vulnerabilidades ni conflictos. Y 2-5 KB en lugar de 40-60 KB por página es un argumento difícil de ignorar.

Pruebe ambos enfoques en un subdominio de pruebas y compare. WordPress ha sobrevivido 20 años precisamente porque ofrece libertad de elección, desde cero código hasta un plugin listo en un minuto.