vendredi 22 mai 2015
Home / Wordpress / Comment afficher une estimation du temps de lecture d’un article dans WordPress.
672x476_272

Comment afficher une estimation du temps de lecture d’un article dans WordPress.

Voici une petite fonction, bien pratique, qui indiquera à vos visiteurs une estimation du temps de lecture de vos articles. Ils pourront si ils sont pressés le mettre en favoris si la durée de lecture est trop longue ou alors le consulter. Voici une bonne expérience utilisateurs auprès de vos lecteurs.

 temp_lecture_1

Dans cet article nous détaillerons le code utilisé, puis nous verrons comment l’intégrer dans un thème WordPress. Ce thème sera celui que j’utilise actuellement à savoir Backstreet.

Tout d’abord voici le code de la fonction qui permet d’afficher le temps estimé de lecture.

J’ai trouvé ce code sur l’excellent site http://www.geekpress.fr/ et je l’ai adapté à mes besoins.

 temp_lecture_2

Voyons ensemble quelques points:

  • Ligne 4: La fonction add_filter permet de modifier à la volée tous les articles de son blog. Le premier argument de la fonction permet de spécifier que l’on veut ajouter un file à the_content (qui correspond au contenu de votre article), le deuxième argument permet d’indiquer quelle fonction va effectuer le traitement sur the_content.

Ici pour mes besoins je l’ai désactivé, mais si vous voulez faire apparaître la durée de lecture à l’intérieur de votre article, vous devrez « décommenter » cette ligne.

  • Ligne 7: J’affiche juste la durée de lecture sur les articles et non sur les pages par exemple.
  • Ligne 10: Avant de compter les mots de l’article je supprime toutes les balises HTML et PHP de l’article avec la fonction strip_tags(). En effet puisque nous analysons la source de l’article nous avons tous les tags HTML, cela pourrait induire en erreur notre calcul en prenant en compte tous les mots y compris les balises html par exemple et non pas seulement ceux de l’article.
  • Ligne 11 : Je compte le nombre de mot de mon article avec la fonction str_word_count().
  • Ligne 16 : Par défaut dans le script la lecture d’un mot est d’une seconde, cela peut paraître élevé. Pour ma part j’ai mis 0,8. En prenant en compte l’analyse des images et après avoir fait plusieurs tests sur mes articles cela donne un ordre de grandeur. Vous pouvez l’ajuster comme bon vous semble, attention de rester cohérent.
  • Ligne 18 : Si vous devez rajouter la durée de lecture dans le contenu de l’article c’est ici que ça se passe.

Voilà pour ces quelques explications. A vous maintenant de l’adapter à vos besoins.

Dans cette deuxième partie nous allons voir comment l’intégrer la durée de lecture en dessous du titre de l’article. Dans tous les thèmes type magazine nous retrouvons l’auteur, la date, les commentaires, le nombre de vues, … en dessous le titre de l’article. Ici nous rajouterons la durée de lecture comme ci-dessous.

 temp_lecture_3

Je ne sais pas si vous l’aviez remarqué, car cet indicateur est en place depuis quelques temps sur le blog. Maintenant lorsque vous cliquez sur un article vous avez un estimation du temps moyen pour lire celui-ci.

Pour arriver à ce résultat, vous devez trouver une icône sympa, en restant dans la charte graphique de votre thème. Vous avez des ressources très pro payantes et gratuites sur ce site : http://www.pixeden.com/. Pour ma part j’ai pris le Soft Media Icons Set Vol 2.

Après avoir copié l’image dans le répertoire idoine, vous devez modifier votre fichier style.css, pour rajouter une rubrique dans l’entête de votre titre.

temp_lecture_4

 Pour mon thème Backstreet, j’ai du rajouter cet élément css.

