Una barra avanzamento articolo WordPress CSS mostra graficamente quanto contenuto resta da leggere mentre il visitatore scorre la pagina. Il risultato può essere ottenuto senza JavaScript, senza plugin e senza modificare il modello HTML dell’articolo, usando una pseudo-elemento collegato alla posizione di scorrimento. Il codice seguente crea una barra fissa nella parte superiore della finestra e la fa crescere dall’inizio alla fine del documento. La tecnica utilizza le animazioni guidate dallo scorrimento, supportate dai browser moderni ma non da tutte le versioni meno recenti. Per applicarla basta inserirla nel pannello CSS aggiuntivo di WordPress oppure nel foglio di stile del tema child. Prima della pubblicazione è importante verificare il risultato su desktop, smartphone e con la barra amministrativa di WordPress attiva.

Come funziona una barra di avanzamento CSS in WordPress

La barra di avanzamento usa body::before, una pseudo-elemento CSS che non richiede l’aggiunta di HTML nell’articolo. La pseudo-elemento viene fissata nella parte superiore dello schermo con position: fixed e si ridimensiona orizzontalmente tramite transform: scaleX().

La posizione della pagina viene trasformata nella progressione di un’animazione CSS. La dichiarazione animation-timeline: scroll(root block) collega l’animazione allo scorrimento verticale dell’elemento principale della pagina, mentre animation-range: 0% 100% stabilisce che la barra parte vuota e termina piena.

Questa soluzione è adatta agli articoli WordPress standard perché il selettore body.single-post limita la barra alle pagine dei singoli articoli. WordPress aggiunge normalmente la classe single-post all’elemento body quando visualizza un articolo individuale.

I principali vantaggi sono:

Nessun plugin aggiuntivo da installare o aggiornare.
Nessun file JavaScript da caricare.
Nessuna modifica obbligatoria al contenuto o al template HTML.
Possibilità di personalizzare colore, altezza e posizione con poche proprietà CSS.
Minore complessità rispetto a una soluzione basata su script.

Come aggiungere la barra di avanzamento agli articoli WordPress

Passo 1: aprire il CSS aggiuntivo

Nel pannello di amministrazione di WordPress apri Aspetto > Personalizza > CSS aggiuntivo se il tema utilizza il personalizzatore classico. Nei temi a blocchi il percorso può essere Aspetto > Editor > Stili, quindi il menu con i tre puntini e la voce CSS aggiuntivo.

Il nome dei menu può cambiare in base al tema e alla versione di WordPress. Se il tema non mostra un’area CSS aggiuntivo, il codice può essere inserito nel foglio style.css di un tema child, evitando di modificare direttamente il tema principale.

Passo 2: incollare il codice CSS

Inserisci questo codice nell’area CSS scelta:

@keyframes barra-avanzamento-articolo {
from {
transform: scaleX(0);
}

to {
transform: scaleX(1);
}
}

body.single-post::before {
content: "";
position: fixed;
top: 0;
left: 0;
z-index: 99999;
width: 100%;
height: 4px;
background: #1769e0;
transform: scaleX(0);
transform-origin: left center;
animation-name: barra-avanzamento-articolo;
animation-duration: 1ms;
animation-timing-function: linear;
animation-fill-mode: both;
animation-timeline: scroll(root block);
animation-range: 0% 100%;
pointer-events: none;
}

@supports not (animation-timeline: scroll(root block)) {
body.single-post::before {
display: none;
}
}

body.admin-bar.single-post::before {
top: 32px;
}

@media screen and (max-width: 782px) {
body.admin-bar.single-post::before {
top: 46px;
}
}

@media (prefers-reduced-motion: reduce) {
body.single-post::before {
display: none;
}
}

La proprietà background definisce il colore della barra, mentre height stabilisce il suo spessore. Il valore z-index: 99999 la mantiene sopra la maggior parte degli elementi del tema, ma alcuni temi o plugin possono usare livelli di sovrapposizione ancora più alti.

Il blocco @supports nasconde la barra nei browser che non riconoscono animation-timeline. In questo modo gli utenti non vedono un elemento fisso che resta sempre vuoto. La barra non può mostrare un avanzamento reale nei browser privi del supporto alle animazioni guidate dallo scorrimento senza ricorrere a JavaScript.

Passo 3: salvare e controllare un articolo

Salva il CSS e apri un articolo pubblicato in una finestra privata o dopo aver svuotato la cache. Scorrendo verso il basso, la barra blu dovrebbe aumentare progressivamente fino a occupare tutta la larghezza della finestra.

Il codice opera sullo scorrimento dell’intera pagina, non solo sull’area testuale dell’articolo. Se la pagina contiene una grande intestazione, un menu o sezioni aggiuntive sotto il contenuto, anche questi elementi fanno parte dell’altezza utilizzata per calcolare l’avanzamento.

Come personalizzare colore, spessore e pagine interessate

Per cambiare l’aspetto della barra modifica background: #1769e0. Puoi usare un colore esadecimale del tema, una funzione rgb() o una variabile CSS già definita dal sito. Il colore deve mantenere un contrasto sufficiente con lo sfondo della parte superiore della pagina.

La proprietà height: 4px controlla lo spessore. Un valore compreso tra 3 e 6 pixel è generalmente visibile senza coprire troppo il bordo superiore, ma la scelta dipende dal design del tema e dalla presenza di un menu fisso.

Se preferisci una sfumatura, sostituisci il colore uniforme con un gradiente:

background: linear-gradient(90deg, #1769e0, #7b2cff);

Il selettore body.single-post limita l’effetto agli articoli standard. Per includere anche le pagine WordPress, puoi sostituirlo con body.single-post, body.page, ripetendo la modifica nei selettori presenti nel codice. Per un custom post type, la classe del corpo può essere diversa, ad esempio single-nomeposttype, e deve essere verificata nell’HTML della pagina o nelle classi generate dal tema.

La barra può entrare in conflitto con un header fisso. Se il tema visualizza un menu in alto con una priorità maggiore, aumenta temporaneamente il valore di z-index oppure imposta top su un valore che lasci spazio all’intestazione. È preferibile evitare valori arbitrari prima di controllare il layout su smartphone.

Compatibilità e problemi frequenti

Le animazioni CSS guidate dallo scorrimento dipendono dal supporto del browser. Google Chrome, Microsoft Edge, Safari e Mozilla Firefox hanno introdotto il supporto in versioni differenti e alcune versioni datate possono ignorare animation-timeline. Il blocco @supports gestisce proprio questo caso, disattivando la barra quando la funzione non è disponibile.

Una cache aggressiva può impedire di vedere subito le modifiche. Dopo il salvataggio, svuota la cache di WordPress, quella del plugin di ottimizzazione e la cache del browser, se presenti.

Se la barra appare sempre vuota, controlla che l’articolo sia visualizzato come pagina singola e che il tema mantenga la classe single-post nel tag body. Verifica anche che il browser supporti animation-timeline: scroll(root block).

Se la barra non compare affatto, cerca nel CSS del tema regole che impostano display: none, transform, overflow o un livello z-index molto elevato sulle pseudo-elementi del corpo. Per una verifica rapida puoi rimuovere temporaneamente il blocco @supports, ma senza quel controllo i browser incompatibili potrebbero mostrare un risultato inatteso.

L’opzione prefers-reduced-motion nasconde la barra per chi ha attivato la riduzione dei movimenti nel sistema operativo. La scelta evita un’animazione visiva non richiesta e rispetta le preferenze di accessibilità dell’utente.

Una barra avanzamento articolo WordPress CSS è una soluzione leggera e ordinata quando il sito utilizza browser moderni e non richiede statistiche di lettura più dettagliate.

FAQ

Sì. Il codice usa solo CSS e collega l’animazione alla posizione di scorrimento tramite animation-timeline.

Sì. Sostituisci o affianca body.single-post con body.page nei selettori CSS.

Il browser potrebbe non supportare le animazioni CSS guidate dallo scorrimento. Il blocco @supports la nasconde automaticamente quando animation-timeline non è disponibile.

Sì. Le regole body.admin-bar spostano la barra di 32 pixel su desktop e di 46 pixel sugli schermi mobili.

Sì. Modifica il valore della proprietà background nel selettore body.single-post::before.

Altri articoli di questa serie: