💡 Come aggiungere una finestra popup in WordPress

• Scegli il tuo approccio: il plugin Popup Maker per una partenza rapida o codice personalizzato per il controllo totale
• Installa Popup Maker da «Plugin → Aggiungi nuovo» e attivalo
• Crea un nuovo popup, imposta il contenuto dell'articolo o della pagina e configura un trigger (clic, timer o scroll)
• Per una soluzione personalizzata, aggiungi gli stili CSS per la finestra modale al file del tema o al personalizzatore
• Carica il file JavaScript tramite wp_enqueue_script() con una dipendenza da jquery, verificando l'ordine di caricamento
• Apri la pagina e testa il popup nel browser monitorando la console per eventuali errori

Cosa sono le finestre modali e perché il tuo sito WordPress ne ha bisogno

Una finestra modale è un blocco di contenuto popup che si apre sopra la pagina oscurando lo sfondo. L'utente non lascia mai l'URL corrente ma visualizza informazioni aggiuntive: testo di un articolo, un modulo, un video o una galleria.

Per un sito WordPress, le finestre modali risolvono tre problemi specifici. Primo, una dashboard utente: invece di una pagina profilo separata, mostri impostazioni, ordini o messaggi in un blocco popup. Secondo, anteprima rapida dei contenuti: un visitatore clicca su una scheda prodotto o un teaser di articolo e vede il contenuto completo senza ricaricare la pagina. Terzo, moduli di acquisizione lead: i moduli di iscrizione, registrazione e contatto appaiono esattamente quando il visitatore è pronto ad agire.

Il vantaggio chiave di una finestra modale rispetto a una pagina separata è la velocità. Non c'è attesa per il caricamento completo di una pagina con header, sidebar e footer. Carichi solo the_content(), contenuto puro. Questo fa risparmiare tempo all'utente e risorse al server.

WP Post Popup: perché il plugin veterano ha lasciato la scena

Fino al 2023, una delle soluzioni più popolari per le finestre modali in WordPress era il plugin WP Post Popup (wp-post-modal). Poteva trasformare qualsiasi articolo, pagina o custom post type in un popup; bastava specificare un URL con un parametro. Il plugin funzionava con shortcode, Contact Form 7 e BuddyPress; poteva caricare pagine esterne e persino mostrare selettivamente un div specifico da un altro sito.

Nell'ottobre 2023, il plugin è stato chiuso. Il motivo è stata una vulnerabilità di sicurezza. La pagina su WordPress.org ora mostra lo stato «Questo plugin è stato chiuso… Motivo: Problema di sicurezza». Da allora non è più disponibile per il download e le installazioni attive sono scese a zero.

Ma le idee alla base di WP Post Popup non sono scomparse. Il compito di mostrare contenuti in un popup senza ricaricare la pagina è ancora risolvibile oggi, e attraverso due strade: plugin moderni e codice puro.

3 Modi moderni per aggiungere una finestra modale in WordPress

Ecco le opzioni attuali per il 2026, dai plugin già pronti a una soluzione completamente personalizzata.

Popup Maker è il plugin gratuito più popolare per i popup: oltre 700.000 installazioni attive e una valutazione di 4,9 su WordPress.org. Crea qualsiasi tipo di popup, da finestre modali con contenuto a pannelli a scorrimento e banner. I trigger includono clic, timer, scroll o intento di uscita. Se hai bisogno di una soluzione rapida senza codice, questo è il miglior punto di partenza.

Bootstrap 5 è integrato in molti temi moderni. Il suo componente Modal nativo funziona da subito: responsività, animazione, chiusura con Escape e clic fuori dalla finestra. Basta includere Bootstrap nel tema e usare il markup già pronto con gli attributi data.

Codice puro è la strada per chi ha bisogno del controllo totale su ogni pixel e comportamento della finestra. Nessuno script extra, dipendenza o conflitto con altri plugin. Questo è il metodo che analizzeremo passo dopo passo.

Il video qui sopra è un tutorial pratico per creare una finestra modale personalizzata in WordPress da zero: 12 minuti di codice puro con un risultato pronto alla fine.

Guida passo passo: costruire una finestra modale da zero

