Ajouter un temps de lecture estimé à vos articles WordPress
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 […]
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="' . esc_url($atts['icon']) . '" alt="Clock Icon" style="vertical-align: middle; margin-right: 5px;" title="">
' . 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 !
Vous avez un nouveau projet web ?
À lire aussi
Création site WordPress : 7 avantages décisifs pour votre entreprise
Création site WordPress : 7 avantages décisifs pour votre entreprise Dans un monde numérique en constante évolution, la **création site WordPress** s’est imposée comme une solution incontournable pour les entreprises souhaitant marquer leur présence en ligne. Que vous soyez une PME, un artisan ou une grande structure, disposer d’un site web performant est aujourd’hui un […]
Optimiser vos formulaires web avec des champs en lecture seule
Introduction Dans le développement de formulaires web, la fonctionnalité et l’ergonomie sont primordiales pour garantir une expérience utilisateur agréable et efficace. L’un des aspects souvent sous-estimé mais crucial de cette expérience est l’utilisation de champs en lecture seule. Ces champs, qui empêchent les utilisateurs de modifier les données affichées, jouent un rôle important dans de […]
Erreur WordPress « Archive incompatible » : Un problème avec les fichiers compressés sur Mac
La version 6.4.3 de WordPress a introduit une nouvelle erreur pour certains utilisateurs lors de l’installation de thèmes et d’extensions : « Archive incompatible ». Cette erreur apparait uniquement sur les ordinateurs Mac et affecte les fichiers compressés (.zip) créés avec l’utilitaire de compression intégré. Cause du problème : L’erreur est due à des changements […]