Divi Tips 99

Comment ajouter un temps de lecture et un nombre de vues à ses articles de blog ?

Mis à jour le 23/06/20

1149 mots

4 minutes de lecture
6 commentaires

Cet article contient des liens d’affiliation reconnaissables grâce à l'icône du pourcentage (%) → je suis un lien d'affiliation

Vous avez peut-être remarqué la petite barre à la fin des articles d’Astuces Divi ? Dans cette barre, vous trouvez le nombre de mots de l’article, le temps de lecture, le nombre de vues et un système de vote par applaudissement.

barre d'infos pour articles

Dernièrement, je vous ai envoyé un e-mail (newsletter dont le formulaire d’inscription se situe dans la barre latérale de cet article) pour vous demander si vous seriez intéressé de savoir comment ajouter ces données à vos articles. Vous avez été bien enthousiaste ! Alors voici ma réponse…

1 – Compter le nombre de mots et le temps de lecture avec WP Word Count

WP Word Count
Ajouter le nombre de mots et le temps de lecture

WP Word Count est une extension gratuite (freemium) et légère disponible sur le répertoire officiel des extensions WordPress.

Ses réglages sont simples à réaliser. Après l’installation et l’activation de l’extension, voici ce que vous devez faire :

Parametrage Wp Word Count
  1. Rendez-vous à l’onglet Word Count > Calculate.
  2. Cliquez sur « Calculate Word Count » et patientez. L’extension va récupérer les nombres de mots contenus dans vos publications.
  3. Ensuite, depuis l’onglet Reading Time, vous pouvez renseigner combien de mots correspondent à une minute de lecture. Par défaut, 250 mots sont équivalents à 1 minute de lecture.
  4. Vous pouvez activer l’affichage automatique du temps de lecture au sein de vos publications en cochant simplement la case prévue à cet effet (non utile pour la suite du tuto).
  5. Vous pouvez également insérer un texte qui se placera avant et/ou après le temps de lecture.

Enfin, dans les autres onglets (Top Content, All Content…), vous trouverez des statistiques : combien d’articles, combien de pages, combien de mots, la durée totale de lecture, etc.

2 – Afficher le nombre de vues d’un article avec Post Views Counter

Post View Counter
Ajouter le nombre de vues

Post Views Counter est également un plugin gratuit et facile à paramétrer. Ce qui est pas mal, avec cette extension, c’est que vous pouvez afficher ou non le nombre de vues de façon publique. Cela signifie que vous pouvez installer Post Views Counter à des fins statistiques en back-office.

Une fois l’extension installée et activée, vous trouverez ses options de paramétrage à l’onglet Réglages > Post Views Counter. Ses paramètres sont séparés en 2 onglets : Général et Affichage.

Parametrage Post View Counter
  1. Vous pouvez activer le comptage des vues en fonction des types de publication. Il suffit de cocher. Vous pouvez également décider de la méthode de comptage (PHP, JS, etc.).
  2. Vous pouvez ajouter une nouvelle colonne en back-office. Celle-ci apparaîtra dans la liste des articles (et/ou des pages, selon vos choix cochés) afin d’obtenir les statistiques de vues par publication.
  3. Vous pouvez ajuster les méthodes et intervalles de comptage de vues.
  4. Vous pouvez exclure certains visiteurs du comptage.
  5. Puis, depuis l’onglet Affichage, vous pourrez paramétrer tout ce qui a un rapport avec l’affichage du nombre de vues en front. Par exemple, vous pouvez ajouter un texte à côté du nombre de vues.
  6. Vous pouvez insérer automatiquement le nombre de vues en fonction des types de publication (non utile pour la suite du tuto).
  7. Mais aussi la position de l’affichage automatique, par exemple : avant le contenu.
  8. Enfin, vous pourrez choisir d’afficher ou non une icône à côté du nombre de vues et vous pourrez modifier l’icône Dashicons, qui est la police d’icônes officielle de WordPress.

Voilà, c’est plutôt simple comme extension mais les options sont suffisantes pour agrémenter vos articles de blog.

3 – Ajouter des applaudissements avec WP Applaud

Wp Applaud
Ajouter un système de vote

Le dernier élément que je vous propose d’ajouter au sein de vos articles est un système de vote avec WP Applaud. Mais on aurait très bien pu choisir un système avec étoile comme KK Star Rating, par exemple.

Cette extension est gratuite mais, autant le dire de suite, elle n’est pas souvent mise à jour…

Une fois installée et activée, voici son fonctionnement :