Questo metodo funziona su qualsiasi sito WordPress, indipendentemente dal tema. Scriveremo un framework CSS per stilizzare il blocco popup, correggeremo un tipico errore JavaScript e aggiungeremo un preloader intelligente in modo che il contenuto appaia fluidamente, senza sfarfallii.

Passo 1: framework CSS per la finestra modale

Lo stile di base realizza tre cose: centra la finestra sullo schermo, oscura lo sfondo e adatta le tabelle all'interno del blocco modale. Ecco il codice funzionante per il file style.css del tuo tema o la scheda «CSS aggiuntivo» nel personalizzatore:

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
}

Il punto chiave: il selettore .modal.show assicura che gli stili si applichino solo quando la finestra modale è attiva. Nello stato compresso, il blocco non influisce sul layout della pagina. Le tabelle all'interno del blocco modale ricevono un trattamento separato: angoli arrotondati sulle intestazioni, divisori di riga tratteggiati e scorrimento reattivo.

Passo 2: errori JavaScript e come risolverli

Il problema più comune quando si lavora con le finestre modali in WordPress è l'errore Uncaught ReferenceError: wp is not defined. Si verifica quando un plugin o uno script personalizzato cerca di usare l'oggetto wp (l'API JavaScript di WordPress) prima che il core lo abbia caricato.

Nel caso di WP Post Popup, il problema era nella funzione modalCustomizer(), che recuperava le impostazioni dall'amministrazione tramite wp.customize. Ecco come appariva nel codice del plugin:

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

La soluzione è semplice: commenta la chiamata se stili la finestra tramite il tuo CSS personale:

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

Una regola generale per qualsiasi script modale in WordPress: verifica sempre l'ordine di caricamento delle dipendenze. Carica i tuoi script tramite wp_enqueue_script() con dipendenze esplicite da jquery e wp-util. E non inserire mai <script> direttamente nel corpo di un articolo; quella è la strada sicura verso errori come $ is not defined e wp is not defined.

Passo 3: preloader intelligente con jQuery

Il compito del preloader è mostrare un indicatore di caricamento mentre il contenuto dell'articolo viene caricato via AJAX. Una volta che i dati arrivano, il preloader scompare gradualmente. Per monitorare i cambiamenti del DOM, usiamo la micro-libreria jquery-watch (25 righe di codice che monitorano i cambiamenti di attributi e proprietà su un elemento).

CSS per il preloader: un'indicatore gif di sfondo centrato nel blocco modale:

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
}

Come funziona: inizialmente il contenuto è nascosto (opacity: 0) e il preloader di sfondo è visibile. Quando i dati sono stati caricati, jQuery aggiunge la classe .load, il contenuto appare in dissolvenza e il preloader scompare. Ecco il codice 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
});

Avvertenza importante. Il codice sopra usa jQuery e il plugin jquery-watch. Prima di inserirlo, assicurati che jQuery sia caricato e venga eseguito prima del tuo script. Nei siti WordPress moderni jQuery è incluso nel core, quindi non sono necessarie inclusioni aggiuntive. Aggiungi lo script tramite wp_enqueue_script() in functions.php, non direttamente nel corpo dell'articolo.

Cosa fare se la finestra modale non si carica

In oltre 6 anni di lavoro con le modali di WordPress ho compilato una lista di cause tipiche, da quelle ovvie a quelle più oscure. Ecco una checklist diagnostica:

• jQuery non è caricato o è in conflitto. Controlla la console del browser (F12 → Console). L'errore $ is not defined significa che jQuery non è stato caricato o il tuo script è stato eseguito troppo presto. Soluzione: wp_enqueue_script('my-modal', ..., array('jquery')).
• Il template di pagina non produce in output the_content(). Alcuni template personalizzati come page-modal.php usano get_the_content() invece di the_content(). Il primo non applica i filtri, quindi shortcode e formattazione si rompono.
• Conflitto con i plugin di caching. Se carichi contenuti AJAX e il sito usa WP Rocket o LiteSpeed Cache, disabilita la cache per gli URL che la finestra modale recupera.
• Errore CORS quando si carica una pagina esterna. Il browser blocca le richieste verso un dominio diverso. Questo si risolve facendo da proxy tramite l'API REST di WordPress o configurando gli header CORS sul server di destinazione.
• Breakpoint. Sui dispositivi mobili la finestra modale è spesso sostituita da un link diretto in modo che l'utente navighi semplicemente alla pagina. Controlla le regole @media nel tuo CSS: sotto i 768px la finestra potrebbe non apparire intenzionalmente.

