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.

 

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.

 

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.

 

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.

 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]

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().

 

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

Source: GeekPress.fr

That’s All.