Un banner di avviso chiudibile in WordPress può informare i visitatori senza occupare stabilmente lo schermo. Con HTML si definisce il messaggio, con CSS si cura l’aspetto e con JavaScript si gestisce il pulsante di chiusura. L’uso di localStorage permette di ricordare la scelta nel browser, evitando di mostrare nuovamente l’avviso a ogni caricamento della pagina. Il codice seguente è indipendente dal tema, non richiede librerie esterne e può essere adattato a comunicazioni temporanee, manutenzioni, promozioni o avvisi tecnici.

Cosa serve per creare il banner in WordPress

Il banner avviso WordPress JavaScript è composto da un contenitore HTML, una regola CSS per posizione e grafica e uno script JavaScript che salva la chiusura dell’elemento. Il codice non dipende da jQuery e funziona nei principali browser moderni.

Per inserirlo in WordPress servono:

Un blocco HTML personalizzato per il markup del banner.
Il pannello CSS aggiuntivo del tema oppure il file CSS di un tema child.
Un sistema per aggiungere JavaScript nel piè di pagina, come un tema child o un plugin che consenta di inserire script personalizzati.
Un messaggio breve, leggibile e comprensibile anche da chi usa uno smartphone.

Il pulsante deve avere un’etichetta accessibile. L’attributo aria-label descrive l’azione agli screen reader, mentre role="region" e aria-label identificano il banner come area informativa.

Come aggiungere l’HTML del banner

Passo: inserire il markup in una pagina o nel modello del sito

Apri l’editor di WordPress e aggiungi un blocco HTML personalizzato nel punto in cui desideri visualizzare il banner. Se l’avviso deve comparire su tutte le pagine, inserisci il codice nel modello globale del tema, nell’header o nel footer, in base alla struttura utilizzata.

<div id="site-notice" class="site-notice" role="region" aria-label="Avviso del sito">
<div class="site-notice__content">
<p>
Stiamo effettuando un intervento programmato. Alcune funzioni potrebbero
essere temporaneamente indisponibili.
</p>
</div>

<button
type="button"
class="site-notice__close"
aria-label="Chiudi avviso"
>
<span aria-hidden="true">×</span>
</button>
</div>

Il testo dentro il paragrafo può essere sostituito senza modificare JavaScript o CSS. Per aggiungere un collegamento, inserisci un normale elemento <a> con un testo descrittivo, evitando formule generiche come “clicca qui”.

WordPress può rimuovere il tag <script> dal blocco HTML personalizzato in base ai permessi dell’utente o alle impostazioni di sicurezza. Per questo motivo è preferibile inserire HTML, CSS e JavaScript in aree separate.

Come applicare lo stile con CSS

Passo: incollare le regole nel CSS del tema

Vai in Aspetto > Personalizza > CSS aggiuntivo nei temi che utilizzano il Personalizzatore. Nei temi a blocchi, il percorso può essere Aspetto > Editor > Stili > CSS aggiuntivo, se il tema mette a disposizione questa voce.

.site-notice {
position: fixed;
right: 1rem;
bottom: 1rem;
left: 1rem;
z-index: 9999;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
max-width: 760px;
margin: 0 auto;
padding: 1rem 1.25rem;
color: #ffffff;
background: #1f2937;
border: 1px solid #374151;
border-radius: 0.75rem;
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
font-family: inherit;
}

.site-notice__content {
flex: 1;
}

.site-notice p {
margin: 0;
line-height: 1.5;
}

.site-notice a {
color: #ffffff;
font-weight: 700;
text-decoration: underline;
}

.site-notice__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
flex: 0 0 2.25rem;
padding: 0;
color: #ffffff;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: 50%;
cursor: pointer;
font-size: 1.5rem;
line-height: 1;
}

.site-notice__close:hover,
.site-notice__close:focus-visible {
background: rgba(255, 255, 255, 0.15);
}

.site-notice__close:focus-visible {
outline: 3px solid #fbbf24;
outline-offset: 3px;
}

.site-notice.is-hidden {
display: none;
}

@media (max-width: 600px) {
.site-notice {
right: 0.75rem;
bottom: 0.75rem;
left: 0.75rem;
padding: 0.875rem 1rem;
}
}

La proprietà position: fixed mantiene l’avviso vicino al bordo inferiore della finestra anche durante lo scorrimento. Il valore elevato di z-index riduce il rischio che il banner venga coperto da altri elementi del tema, anche se alcuni page builder possono utilizzare valori ancora più alti.

Il selettore .is-hidden nasconde il banner dopo la chiusura. Il bordo evidenziato con :focus-visible rende il pulsante più facile da individuare con tastiera.