⁉️🤔 Domande frequenti

Plugin o codice puro: cosa dovrei scegliere per una finestra modale?

Se hai bisogno di una soluzione pronta in 5 minuti, installa Popup Maker. Copre la maggior parte degli scenari tipici: moduli di iscrizione, anteprime rapide, notifiche. Se hai un design non standard, una logica AJAX complessa o requisiti di performance (nemmeno un kilobyte extra), scrivilo a mano. Il codice puro dà il controllo totale al costo di qualche ora di sviluppo. Popup Maker aggiunge circa 40-60 KB di script e stili a una pagina. Una soluzione personalizzata sta in 2-5 KB, una differenza da 10 a 30 volte. Per un sito ad alto traffico, è una differenza che si nota.

Posso aprire una pagina esterna in una finestra popup?

Sì, ma con limitazioni. WordPress non fa da proxy ai contenuti di terze parti per impostazione predefinita. Se il sito di destinazione non invia l'header CORS Access-Control-Allow-Origin: *, il browser bloccherà la richiesta AJAX. La soluzione alternativa è scrivere il proprio proxy lato server usando wp_remote_get() o impostare un endpoint dell'API REST che recuperi il contenuto e lo consegni al frontend. Per API pubbliche e fonti fidate, il CORS è tipicamente già configurato. L'API di GitHub e l'API di WordPress.org sono aperte in lettura da qualsiasi dominio.

In che modo l'uso delle finestre modali influisce sulla SEO?

Il contenuto all'interno di una finestra modale caricato via AJAX è meno visibile ai motori di ricerca rispetto all'HTML statico su una pagina dedicata. La regola è semplice: se il contenuto è importante per il posizionamento, dovrebbe avere la propria pagina canonica con un URL diretto. Usa la finestra modale come punto di ingresso aggiuntivo, non come sostituto di una pagina. Googlebot esegue JavaScript dal 2019, ma l'indicizzazione dei contenuti caricati dinamicamente è ancora instabile. È meglio andare sul sicuro e avere una versione statica.

Perché WP Post Popup è stato chiuso e cosa può sostituirlo?

Il plugin wp-post-modal è stato chiuso nell'ottobre 2023 a causa di una vulnerabilità di sicurezza non risolta. Se è ancora installato sul tuo sito, rimuovilo immediatamente. Come sostituti, considera Popup Maker (gratuito, universale) o la soluzione personalizzata descritta in questo articolo. Entrambe le opzioni sono sicure e supportate nel 2026.

jQuery è necessario per una finestra modale in WordPress?

No, non è necessario. Il JavaScript nativo moderno (ES6+) copre tutte le operazioni necessarie: fetch() per AJAX, classList per attivare/disattivare le classi CSS e addEventListener per gestire i clic. Tuttavia, jQuery è ancora profondamente integrato nel core di WordPress e nella maggior parte dei temi, quindi è più facile usare ciò che è già caricato piuttosto che includere un altro framework.

Finestre modali nel 2026: cosa installare e come costruirle

Se sei arrivato a questa sezione, hai tre strade pronte. Popup Maker è per chi ha bisogno di una soluzione «imposta e dimentica». 700 mila installazioni attive non mentono: il plugin è stabile, flessibile e gratuito nella sua versione base. Bootstrap 5 Modal: se il tuo tema gira già su Bootstrap, usa il componente nativo e non creare dipendenze extra. Codice puro è per i perfezionisti e chiunque voglia controllare ogni riga.

Personalmente, nel 2026 scelgo la seconda o la terza strada. I plugin per le finestre modali risolvono il problema qui e ora, ma il codice personalizzato lo risolve per sempre, senza aggiornamenti, vulnerabilità o conflitti. E 2-5 KB invece di 40-60 KB per pagina è un argomento difficile da ignorare.

Prova entrambi gli approcci su un sottodominio di test e confronta. WordPress è sopravvissuto 20 anni proprio perché offre libertà di scelta, da zero codice a un plugin già pronto in un minuto.