Il tempo di lettura WordPress JavaScript si può aggiungere a ogni articolo usando un piccolo riquadro HTML e uno script che conta automaticamente le parole. Il metodo non richiede un plugin dedicato e funziona con il tema a condizione di inserire il codice nei punti corretti. Il valore mostrato viene calcolato sul testo dell’articolo, non su una stima scritta manualmente. La velocità di lettura può essere modificata, perché 200 parole al minuto rappresentano soltanto un valore medio. Il risultato è un elemento leggero, aggiornabile e facilmente personalizzabile con il CSS.

Come funziona il calcolo del tempo di lettura

Lo script JavaScript individua il contenitore del contenuto, recupera il testo visibile, conta le parole e divide il totale per una velocità di lettura impostata. Il risultato viene arrotondato per eccesso, così anche un articolo molto breve mostra almeno un minuto.

La formula utilizzata è:

minuti = arrotondamento per eccesso(numero di parole / parole al minuto)

Nel codice seguente la velocità predefinita è di 200 parole al minuto. Questo valore non è una misurazione universale: articoli tecnici, testi scolastici e contenuti con molti titoli o immagini possono richiedere più tempo rispetto a una prosa semplice.

Il metodo considera il testo contenuto nell’area dell’articolo e ignora il riquadro del tempo di lettura, gli elementi script, gli stili e i contenuti non destinati alla lettura. In questo modo il contatore non include il proprio testo nel calcolo.

Come inserire il riquadro HTML nell’articolo WordPress

Il riquadro può essere inserito con il blocco HTML personalizzato dell’editor a blocchi di WordPress. Il codice seguente contiene un identificativo per il tempo calcolato e un attributo che permette di modificare la velocità senza cambiare subito lo script.

Passo 1: aggiungere il blocco HTML personalizzato

Apri un articolo in modifica, aggiungi il blocco HTML personalizzato e incolla questo codice nel punto in cui vuoi visualizzare il risultato, normalmente subito sotto il titolo o prima del testo principale:

<div class="reading-time-box" id="reading-time-box" data-reading-speed="200" role="status" aria-live="polite">
Tempo di lettura: <span id="reading-time-value">calcolo in corso…</span>
</div>

L’attributo data-reading-speed="200" indica il numero di parole al minuto. Per impostare una stima più lenta puoi usare, per esempio, 180; per una stima più rapida puoi usare 220. Il valore deve rimanere numerico e non deve contenere la sigla delle parole al minuto.

Il blocco HTML personalizzato serve soltanto a creare il contenitore visibile. Il codice JavaScript va inserito separatamente, perché WordPress può rimuovere o non eseguire i tag <script> inseriti direttamente nell’editor, soprattutto in base ai permessi dell’utente e alle impostazioni di sicurezza.

Come aggiungere JavaScript senza usare un plugin dedicato

Il modo più ordinato consiste nel creare un file JavaScript nel tema child e caricarlo con wp_enqueue_script(). Questa soluzione evita di inserire codice eseguibile nell’editor e mantiene separati struttura, stile e comportamento.

Passo 2: creare il file JavaScript

Nel tema child crea il file:

/wp-content/themes/nome-tema-child/assets/js/tempo-lettura.js

Inserisci nel file questo script:

document.addEventListener('DOMContentLoaded', function () {
const output = document.querySelector('#reading-time-value');
const box = document.querySelector('#reading-time-box');

if (!output || !box) {
return;
}

const article = document.querySelector(
'article .entry-content, article .wp-block-post-content, .entry-content, .wp-block-post-content'
);

if (!article) {
output.textContent = 'non disponibile';
return;
}

const speedAttribute = Number(box.dataset.readingSpeed);
const wordsPerMinute = speedAttribute > 0 ? speedAttribute : 200;

const textClone = article.cloneNode(true);

textClone.querySelectorAll(
'.reading-time-box, script, style, noscript, iframe'
).forEach(function (element) {
element.remove();
});

const articleText = (textClone.innerText || textClone.textContent || '').trim();
const words = articleText.match(/S+/g) || [];
const minutes = Math.max(1, Math.ceil(words.length / wordsPerMinute));

output.textContent = minutes + (minutes === 1 ? ' minuto' : ' minuti');
});

Lo script usa selettori comuni dei temi WordPress, tra cui .entry-content e .wp-block-post-content. Il nome della classe può però cambiare in base al tema: se il contenuto dell’articolo utilizza una classe diversa, sostituiscila nella variabile article.

La clonazione del contenuto evita di modificare la pagina originale. Prima del conteggio vengono rimossi il riquadro stesso e gli elementi che non rappresentano testo da leggere. La proprietà innerText privilegia il testo effettivamente visualizzato, mentre textContent funziona come alternativa quando innerText non è disponibile.

Passo 3: caricare il file dal tema child

Apri il file functions.php del tema child e aggiungi questo codice:

function backdigit_carica_tempo_lettura() {
wp_enqueue_script(
'tempo-lettura-articoli',
get_stylesheet_directory_uri() . '/assets/js/tempo-lettura.js',
array(),
'1.0',
true
);
}
add_action('wp_enqueue_scripts', 'backdigit_carica_tempo_lettura');

La funzione wp_enqueue_script() registra il file JavaScript nel modo previsto da WordPress e lo carica nel piè di pagina grazie all’ultimo parametro impostato su true. Il file viene quindi richiesto anche nelle pagine che non contengono il riquadro, ma non produce effetti perché lo script interrompe l’esecuzione quando gli elementi richiesti non esistono.

Per caricare il codice soltanto negli articoli, puoi aggiungere una condizione:

function backdigit_carica_tempo_lettura() {
if (is_singular('post')) {
wp_enqueue_script(
'tempo-lettura-articoli',
get_stylesheet_directory_uri() . '/assets/js/tempo-lettura.js',
array(),
'1.0',
true
);
}
}
add_action('wp_enqueue_scripts', 'backdigit_carica_tempo_lettura');

is_singular('post') limita il caricamento ai normali articoli WordPress. Se usi un tipo di contenuto personalizzato, sostituisci post con lo slug del relativo post type.

Come personalizzare l’aspetto del riquadro

Il riquadro funziona anche senza CSS, ma alcune regole rendono il messaggio più leggibile e distinguibile dal testo dell’articolo. Puoi aggiungerle nel pannello Aspetto > Personalizza > CSS aggiuntivo, se il tema mantiene questa voce, oppure nel foglio di stile del tema child.

.reading-time-box {
margin: 1.5rem 0;
padding: 0.8rem 1rem;
border-left: 4px solid #2271b1;
background: #f1f5f9;
color: #1d2327;
font-size: 0.95rem;
line-height: 1.5;
}

#reading-time-value {
font-weight: 700;
}

La classe .reading-time-box controlla margini, sfondo, bordo e dimensioni del testo. L’elemento con identificativo #reading-time-value contiene soltanto il numero finale e può essere evidenziato senza modificare il resto della frase.

Se il tema utilizza un contenitore diverso per il testo, individua l’elemento con gli strumenti di sviluppo del browser. Cerca una classe applicata all’area principale dell’articolo, quindi sostituisci o aggiungi il selettore nella riga che contiene document.querySelector().

Verifiche prima della pubblicazione

Dopo aver salvato i file, apri un articolo pubblicato in una finestra anonima del browser. Il testo iniziale “calcolo in corso…” dovrebbe essere sostituito dal numero di minuti dopo il caricamento della pagina.

Controlla questi aspetti:

Il riquadro compare soltanto negli articoli in cui è stato inserito il blocco HTML.
Il valore aumenta quando aggiungi una quantità significativa di testo.
Il codice sorgente non mostra errori nella scheda Console degli strumenti per sviluppatori.
La classe del contenitore dell’articolo corrisponde a uno dei selettori usati dallo script.
La cache del tema, del plugin di ottimizzazione o della rete di distribuzione dei contenuti è stata svuotata dopo la modifica.

Il tempo di lettura stimato non deve essere presentato come una durata esatta. È una previsione basata sul numero di parole e sulla velocità scelta, quindi può differire dal tempo reale impiegato da ogni lettore.

Per approfondire il caricamento corretto degli script, puoi consultare la documentazione ufficiale di wp_enqueue_script(). Il riferimento è utile anche per gestire dipendenze, versioni dei file e caricamento condizionale.

Il tempo di lettura WordPress JavaScript offre così una stima automatica, leggera e coerente con la struttura degli articoli.

Potrebbe interessarti anche:

FAQ

Funziona con i temi che usano .entry-content o .wp-block-post-content. Se il tema usa una classe diversa, bisogna modificare il selettore JavaScript dell’area articolo.

È sconsigliato, perché WordPress può filtrare o non eseguire gli script inseriti nell’editor. È più sicuro caricare il file tramite tema child o tramite una gestione centralizzata degli script.

Modifica l’attributo data-reading-speed="200" nel riquadro HTML. Un valore di 180 produce una stima più lenta, mentre 220 produce una stima più rapida.

No, lo script conta il testo contenuto nell’area principale individuata dai selettori dell’articolo. Se il tema usa una struttura insolita, il selettore deve essere adattato.

Il messaggio appare quando JavaScript non trova il riquadro oppure non individua il contenitore dell’articolo. Verifica l’ID HTML e la classe usata dal tema WordPress.

Altri articoli di questa serie: