Tempo lettura WordPress JavaScript: calcolo automatico

Il tempo di lettura WordPress JavaScript può essere calcolato automaticamente contando le parole contenute nell’articolo e dividendo il risultato per una velocità media di lettura. Il metodo richiede un contenitore HTML per mostrare il valore e uno script JavaScript che analizzi il testo dell’articolo. La velocità può essere impostata, per esempio, a 200 parole al minuto e modificata in base al pubblico del sito. L’approccio funziona con la maggior parte dei temi WordPress, purché il selettore del contenuto venga adattato alla struttura HTML utilizzata. L’integrazione più ordinata consiste nell’inserire il codice JavaScript tramite il tema child o tramite un plugin dedicato agli snippet.

Come viene calcolato il tempo di lettura in WordPress

Il tempo di lettura si ottiene dividendo il numero di parole dell’articolo per una velocità media espressa in parole al minuto. Con 800 parole e una velocità di 200 parole al minuto, il risultato è di 4 minuti.

JavaScript può leggere il testo visibile dentro il contenitore dell’articolo attraverso la proprietà textContent. In questo modo vengono considerate le parole dei paragrafi, dei titoli e degli altri elementi testuali presenti nell’area scelta, mentre restano esclusi menu, widget e piè di pagina se si usa il selettore corretto.

Il risultato viene normalmente arrotondato per eccesso, perché anche un articolo molto breve richiede almeno un minuto di lettura. La formula utilizzata dallo script è:

minuti = arrotonda_per_eccesso(numero_di_parole / parole_al_minuto)

Per un sito in lingua italiana, 200 parole al minuto rappresentano un valore configurabile, non una misurazione universale. Articoli tecnici, tutorial con codice e testi ricchi di immagini possono richiedere più tempo rispetto a un contenuto composto soltanto da paragrafi brevi.

Come creare il contenitore HTML del tempo di lettura

Il contenitore HTML deve essere collocato vicino al titolo, alla data o all’inizio del contenuto dell’articolo. Può essere inserito nel template del tema, in un blocco HTML personalizzato oppure nella struttura generata da uno shortcode.

Un esempio compatibile con lo script proposto è il seguente:

<div
class="tempo-lettura"
data-reading-time
data-content-selector=".entry-content"
data-words-per-minute="200"
aria-live="polite">
Tempo di lettura: <span data-reading-time-value>calcolo in corso</span>
</div>

L’attributo data-content-selector indica a JavaScript quale elemento contiene il testo dell’articolo. Il selettore .entry-content è comune nei temi WordPress, ma non è obbligatorio: alcuni temi usano .post-content, .article-content o un identificatore personalizzato.

L’attributo data-words-per-minute permette di modificare la velocità senza cambiare il file JavaScript. Per impostare 180 parole al minuto è sufficiente sostituire 200 con 180.

Se il tema non utilizza la classe .entry-content, il contenitore può riferirsi a un elemento specifico:

<div
class="tempo-lettura"
data-reading-time
data-content-selector="#contenuto-articolo"
data-words-per-minute="200"
aria-live="polite">
Tempo di lettura: <span data-reading-time-value>calcolo in corso</span>
</div>

<article id="contenuto-articolo">
<!-- Contenuto dell'articolo WordPress -->
</article>

L’attributo aria-live="polite" comunica l’aggiornamento alle tecnologie assistive senza interrompere la lettura della pagina. Il testo iniziale “calcolo in corso” viene sostituito automaticamente quando lo script termina l’analisi.

Come aggiungere il JavaScript al tema WordPress

Il codice JavaScript va preferibilmente caricato con wp_enqueue_script() dal file functions.php del tema child. L’inserimento diretto nello stesso file del tema principale può causare la perdita delle modifiche dopo un aggiornamento.

Passo 1: creare il file JavaScript

Nel tema child crea la cartella js, se non esiste, e aggiungi il file tempo-lettura.js. Inserisci questo codice:

document.addEventListener('DOMContentLoaded', function () {
const readingTimeBox = document.querySelector('[data-reading-time]');

if (!readingTimeBox) {
return;
}

const selector =
readingTimeBox.getAttribute('data-content-selector') || '.entry-content';

const content = document.querySelector(selector);

if (!content) {
return;
}

const wordsPerMinute = parseInt(
readingTimeBox.getAttribute('data-words-per-minute'),
10
) || 200;

const text = content.textContent.trim();

if (!text) {
return;
}

const words = text.match(/[p{L}p{N}]+/gu) || [];
const wordCount = words.length;
const minutes = Math.max(1, Math.ceil(wordCount / wordsPerMinute));
const output = readingTimeBox.querySelector('[data-reading-time-value]');

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

L’espressione regolare [p{L}p{N}]+ riconosce sequenze di lettere e numeri, inclusi i caratteri accentati usati nella lingua italiana. Il codice limita l’analisi al contenitore indicato da data-content-selector, evitando di contare il testo del menu o di altri elementi esterni all’articolo.

Passo 2: caricare lo script con functions.php

Nel file functions.php del tema child aggiungi:

function backdigit_carica_tempo_lettura() {
$file = get_stylesheet_directory() . '/js/tempo-lettura.js';

wp_enqueue_script(
'backdigit-tempo-lettura',
get_stylesheet_directory_uri() . '/js/tempo-lettura.js',
array(),
file_exists($file) ? filemtime($file) : null,
true
);
}
add_action('wp_enqueue_scripts', 'backdigit_carica_tempo_lettura');

La funzione get_stylesheet_directory_uri() punta al tema attivo, quindi è adatta anche ai temi child. Il parametro finale true carica lo script nel footer della pagina, mentre filemtime() aggiorna automaticamente la versione del file quando il codice viene modificato e riduce i problemi causati dalla cache del browser.

Per evitare errori, il percorso reale deve corrispondere alla posizione del file. Se tempo-lettura.js viene salvato in una cartella diversa da js, bisogna modificare sia il percorso del file sia il relativo URL.

Passo 3: inserire il contenitore nel template

Il contenitore HTML deve essere stampato nella pagina del singolo articolo, non necessariamente in tutte le pagine del sito. Nei temi classici può essere inserito nel file single.php o in un template part richiamato da single.php.

Un esempio essenziale è:

<div
class="tempo-lettura"
data-reading-time
data-content-selector=".entry-content"
data-words-per-minute="200"
aria-live="polite">
Tempo di lettura:
<span data-reading-time-value>calcolo in corso</span>
</div>

Se il tema usa l’Editor del sito e i blocchi del tema, il contenitore può essere aggiunto con un blocco HTML personalizzato, purché venga mantenuto il selettore corretto dell’area che contiene l’articolo. L’uso del blocco HTML è pratico per una prova, mentre il template del tema offre una posizione più stabile e coerente.

Come personalizzare lo stile e verificare il risultato

Il calcolo del tempo di lettura non richiede CSS, ma una piccola regola può separare l’informazione dal corpo dell’articolo:

.tempo-lettura {
margin: 1rem 0 1.5rem;
color: #555;
font-size: 0.95rem;
}

Dopo aver pubblicato le modifiche, apri un singolo articolo e verifica che il contenitore mostri un valore numerico seguito da “minuto” o “minuti”. Se appare ancora “calcolo in corso”, il selettore definito in data-content-selector probabilmente non corrisponde all’elemento reale del contenuto.

I problemi più frequenti dipendono da questi casi:

  • La classe .entry-content non esiste nel tema attivo.
  • Il file JavaScript è stato salvato in una cartella diversa da quella indicata in functions.php.
  • Una cache di WordPress, del tema o del CDN sta servendo una versione precedente dello script.
  • Il contenitore HTML è presente, ma il contenuto dell’articolo viene caricato dopo l’esecuzione dello script.
  • Il testo dell’articolo è racchiuso in un elemento con un identificatore diverso da quello previsto.

Per controllare la struttura della pagina, usa gli strumenti per sviluppatori del browser e cerca l’elemento che contiene effettivamente paragrafi e titoli dell’articolo. Il selettore copiato dal codice HTML può poi essere inserito nell’attributo data-content-selector.

Il tempo di lettura WordPress JavaScript è più affidabile quando conta soltanto il corpo dell’articolo e usa una velocità dichiarata e modificabile. Un valore mostrato vicino al titolo aiuta il lettore a valutare l’impegno richiesto prima di iniziare la lettura.

Per approfondire, consulta la documentazione ufficiale.

Potrebbe interessarti anche:

FAQ

Funziona con la maggior parte dei temi, ma il selettore .entry-content deve corrispondere all’elemento che contiene il testo dell’articolo. Nei temi con strutture diverse è necessario modificare data-content-selector.

Sì. Modifica il valore dell’attributo data-words-per-minute, per esempio da 200 a 180, senza intervenire sul file JavaScript.

No, se data-content-selector identifica soltanto il contenitore dell’articolo. JavaScript analizza il testo presente nell’elemento indicato dal selettore.

Un blocco HTML può contenere il contenitore, ma WordPress o i plugin di sicurezza possono rimuovere i tag `

Controlla il selettore del contenuto, il percorso del file JavaScript e la cache del sito. Anche l’assenza dell’elemento [data-reading-time] impedisce l’avvio dello script.

Altri articoli di questa serie:

PDF Strumenti PDF gratis Nel browser, senza upload Apri gli strumenti