Come ricordare la chiusura con JavaScript

Passo: aggiungere lo script nel footer

Inserisci il seguente codice JavaScript nel footer del tema child oppure in un plugin che consenta di aggiungere codice JavaScript al front-end. Se usi un file separato, salva lo script, ad esempio, come banner-avviso.js e caricalo tramite il tema child.

document.addEventListener("DOMContentLoaded", function () {
const banner = document.querySelector("#site-notice");
const closeButton = document.querySelector(".site-notice__close");
const storageKey = "siteNoticeClosed";

if (!banner || !closeButton) {
return;
}

try {
if (window.localStorage.getItem(storageKey) === "true") {
banner.classList.add("is-hidden");
banner.setAttribute("aria-hidden", "true");
}
} catch (error) {
// Il banner continua a funzionare anche se localStorage non è disponibile.
}

function closeBanner() {
banner.classList.add("is-hidden");
banner.setAttribute("aria-hidden", "true");

try {
window.localStorage.setItem(storageKey, "true");
} catch (error) {
// Nessuna azione: la chiusura resta valida solo per la sessione corrente.
}
}

closeButton.addEventListener("click", closeBanner);

document.addEventListener("keydown", function (event) {
if (
event.key === "Escape" &&
!banner.classList.contains("is-hidden")
) {
closeBanner();
}
});
});

Lo script aspetta il caricamento del DOM, verifica se l’utente aveva già chiuso l’avviso e salva il valore true nella chiave siteNoticeClosed. Il controllo try...catch evita errori quando il browser blocca localStorage, ad esempio in alcune modalità di navigazione privata o per restrizioni di sicurezza.

localStorage conserva la scelta nello specifico browser e dispositivo. La chiusura non viene sincronizzata tra smartphone e computer e viene annullata se l’utente elimina i dati del sito o modifica il dominio.

Passo: aggiornare l’avviso quando cambia il contenuto

Il valore salvato resta valido anche dopo la modifica del testo HTML. Per mostrare nuovamente un nuovo avviso, cambia la chiave nello script, ad esempio da siteNoticeClosed a siteNoticeClosedV2.

const storageKey = "siteNoticeClosedV2";

Cambiare la chiave è utile quando il messaggio riguarda un evento diverso. Senza questa modifica, chi aveva già chiuso il vecchio banner continuerà a non visualizzare quello nuovo.

Verifiche prima della pubblicazione

Dopo aver inserito i tre componenti, apri il sito in una finestra normale del browser e controlla che il banner sia visibile. Premi il pulsante di chiusura, ricarica la pagina e verifica che l’avviso non ricompaia.

Controlla anche questi aspetti:

Il pulsante deve essere raggiungibile usando il tasto Tab.
Il testo deve mantenere un contrasto sufficiente rispetto allo sfondo.
Il banner non deve coprire pulsanti importanti, il menu mobile o i contenuti principali.
La chiusura con il tasto Esc deve funzionare quando l’avviso è visibile.
La visualizzazione deve essere verificata su smartphone con larghezze diverse.
La cache di WordPress, del tema o del CDN deve essere svuotata dopo le modifiche.

Questo componente è adatto a semplici comunicazioni informative. Se il banner riguarda cookie, profilazione o altri consensi regolamentati, localStorage non sostituisce una piattaforma di gestione del consenso e la configurazione deve rispettare la normativa applicabile.

Un banner avviso WordPress JavaScript ben strutturato resta leggero, accessibile e capace di ricordare la scelta dell’utente senza dipendenze esterne.

Potrebbe interessarti anche:

FAQ

Inseriscilo nel footer di un tema child oppure tramite un plugin affidabile che supporti JavaScript personalizzato. Il blocco HTML personalizzato può rimuovere i tag `

Può ricomparire se localStorage è bloccato, se i dati del sito sono stati cancellati o se hai cambiato il nome della chiave. Controlla anche che lo script venga caricato senza errori nella pagina.

No. localStorage salva il valore soltanto nel browser e nel dispositivo utilizzati dall’utente, quindi la chiusura non viene sincronizzata con altri computer o smartphone.

Cambia il valore di storageKey, per esempio da siteNoticeClosed a siteNoticeClosedV2. Il browser considererà il nuovo nome come una scelta mai registrata.

Il codice gestisce la chiusura di un avviso, ma non è una piattaforma completa per il consenso. Per cookie e profilazione servono una gestione conforme alla normativa e, quando necessario, un sistema specifico di consenso.

Altri articoli di questa serie: