Come visualizzare il tempo di lettura stimato del post e il conteggio delle parole in Divi (con ReadingTime.js)

Alcune persone (me compreso) apprezzano un piccolo avvertimento sulla lunghezza di un post sul blog o, cosa più importante, quanto tempo ci vorrà per leggere. Un ottimo modo per farlo è visualizzare un tempo di lettura stimato e/o il conteggio delle parole nella parte superiore dei post del tuo blog. Puoi vedere questa funzione su blog popolari come medium.com. Non deve essere invadente o distrarre l'utente dall'interazione con il contenuto. Ma può aggiungere una bella spinta UX per coloro che passano molto tempo a divorare contenuti sul web.

In questo tutorial, ti mostreremo un modo semplice e veloce per aggiungere un tempo di lettura stimato e il conteggio delle parole ai tuoi post sul blog Divi. La libreria readingTime.js che useremo è semplice, leggera e facile da implementare sul tuo sito Divi. Inoltre puoi avere un maggiore controllo sullo stile e sul posizionamento del tempo di lettura e sul posizionamento del conteggio delle parole. Tutto questo senza dover fare affidamento su un altro plugin!

Aggiungeremo il tempo di lettura stimato e il conteggio delle parole a un modello di post di blog utilizzando Divi Theme Builder. Quindi, una volta aggiunto al modello, il tempo di lettura e il conteggio delle parole verranno visualizzati correttamente su tutti i tuoi post in tutto il tuo sito.

Iniziamo.

Sbirciata

Ecco una rapida occhiata al tempo di lettura e al conteggio delle parole che aggiungeremo a un modello di post in Divi.

Scarica il layout GRATUITAMENTE

Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Come caricare il modello

Vai a Divi Theme Builder

Per caricare il modello, vai al Divi Theme Builder nel backend del tuo sito Web WordPress.

Carica modello di sito web

Quindi, nell'angolo in alto a destra, vedrai un'icona con due frecce. Fare clic sull'icona.

Passa alla scheda di importazione, carica il file JSON che sei stato in grado di scaricare in questo post e fai clic su "Importa modelli Divi Theme Builder".

Salva le modifiche al generatore di temi Divi

Una volta caricato il file, noterai un nuovo modello con una nuova area del corpo che è stata assegnata a Tutti i post. Salva le modifiche di Divi Theme Builder non appena desideri che il modello venga attivato.

Passiamo al tutorial così possiamo imparare a costruire questa cosa da zero, vero?

Come visualizzare il tempo di lettura stimato del post e il conteggio delle parole in Divi

Cosa ti serve per iniziare

Per iniziare, dovrai fare quanto segue:

1. Passa a Divi Theme Builder
2. Fare clic sull'icona della portabilità in alto a destra della pagina.
3. Seleziona la scheda Importa nel popup Portabilità.
4. Scegli/Importa il file modello di post di Divi Business Consultant (scarica qui).
5. Fare clic sul pulsante Importa

Dopodiché, avrai un modello di post pronto per la modifica.

Aggiungere il testo/HTML al modello di post

Per modificare il modello di post, fai clic sull'icona di modifica nell'area del corpo personalizzata.

Nell'editor del layout del post, aggiungi una nuova riga a una colonna sotto la riga contenente i metadati del post nella sezione superiore del layout.

Una volta fatto, aggiungi un modulo di testo alla nuova riga.

Nelle impostazioni del modulo di testo, incolla il seguente codice HTML all'interno del corpo (utilizzando la scheda testo):

<p>Reading Time: <span style="color: #edbb5f;" class="eta"></span> ( Word Count: <span style="color: #edbb5f;" class="word-count"></span> )</p>

La cosa importante da ricordare è che il tag span con la classe “eta” alla fine visualizzerà il tempo di lettura stimato del contenuto del post. E il tag span con la classe "word-count" mostrerà il conteggio delle parole del contenuto del post.

Disegnare il testo del tempo di lettura

Nella scheda Progettazione, aggiorna gli stili di testo come segue:

• Carattere del testo: Poppins
• Peso del carattere del testo: grassetto
• Stile del carattere del testo: TT
• Colore del testo del testo: #ffffff
• Testo Dimensioni testo: 14 px (desktop), 12 px (telefono)
• Spaziatura delle lettere del testo: 2px
• Allineamento del testo: centro

Disegnare la riga

Una volta completate le impostazioni del testo, apri le impostazioni per la riga e aggiorna quanto segue:

• Larghezza grondaia: 1
• Larghezza: 100%
• Larghezza massima: 100%

Nella scheda Avanzate, aggiorna la posizione:

• Posizione: Assoluta
• Posizione: in basso a sinistra

Aggiunta del codice

Per aggiungere il codice necessario per generare il tempo di lettura stimato e il conteggio delle parole, aggiungere innanzitutto un modulo di codice sotto il modulo di testo.

Utilizzeremo la libreria readingtime.js con del codice personalizzato per indirizzare l'area del contenuto del post, la classe di destinazione del tempo di lettura eta e la classe di destinazione del conteggio delle parole word-count .

Incolla il seguente codice nel blocco di codice assicurandoti di avvolgere il codice nei tag di script :

(function($) {
$(document).ready(function(){
$('.et_pb_post_content').readingTime({
readingTimeTarget: $('.eta'),
wordCountTarget: $('.word-count'), 
wordsPerMinute: 275,
lang: 'en',
});
}); 
})( jQuery );

Informazioni sul codice

La classe di destinazione et_pb_post_content è ciò che viene utilizzato per designare l'area del contenuto del post in Divi che contiene il contenuto del post in modo che il codice conosca il testo di cui ha bisogno per contare e stimare il tempo di lettura. Ad esempio, se si utilizzasse il corpo come destinazione, il codice calcolerebbe tutto il contenuto/testo dell'intera pagina, non solo il contenuto dell'articolo.

Il readingTimeTarget è assegnato alla classe eta che corrisponde alla classe che abbiamo aggiunto al tag span nel modulo di testo. E il wordCountTarget è assegnato alla classe word-count che aggiungiamo all'altro tag span nel modulo di testo.

Inoltre, sentiti libero di aggiornare il valore delle parole al minuto (attualmente 275) per rappresentare ciò che pensi dovrebbe essere. Questo ovviamente influenzerà il tempo di lettura visualizzato. Da quello che ho studiato, l'adulto medio legge circa 300 parole al minuto. Inoltre puoi sempre aggiornare anche il valore della lingua. Ad esempio, puoi sostituire "en" con "fr" se desideri che il testo venga visualizzato in francese). Per maggiori informazioni puoi consultare la documentazione su github.

Salva il layout del modello e il generatore di temi.

Quindi, vai a Divi> Opzioni tema> Integrazioni.

Quindi aggiungi la libreria all'area dell'intestazione con i tag di script :

src="https://cdnjs.cloudflare.com/ajax/libs/reading-time/2.0.0/readingTime.min.js"

Dovrebbe sembrare come questo…

Risultato finale

Ora tutto ciò che devi fare è visitare un post sul blog dal vivo sul tuo sito per vedere il tempo di lettura stimato e il conteggio delle parole nella parte superiore del contenuto del post.

Pensieri finali

Aggiungere un tempo di lettura stimato e il conteggio delle parole ai post del tuo blog Divi è sorprendentemente facile. Inoltre puoi scegliere dove vuoi che l'elemento venga visualizzato sul tuo modello di post e modellarlo utilizzando le impostazioni di progettazione Divi integrate. Speriamo che questo torni utile!

Non vedo l'ora di sentirti nei commenti.

Saluti!