Parametrages Wp Applaud
  1. Rendez-vous dans l’onglet WPApplaud pour cocher les types de publications sur lesquelles vous désirez voir apparaitre le « petit applaudissement ».
  2. Vous pouvez exclure des publications manuellement.
  3. Vous pouvez désactiver le CSS afin d’embarquer le vôtre.
  4. Vous pouvez choisir la méthode de comptage (Ajax et comptage maximal par internaute).
  5. Vous avez la possibilité d’ajouter des titres personnalisés.
  6. Enfin, et c’est ce qui nous intéresse le plus pour la suite du tuto : les autres méthodes d’affichage. Vous pouvez utiliser un shortcode pour afficher l’applaudissement à l’endroit désiré plutôt que de manière automatique.

4 – Intégrer les éléments aux articles de blog avec le Thème Builder

Voilà, maintenant que vous avez installé et paramétré les 3 extensions, je vous propose d’afficher ces informations de lecture au sein de vos articles de blog.

Pour cela, vous aurez besoin d’un modèle d’article créé avec le Thème Builder. Si ce n’est pas encore votre cas, vous pouvez suivre ce tutoriel pour créer une template d’article Divi.

Modele Article Theme Builder
Créez ou modifiez un modèle d’article avec le Thème Builder

Donc vous l’avez compris, soit vous créez, soit vous modifiez votre modèle d’article créé avec le Thème Builder.

1 Ajout Ligne Modele Article
Insérer une nouvelle ligne 4/4

Vous ajoutez une nouvelle ligne (le « + » vert) coupée en 4 colonnes.

2 Ajout Shortcodes

Dans chaque colonne de cette ligne, vous ajoutez un module de texte dans lequel vous placerez les shortcodes adéquats :

  • [ wp-word-count ]* pour afficher le nombre de mots.
  • [ wp-word-count-reading-time ]* pour afficher le temps de lecture.
  • [ post-views ]* pour afficher le nombre de vues.
  • [ wp_applaud ]* pour afficher le système de vote.

*Notez : ne pas copier-coller les shortcodes ci-dessus car j’ai ajouté volontairement un espace entre les crochets afin de permettre leur affichage.

Voilà, c’est aussi simple que cela, voici le résultat :

3 Resultat Infos Lecture
Affichage du nombre de vues et du temps de lecture au sein d’un article Divi

Savez-vous que vous pouvez tester Divi gratuitement ? Rendez-vous sur cette page et cliquez sur « TRY IT FOR FREE »

5 – Ajuster l’affichage avec un peu de CSS

Enfin, il est possible que vous ne soyez pas entièrement satisfait du rendu final, dans ce cas, vous pouvez ajouter un peu de code CSS pour parfaire l’affichage.

Dans l’exemple suivant, j’ai ajouté un module Code avec un peu de CSS mais vous avez de nombreuses autres solutions pour ajouter du code dans Divi.

Ajuster Affichage Infos Articles
Ajuster l’affichage avec du CSS si besoin

Par exemple, vous pouvez ajouter un « before » et un « after » pour afficher du texte autour du temps de lecture. Cela est possible dans les options du plugin WP Word Count mais le visuel n’est pas optimal… Vous pouvez également changer la couleur du compteur de vote (WP Applaud)…

<style>
  .wpwc-reading-time:before { 
    content: "Temps de lecture : "; 
  }
  
    .wpwc-reading-time:after { 
    content: " minutes"; 
  }
  
.wp-applaud-count {
    color: #666666 !important;
}
</style>

Alors, que dites-vous de ces astuces pour agrémenter vos articles de blog avec Divi ?

Ajouter Temps De Lecture Article WordPress
Ajouter Compteur De Vue Articles WordPress

Obtenir Divi

Formation Divi

Ebook Divi PDF

Astuces gratuites

Quiz Divi

Coaching Visio Divi

icon 256x256
Découvrez mon extension wpLingua qui rend vos sites WordPress multilingues ! SEO-Friendly / Automatique / Éditable

6 Commentaires

  1. Harold

    Magnifique tout ça, merci !

  2. Decoster

    Bonjour,
    Merci pour cet article très intéressant.
    Comment procéder pour afficher le nombre de mots et le temps de lecture juste sous le titre de l’article, à la suite des méta.
    J’aurais bien voulu joindre une capture d’écran mais je ne trouve pas le lien ???
    Merci.
    Bien cordialement.

  3. Mandy Cee

    Merci Beaucoup

  4. Elo G

    Bonjour,

    l’extension n’est plus disponible depuis Octobre 2022 pour problème de sécurité.

    Serait-il possible d’avoir un autre tuto ?

    Merci 🙂

  5. Lycia Diaz

    Ah mince, il faut que je trouve une autre solution alors.

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.