[css].single-clock { float:left; background:url(images/duree.png) no-repeat center left; padding-left:18px; margin-left:16px; color:#666; }[/css]

temp_lecture_5

En suite vous devez modifier le fichier single.php qui affiche le contenu de votre article et rajouter cette ligne en dessous le titre :

[php] if(function_exists(‘jm_estimated_time_to_read_post’)) { jm_estimated_time_to_read_post(get_the_content()); } [/php]

Avant d’utiliser la fonction je teste si elle existe avec la fonction function_exists (peut éviter des plantages ou des erreurs), puis ensuite j’appelle la fonction avec en paramètre le contenu de l’article en cours get_the_content().

 temp_lecture_6

Voilà le bouton Durée apparaît maintenant uniquement sur vos articles. Pratique non.

Source: GeekPress.fr

That’s All.

  

12 Potins

  1. Bonjour,

    Je me suis basé sur une moyenne, je ai pas les sources en tête. En ce qui concerne mon blog généralement les visiteurs lisent les tutoriels « en travers » donc leur lecture sera encore plus rapide. Ensuite à vous d’adapter en fonction de vos publications.

    Voici quelques liens qui pourront peut-être vous aider :
    http://www.readingsoft.com/fr/test.html
    http://www.mes-exams.com/lecture-rapide/lecture-rapide-test.htm

    Cordialement.

  2. Bonjour,

    Le temps de lecture moyen est estimé entre 200 et 300 mots par minute mais les tests portent, il me semble, sur la lecture d’un livre. Vous avez configuré le script à 0,8 seconde par mot soit 75 mots par minute. Cette configuration se base-t-elle sur votre propre expérience (le temps de lecture d’un article wordpress contiendrait beaucoup d’informations et le temps de les « digérer » obligerait à une lecture 3 à 4 fois plus lente que celle d’un livre ? Ou avez-vous mis cette donnée (0,8 s/m) complètement au hasard ?

    A tous : votre propre expérience (retour de vos lecteurs) donne quoi ?

    Je suis intéressé pour tous les avis, je n’ai pas encore de retour (je vais seulement lancer mon WP) et l’estimation du temps de lecture m’est importante : mes articles feront entre 1.000 et 5.000 mots, soit une longueur assez importante.

    D’avance merci

    JJ

  3. salut j’ai un petit soucis.Quand je test en mettant dans le corps de l’article , cela marche impeccable, je commente les ligne:
    -add_filter(‘the_content’, ‘jm_estimated_time_to_read_post’);
    -$content = ». $time_to_read . ‘ min’ . $content;

    j’ajoute dans mon content.php

    if(function_exists(‘jm_estimated_time_to_read_post’)) { jm_estimated_time_to_read_post(get_the_content()); }

    et la j’ai juste mon qui apparait

    theme maison basé sur twenty twelve

  4. Pas de quoi.

    A bientôt sur Quick-Tutoriel.

  5. Un immense merci pour vos multiples réponses.

  6. @Louis : As-tu mis en commentaire la ligne commençant par ADD_FILTER dans la fonction permettant d’afficher la durée de l’article comme il est dit dans le tutoriel.

    Guillaume.

  7. Non aucun problème résolut. Et j’en suis désolé.

    Il y a toujours une estimation en trop :
    http://www.hostingpics.net/viewer.php?id=880369Capture.png

  8. Bonjour,

    Et un problème de résolu.

    A bientôt.

  9. Oups
    Single.php :

  10. Bonjour,

    Merci d’avoir répondu à mon message.
    J’utilise le thème Ureeka.

    functions.php :
    add_filter(‘the_content’, ‘jm_estimated_time_to_read_post’);

    function jm_estimated_time_to_read_post( $content ) {

    if ( is_single() ) {

    // je compte le nombre de mots dans mon article
    $texte = strip_tags ( $content );
    $wordCount = str_word_count( $texte );

    // Je multiplie par 1/60 (car je veux un résultat en minutes)

    // en considérant qu’un lecteur met au maximum 1 seconde à lire un mot.

    // J’arrondis le tout à l’unité.

    $time_to_read = round($wordCount * ( 0.4/60 ) );

    $content =  ». $time_to_read . ‘ min’ . $content;

    }

    return $content;

    }

    single.php :

    css :
    span.time {
    background: url(images/clock.png) left center no-repeat;
    padding-left: 20px;
    }

    URL de la capture d’écran :
    http://www.hostingpics.net/viewer.php?id=407447Capture.png

    Merci encore,

  11. Bonjour,

    pour essayer de résoudre ton problème, il me faudrait un peu plus d’éléments, comme :
    – l’adresse de ton blog
    – et surtout le thème et on fichier css

    Si le temps s’affiche dans le corps tu as peut-être un problème au niveau de ton CSS.

    A bientôt.

  12. Bonjour,

    Ca ne marche pas sur mon site :
    Le résultat s’affiche dans le corps de l’article, alors qu’il devrait se positionner.

    1) Le code dans le fichier function est ok
    2) Le code dans le fichier single est ok

    Je ne comprend pas pourquoi ça ne fonctionne pas

Laisser un commentaire

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

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>