Cum se afișează timpul estimat de citire și numărul de cuvinte în Divi (cu ReadingTime.js)

Unii oameni (inclusiv eu) apreciază un pic de capete pe lungimea unei postări pe blog sau, mai important, cât timp va dura pentru a citi. O modalitate excelentă de a face acest lucru este să afișați un timp estimat de citire și / sau numărul de cuvinte în partea de sus a postărilor de pe blog. Veți vedea această caracteristică pe bloguri populare precum medium.com. Nu trebuie să fie intruziv sau să distragă atenția utilizatorului de la implicarea în conținut. Dar poate adăuga un impuls UX frumos pentru cei care petrec mult timp devorând conținut de pe web.

În acest tutorial, vă vom arăta o modalitate rapidă și ușoară de a adăuga un timp estimat de citire și un număr de cuvinte la postările dvs. de pe blogul Divi. Biblioteca readingTime.js pe care o vom folosi este simplă, ușoară și ușor de implementat pe site-ul dvs. Divi. În plus, puteți avea mai mult control asupra stilului și plasării timpului de citire și plasării numărului de cuvinte. Toate acestea fără a fi nevoie să vă bazați pe un alt plugin!

Vom adăuga timpul estimat de citire și numărul de cuvinte într-un șablon de postare pe blog folosind Divi Theme Builder. Deci, odată ce este adăugat la șablon, timpul de citire și numărul de cuvinte se vor afișa frumos pe toate postările dvs. de pe site-ul dvs.

Să începem.

Trage cu ochiul

Iată o privire rapidă asupra timpului de citire și a numărului de cuvinte pe care le vom adăuga la un șablon de postare în Divi.

Descărcați aspectul GRATUIT

Pentru a pune mâna pe desenele din acest tutorial, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Cum să încărcați șablonul

Accesați Divi Theme Builder

Pentru a încărca șablonul, navigați la Divi Theme Builder în backend-ul site-ului dvs. WordPress.

Încărcați șablonul site-ului web

Apoi, în colțul din dreapta sus, veți vedea o pictogramă cu două săgeți. Faceți clic pe pictogramă.

Navigați la fila de import, încărcați fișierul JSON pe care ați putut să-l descărcați în această postare și faceți clic pe „Importați șabloane Divi Theme Builder”.

Salvați modificările Divi Theme Builder

După ce ați încărcat fișierul, veți observa un nou șablon cu o nouă zonă de corp care a fost atribuită tuturor postărilor. Salvați modificările Divi Theme Builder imediat ce doriți ca șablonul să fie activat.

Să trecem la tutorial, astfel încât să putem învăța să construim acest lucru de la zero, nu-i așa?

Cum se afișează timpul estimat de citire și numărul de cuvinte în Divi

Ce trebuie să începeți

Pentru a începe, va trebui să faceți următoarele:

1. Navigați la Generatorul de teme Divi
2. Faceți clic pe pictograma de portabilitate din partea dreaptă sus a paginii.
3. Selectați fila Import în fereastra popup Portabilitate.
4. Alegeți / Importați fișierul șablon post Divi Business Consultant (descărcați aici).
5. Faceți clic pe butonul Import

După aceea, veți avea un șablon de postare gata de editat.

Adăugarea textului / HTML la șablonul de postare

Pentru a edita șablonul de postare, faceți clic pe pictograma de editare din zona personalizată a corpului.

În editorul de aspect de postare, adăugați un nou rând cu o singură coloană sub rândul care conține meta date de postare în secțiunea de sus a aspectului.

După ce ați terminat, adăugați un modul text la noul rând.

În setările modulului text, lipiți următorul HTML în interiorul corpului (utilizând fila text):

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

Important de reținut este că eticheta span cu clasa „eta” va afișa în cele din urmă timpul estimat de citire a conținutului postării. Și eticheta span cu clasa „număr de cuvinte” va afișa numărul de cuvinte al conținutului postării.

Stilul textului timpului de citire

Sub fila Design, actualizați stilurile de text după cum urmează:

• Font text: Poppins
• Greutatea fontului textului: Bold
• Stil de text text: TT
• Culoarea textului textului: #ffffff
• Dimensiune text text: 14 px (desktop), 12 px (telefon)
• Spațiere scrisoare text: 2 px
• Alinierea textului: centru

Styling Row

Odată ce setările de text sunt complete, deschideți setările pentru rând și actualizați următoarele:

• Lățimea jgheabului: 1
• Lățime: 100%
• Lățime maximă: 100%

În fila Advanced, actualizați poziția:

• Poziție: Absolută
• Locație: stânga jos

Adăugarea codului

Pentru a adăuga codul necesar pentru a genera timpul estimat de citire și numărul de cuvinte, mai întâi, adăugați un modul de cod sub modulul text.

Vom folosi biblioteca readingtime.js cu un anumit cod personalizat pentru a viza zona de conținut a postării, ora de lectură clasa țintă eta și numărul de cuvinte clasa țintă numărare de cuvinte .

Lipiți următorul cod în blocul de cod, asigurându-vă că înfășurați codul în etichetele de script :

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

Despre Cod

Clasa țintă et_pb_post_content este ceea ce este utilizat pentru a desemna zona de conținut a postării din Divi care deține conținutul postării, astfel încât codul să știe textul de care are nevoie pentru a număra și pentru a estima timpul de citire. De exemplu, dacă ați folosi corpul ca țintă, codul ar calcula tot conținutul / textul de pe întreaga pagină, nu doar conținutul articolului.

ReadingTimeTarget este atribuit clasei eta care corespunde clasei pe care am adăugat-o la eticheta span din modulul text. Și wordCountTarget este atribuit clasei de numărare a cuvintelor pe care o adăugăm la cealaltă etichetă span din modulul text.

De asemenea, nu ezitați să actualizați valoarea cuvintelor pe minut (în prezent 275) pentru a reprezenta ceea ce credeți că ar trebui să fie. Aceasta va afecta desigur timpul de citire afișat. Din ceea ce am cercetat, adultul mediu citește aproximativ 300 de cuvinte pe minut. În plus, puteți actualiza întotdeauna și valoarea limbii. De exemplu, puteți înlocui „en” pentru „fr” dacă doriți ca textul să fie afișat în franceză). Pentru mai multe informații, puteți consulta documentația de pe github.

Salvați aspectul șablonului și Generatorul de teme.

Apoi, navigați la Divi> Opțiuni temă> Integrări.

Apoi adăugați biblioteca în zona de antet cu etichetele de script :

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

Ar trebui să arate așa ...

Rezultat final

Acum tot ce trebuie să faceți este să vizitați o postare de blog live pe site-ul dvs. pentru a vedea timpul estimat de citire și numărul de cuvinte în partea de sus a conținutului postării.

Gânduri finale

Adăugarea unui post estimat de citire și număr de cuvinte la postările de pe blogul dvs. Divi este surprinzător de ușoară. În plus, puteți alege unde doriți ca elementul să fie afișat pe șablonul dvs. de postare și să îl stilizați utilizând setările de proiectare Divi încorporate. Sperăm că acest lucru vă va fi util!

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!