Comment afficher le temps de lecture estimé et le nombre de mots dans Divi (avec ReadingTime.js)
Publié: 2020-10-27Certaines personnes (dont moi) apprécient un peu la longueur d'un article de blog ou, plus important encore, le temps qu'il faudra pour le lire. Un excellent moyen de le faire est d'afficher une estimation du temps de lecture et/ou du nombre de mots en haut de vos articles de blog. Vous voyez cette fonctionnalité sur des blogs populaires comme medium.com. Il ne doit pas nécessairement être intrusif ou distraire l'utilisateur de l'interaction avec le contenu. Mais cela peut ajouter un bon coup de pouce UX pour ceux qui passent beaucoup de temps à dévorer du contenu sur le Web.
Dans ce tutoriel, nous allons vous montrer un moyen simple et rapide d'ajouter une estimation du temps de lecture et du nombre de mots à vos articles de blog Divi. La bibliothèque readTime.js que nous allons utiliser est simple, légère et facile à mettre en œuvre sur votre site Divi. De plus, vous pouvez avoir plus de contrôle sur le style et le placement du temps de lecture et du nombre de mots. Tout cela sans avoir à compter sur un autre plugin !
Nous ajouterons le temps de lecture estimé et le nombre de mots à un modèle de publication de blog à l'aide de Divi Theme Builder. Ainsi, une fois ajouté au modèle, le temps de lecture et le nombre de mots s'afficheront bien sur tous vos articles sur votre site.
Commençons.
Aperçu
Voici un aperçu du temps de lecture et du nombre de mots que nous ajouterons à un modèle de publication dans Divi.
Téléchargez la mise en page GRATUITEMENT
Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.
Télécharger gratuitement
Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.
Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !
Comment télécharger le modèle
Aller à Divi Theme Builder
Pour télécharger le modèle, accédez au Divi Theme Builder dans le backend de votre site Web WordPress.
Télécharger un modèle de site Web
Ensuite, dans le coin supérieur droit, vous verrez une icône avec deux flèches. Cliquez sur l'icône.
Accédez à l'onglet d'importation, téléchargez le fichier JSON que vous avez pu télécharger dans cet article et cliquez sur « Importer des modèles Divi Theme Builder ».
Enregistrer les modifications apportées au générateur de thème Divi
Une fois que vous avez téléchargé le fichier, vous remarquerez un nouveau modèle avec une nouvelle zone de corps qui a été attribuée à Tous les messages. Enregistrez les modifications de Divi Theme Builder dès que vous souhaitez que le modèle soit activé.
Passons au didacticiel pour que nous puissions apprendre à construire cette chose à partir de zéro, d'accord ?
Comment afficher le temps de lecture estimé et le nombre de mots dans Divi
Ce dont vous avez besoin pour commencer
Pour commencer, vous devrez effectuer les opérations suivantes :
- Accédez au générateur de thème Divi
- Cliquez sur l'icône de portabilité en haut à droite de la page.
- Sélectionnez l'onglet Importer dans la fenêtre contextuelle Portabilité.
- Choisissez/importez le fichier de modèle de publication Divi Business Consultant (télécharger ici).
- Cliquez sur le bouton Importer
Après cela, vous aurez un modèle de publication prêt à être modifié.
Ajout du texte/HTML au modèle de publication
Pour modifier le modèle de publication, cliquez sur l'icône de modification dans la zone de corps personnalisée.
Dans l'éditeur de mise en page de publication, ajoutez une nouvelle ligne à une colonne sous la ligne contenant les métadonnées de publication dans la section supérieure de la mise en page.
Une fois cela fait, ajoutez un module de texte à la nouvelle ligne.
Dans les paramètres du module de texte, collez le code HTML suivant dans le corps (à l'aide de l'onglet texte) :
<p>Reading Time: <span style="color: #edbb5f;" class="eta"></span> ( Word Count: <span style="color: #edbb5f;" class="word-count"></span> )</p>
La chose importante à retenir est que la balise span avec la classe "eta" affichera éventuellement le temps de lecture estimé du contenu de la publication. Et la balise span avec la classe « word-count » affichera le nombre de mots du contenu de la publication.
Styliser le texte de l'heure de lecture
Sous l'onglet Conception, mettez à jour les styles de texte comme suit :
- Police de texte : Poppins
- Poids de la police de texte : gras
- Style de police de texte : TT
- Texte Couleur du texte : #ffffff
- Taille du texte : 14px (bureau), 12px (téléphone)
- Espacement des lettres du texte : 2px
- Alignement du texte : au centre
Styliser la ligne
Une fois les paramètres de texte terminés, ouvrez les paramètres de la ligne et mettez à jour les éléments suivants :
- Largeur de gouttière : 1
- Largeur : 100 %
- Largeur maximale : 100 %
Dans l'onglet Avancé, mettez à jour la position :
- Position : Absolu
- Emplacement : en bas à gauche
Ajout 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 module de code sous le module de texte.
Nous allons utiliser la bibliothèque readtime.js avec du code personnalisé pour cibler notre zone de contenu de publication, la classe cible de temps de lecture eta et la classe cible de nombre de mots word-count .
Collez le code suivant dans le bloc de code en veillant à envelopper le code dans les balises de script :
(function($) {
$(document).ready(function(){
$('.et_pb_post_content').readingTime({
readingTimeTarget: $('.eta'),
wordCountTarget: $('.word-count'),
wordsPerMinute: 275,
lang: 'en',
});
});
})( jQuery );
À propos du Code
La classe cible et_pb_post_content est ce qui est utilisé pour désigner la zone de contenu de la publication dans Divi qui contient le contenu de la publication afin que le code connaisse le texte dont il a besoin pour compter et estimer le temps de lecture. Par exemple, si vous utilisiez body comme cible, le code calculerait tout le contenu/texte de la page entière, pas seulement le contenu de l'article.
Le ReadingTimeTarget est affecté à la classe eta qui correspond à la classe que nous avons ajoutée à la balise span dans le module de texte. Et le wordCountTarget est affecté à la classe word-count que nous ajoutons à l'autre balise span dans le module de texte.
De plus, n'hésitez pas à mettre à jour la valeur des mots par minute (actuellement 275) pour représenter ce que vous pensez qu'elle devrait être. Cela affectera bien sûr le temps de lecture affiché. D'après mes recherches, l'adulte moyen lit environ 300 mots par minute. De plus, vous pouvez toujours mettre à jour la valeur de la langue. Par exemple, vous pouvez remplacer 'en' par 'fr' si vous voulez que le texte s'affiche en français). Pour plus d'informations, vous pouvez consulter la documentation sur github.
Enregistrez la mise en page du modèle et le générateur de thème.
Ensuite, accédez à Divi > Options du thème > Intégrations.
Ajoutez ensuite la bibliothèque à la zone d'en-tête avec les balises de script :
src="https://cdnjs.cloudflare.com/ajax/libs/reading-time/2.0.0/readingTime.min.js"
Ça devrait ressembler à ça…
Résultat final
Maintenant, tout ce que vous avez à faire est de visiter un article de blog en direct sur votre site pour voir le temps de lecture estimé et le nombre de mots en haut du contenu de l'article.
Dernières pensées
Ajouter un temps de lecture estimé et un nombre de mots à vos articles de blog Divi est étonnamment facile. De plus, vous pouvez choisir où vous souhaitez afficher l'élément sur votre modèle de publication et le styler à l'aide des paramètres de conception Divi intégrés. Espérons que cela vous sera utile !
J'ai hâte de vous entendre dans les commentaires.
À votre santé!