Comment voir le temps estimé après lecture et le nombre de mots dans Divi (en utilisant readingtime.js)
Ajouter une nouvelle ligne dans la colonne sous la ligne en haut de la mise en page qui contient les métadonnées du message.
Une fois terminé, ajoutez le formulaire texte à la nouvelle ligne. Dans les paramètres du formulaire texte, collez le code HTML suivant dans le corps (en utilisant l’onglet texte): Temps de lecture: (nombre de mots: ) Il est important de se rappeler que la balise span avec la classe \ Dessinez le texte du temps de lecture sur l’onglet conception et mettez à jour le style de texte comme suit: police de texte: Poppins poids de la police de texte: gras style de police de texte: tt couleur du texte: # FFFFFF taille du texte: 14 Px (bureau), 12 Px (téléphone) Espacement des lettres de texte: 2px alignement du texte: Centre Dessinez la ligne après avoir terminé la configuration du texte, ouvrez la configuration de la ligne et mettez à jour ce qui suit: largeur de la marge: 1 largeur: 100% largeur maximale: 100% Dans l’onglet avancé, mettre à jour l’emplacement:Position: absolue: en bas à gauche
Ajouter du Code pour ajouter le Code nécessaire pour générer le temps de lecture estimé et le nombre de mots, ajoutez d’abord un formulaire de code sous le formulaire texte. Nous utiliserons la Bibliothèque reading time. JS utilise un code personnalisé pour gérer la zone de contenu du message, le temps de lecture eta de la classe cible et le nombre de mots de la classe cible. Collez le code suivant dans le bloc de code et assurez – vous que le Code est enveloppé dans l’étiquette du script: (fonction ($)
USD (file). Ready (Function () {
$(\
Readingtimetarget: $(‘age’),
Wordcounttarget: $(\
Nombre de mots:
Langue: \
});
});
}) (jquery);
Informations sur le Code
La classe cible et _ pb post content est utilisée pour spécifier la zone de contenu du message dans Divi qui contient le contenu du message afin que le Code sache quel texte il doit calculer et estimer le temps de lecture. Par exemple, si vous utilisez le corps comme destination, le Code calcule tout le contenu \/ texte de la page entière, pas seulement le contenu de l’article. Readingtimetarget est assigné à la classe ETA, qui correspond à la classe que nous ajoutons sous forme de texte à la balise span. Wordcounttarget est assigné à la classe de comptage de mots que nous ajoutons sous forme de texte à une autre balise span.
De plus, la valeur du mot par minute (actuellement 275) peut être mise à jour à tout moment pour indiquer ce que vous pensez être. Cela affecte évidemment le temps de lecture affiché. Selon mes recherches, les adultes lisent en moyenne 300 mots par minute. Vous pouvez également mettre à jour les valeurs linguistiques à tout moment. Par exemple, si vous voulez que le texte apparaisse en français, vous pouvez remplacer \
Puis ajoutez la bibliothèque à la zone d’en – tête en utilisant les balises de script: src = \
Ça devrait être comme ça… Résultat final maintenant, tout ce que vous avez à faire est d’accéder à un billet de blog en direct sur le site et de voir le temps de lecture estimé et le nombre de mots en haut du contenu.
Conception intégrée du zonage. J’espère que ça marchera! J’ai hâte d’entendre vos commentaires. Bonjour!