Lundi 22 Septembre 2014

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

Guillaume REYNAUD17 février 2013 Wordpress9min 2 3789
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.

Attention! 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.

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

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 :

 if(function_exists('jm_estimated_time_to_read_post')) { jm_estimated_time_to_read_post(get_the_content()); } 

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.

Vous avez aimé cet article ! Partager-le avec vos amis !

  

9 Potins

  1. Le Webmaster 16 juillet 2013 at 13:57

    Pas de quoi.

    A bientôt sur Quick-Tutoriel.

  2. Louis 16 juillet 2013 at 13:47

    Un immense merci pour vos multiples réponses.

  3. Le Webmaster 16 juillet 2013 at 12:54

    @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.

  4. Louis 16 juillet 2013 at 11:00

    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

  5. Le Webmaster 16 juillet 2013 at 7:43

    Bonjour,

    Et un problème de résolu.

    A bientôt.

  6. Louis 15 juillet 2013 at 18:52

    Oups
    Single.php :

  7. Louis 15 juillet 2013 at 18:50

    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,

  8. Le Webmaster 15 juillet 2013 at 17:37

    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.

  9. Louis 15 juillet 2013 at 17:13

    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 potin