Introduction
Le temps de lecture est devenu un élément essentiel pour améliorer l’expérience utilisateur sur les blogs et sites web modernes.Dans cet article, nous allons explorer comment implémenter un shortcode WordPress personnalisé qui calcule et affiche automatiquement le temps de lecture estimé de vos articles, accompagné d’une icône élégante.
Pourquoi ajouter un temps de lecture à vos articles ?
L’ajout d’un indicateur de temps de lecture présente plusieurs avantages :
- Amélioration de l’expérience utilisateur : Les lecteurs peuvent rapidement évaluer le temps nécessaire pour lire un article, ce qui les aide à mieux gérer leur temps de lecture.
- Réduction du taux de rebond : En informant les visiteurs de la durée de lecture attendue, vous augmentez les chances qu’ils restent sur votre site et lisent l’article en entier.
- Professionnalisme : Cette fonctionnalité, présente sur de nombreux sites majeurs comme Medium, donne un aspect plus professionnel à votre blog.
Besoin d'une solution web sur mesure ?
Le code expliqué en détail
Analysons le fonctionnement du shortcode étape par étape :
1. Déclaration de la fonction
Cette fonction prend en paramètre $atts qui contiendra les attributs personnalisables du shortcode. La variable globale $post nous permet d’accéder aux informations de l’article courant.
function jrwc_temps_lecture_shortcode($atts) {
global $post;
2. Configuration des attributs
Nous définissons trois attributs personnalisables :
- id : L’ID de l’article (par défaut, l’article courant)
- class : La classe CSS pour le styling
- icon : Le chemin vers l’icône d’horloge (vous pouvez utiliser un icon présent dans vos médias WordPress)
$atts = shortcode_atts(
array(
'id' => $post->ID,
'class' => 'temps-lecture',
'icon' => '/wp-content/uploads/2024/10/clock.svg'
),
$atts
);
3. Calcul du temps de lecture
Cette partie :
- Récupère le contenu de l’article
- Compte le nombre de mots (en excluant le HTML)
- Calcule le temps de lecture basé sur une moyenne de 200 mots par minute
$content = get_post_field('post_content', $atts['id']);
$word_count = str_word_count(strip_tags($content));
$readingtime = ceil($word_count / 200);
4. Génération du HTML
Le shortcode génère un span contenant :
- Une icône d’horloge alignée verticalement
- Le temps de lecture estimé en minutes
$content = get_post_field('post_content', $atts['id']);
$word_count = str_word_count(strip_tags($content));
$readingtime = ceil($word_count / 200);
Installation et utilisation
- Ajoutez le code dans le fichier functions.php de votre thème ou dans un plugin personnalisé.
- Intégrez le shortcode dans votre template d’article unique (single.php), ou modèle unique Elementor ou autre builder : [temps_lecture] :
<?php echo do_shortcode('[temps_lecture]'); ?>
Personnalisez l’affichage avec vos propres classes CSS :
.temps-lecture {
display: inline-flex;
align-items: center;
font-size: 14px;
}
span.temps-lecture img {
width: 14px;
margin: 0 5px 0 0 !important;
}
Le code complet
/** ---------->
À copier dans votre fichier functions.php de votre thème enfant
------------ */
function jrwc_temps_lecture_shortcode($atts) {
global $post;
// Récupère l'ID du post courant ou de l'ID passé en paramètre
$atts = shortcode_atts(
array(
'id' => $post->ID,
'class' => 'temps-lecture', // Classe CSS par défaut
'icon' => '/wp-content/uploads/2024/10/clock.svg' // Icône par défaut
),
$atts
);
// Récupération du contenu de l'article
$content = get_post_field('post_content', $atts['id']);
$word_count = str_word_count(strip_tags($content));
// Calcul du temps de lecture basé sur 200 mots par minute
$readingtime = ceil($word_count / 200);
// Détermine le libellé (singulier/pluriel)
$totalreadingtime = $readingtime . " min";
// Retourne le résultat avec l'icône et la classe CSS
return '<span class="' . esc_attr($atts['class']) . '">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Clock Icon" style="vertical-align: middle; margin-right: 5px;" title="Ajouter un temps de lecture estimé à vos articles WordPress 1" data-lazy-src="' . esc_url($atts['icon']) . '"><noscript><img decoding="async" src="' . esc_url($atts['icon']) . '" alt="Clock Icon" style="vertical-align: middle; margin-right: 5px;" title="Ajouter un temps de lecture estimé à vos articles WordPress 1"></noscript>
' . esc_html($totalreadingtime) . '
</span>';
}
// Enregistrement du shortcode
add_shortcode('temps_lecture', 'jrwc_temps_lecture_shortcode');
Bonnes pratiques et sécurité
Le code intègre plusieurs mesures de sécurité importantes :
- Utilisation de esc_attr() pour sécuriser les classes CSS
- Utilisation de esc_url() pour le chemin de l’icône
- Protection contre les injections XSS avec esc_html()
Conclusion
Ce shortcode de temps de lecture est un excellent moyen d’améliorer l’expérience utilisateur de votre blog WordPress. Simple à implémenter et hautement personnalisable, il s’intègre parfaitement dans n’importe quel thème WordPress et peut être adapté à vos besoins spécifiques.
N’oubliez pas de tester le shortcode sur différents types de contenu pour vous assurer qu’il fonctionne comme prévu. Vous pouvez également ajuster la vitesse de lecture moyenne (actuellement fixée à 200 mots par minute) en fonction de votre audience.
[temps_lecture] est maintenant prêt à être utilisé dans vos articles pour offrir une meilleure expérience de lecture à vos visiteurs !