Réduire la longueur de l’excerpt pour les mobiles – wordPress

L’excerpt de wordPress est le petit résumé d’un article présenté dans la liste des articles du blog, d’une catégorie, d’une recherche, d’étiquettes, de custom post type … Le lecteur a accès à ce petit résumé pour lui donner envie de continuer la lecture sur la page de l’article. Il peut être écrit pour chaque article, ou bien s’il n’est pas défini, être généré automatiquement et contenir les premiers mots de l’article. Cela ressemble en tout point à la description d’une page web dans les résultats d’une recherche sur un moteur de recherche.

Excerpt d'un article wordPress
Excerpt d’un article wordPress

Pour la génération automatique de l’excerpt, on peut contrôler le nombre de mots pris en compte avec le hook excerpt_length. La fin de l’excerpt comporte des caractères indiquant que l’article continue. Par défaut, ce sont les caractères [], que l’on peut modifier avec le hook excerpt_more. Et si l’on veut modifier l’excerpt, on utilise le hook the_excerpt.

Pour une navigation sur grand écran, on peut vouloir un nombre plus élevé de mots visibles que pour la navigation sur un périphérique mobile dont la largeur est réduite.

On insère pour cela un <span class="hide_mobile"> dans l’excerpt avec une classe qui sera cachée en CSS si la largeur de l’écran est inférieure à une certaine taille à partir d’un certain nombre de mots.

On écrit dans functions.php du thème :

  • Ligne 2 : On applique le hook the_excerpt pour modifier l’excerpt,
  • Ligne 3 : La fonction qui modifie l’excerpt, reçoit l’excerpt en argument, explose la chaine pour séparer les mots, crée 2 tableaux constitués des mots toujours visibles (35 mots), et des mots que l’on cachera lors de la navigation mobile (la fin de la chaine),
  • Ligne 8 : On reconstitue la chaine en insérant le <span class="hide_mobile">,
  • Ligne 18 et 19 : On définit la longueur de l’excerpt à 60 mots,
  • Ligne 22 et 23 : On définit les caractères ajoutés à la fin de l’excerpt à une chaine vide, puisque l’on les a redéfinit dans la fonction xbs_excerpt(),
  • Ligne 26 : La fonction the_excerpt() par défaut encadre le résumé d’un paragraphe <p>. On désactive cette fonctionnalité, puisque tout a été redéfinit dans xbs_excerpt().

Le nombre de mots visibles peut être redéfini à votre convenance.

Il ne reste plus qu’à définir la classe hide_mobile dans le fichier de style style.css :

Et pour obtenir une longueur différente de l’excerpt selon ses besoins (par exemple pour un système de grille), en passant simplement le nombre de mots en argument, on peut écrire la fonction :

Pour afficher l’excerpt, on écrira :

Et hop, une fonctionnalité essentielle pour créer un site wordPress responsive.

Soumettre un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.