Ajouter une classe CSS sur les extraits de WordPress

La fonction the_excerpt() de WordPress affiche un résumé automatique de votre contenu ou bien celui saisi dans la zone prévue à cette effet dans l’éditeur du back-office. Si vous l’utilisez dans votre thème, elle affichera le texte entouré d’une balise <p>. Ajoutons-lui une classe CSS pour faciliter le changement d’apparence via les styles.

Dans votre fichier functions.php de votre thème ou mieux de votre thème enfant si vous utilisez un thème premium, insérez les lignes de code suivantes :

function wpc_custom_excerpt($excerpt) {
	$excerpt = str_replace( "<p", "<p class=\"lead\"", $excerpt );
 	return $excerpt;
}
add_filter('the_excerpt',  'wpc_custom_excerpt');

Il conviendra de modifier la classe CSS lead par celle de votre choix à la ligne 2. Je l’ai nommée ainsi car c’est une des classes disponibles avec le framework Twitter Bootstrap que j’utilise pour créer des thèmes responsive.

A présent, il vous faut modifier votre fichier style.css et y ajouter la classe nommée ci-dessus. N’oubliez pas d’utiliser les outils de développement pour prévisualiser le résultat.

7 commentaires

  1. camille

    Bonjour,

    Tout d’abord un grand merci pour votre site car je suis novice et j’y récupère beaucoup de précieuses informations / astuces pour mon site, et vous rendez le sujet encore plus passionnant qu’il ne l’est déjà !

    J’ai un soucis car je n’arrive pas, malgré tous vos conseils, à avoir des points de suspension à la suite de mes extraits qui sont sur ma HP dynamique.
    Mon thème : Black and White

    J’ai d’abord tenté la solution : https://wpchannel.com/afficher-lien-extrait-wordpress/ mais cela n’a pas fonctionné (ou je n’ai pas réussi), rien ne se passait, pas de points de suspension.
    Je me suis donc tourné vers une seconde solution : https://wpchannel.com/ajouter-classe-css-extraits-wordpress/
    J’ai gardé le code de mon thème pour la longueur de l’extrait et ajouter le votre pour rajouter la classe css.
    J’ai tout mis en place mais rien ne se passe, pourriez-vous m’aider ?

    Voilà à quoi ressemble mon fichier functions.php sur cette partie (Change the excerpt length) :

    http://pastebin.com/UdkKiFTT

    et voilà à quoi ressemble ma classe dans CSS (Home Stories) :
    .lead {
    width: 200px;
    text-overflow: ellipsis;
    }

    Là je vous le montre dans l’état dans lequel je l’ai laissé car j’ai évidemment testé pleins de combinaisons ! Mais rien ne se passe
    Qu’en pensez-vous ?

    Merci beaucoup pour votre aide !
    Bien à vous,
    Camille

    1. Aurélien Denis auteur de l’article

      Bonjour Camille,

      tout d’abord, ravi de lire que vous apprécier les différents tutoriels de ce site.

      Ensuite, je vous recommande vivement d’utiliser un service comme pastebin.org pour partager des bouts de code de manière efficace.

      Enfin, tout dépend du thème et il faudrait un accès à ce dernier pour voir comment les extraits sont réellement conçus. Avez-vous tenté ce tutoriel : https://wpchannel.com/definir-longueur-extrait-personnalisee-articles-wordpress/ ?

  2. Camille

    Merci pour votre retour si rapide !
    et merci pour le tips de pastebin

    j’ai déjà regardé le tutoriel auquel vous faite référence ci-dessus mais il ne correspond pas à mon cas de figure. En effet, j’ai déjà une fonction dans mon thème pour monitorer la longueur des articles, c’est celle-ci :

    mon problème c’est que je n’ai pas les points de suspension qui arrivent derrière.
    Je pense que spécifiquement ça vient des lignes 3 et 4 qui font référence au thème mais je ne sais pas très bien comment contourner cela. (j’ai essayé de remplacer la totalité par votre code qui est dans l’article auquel vous faite référence mais j’ai eu une page blanche ! – remarque ça a eu du bon car j’ai dû apprendre à débugguer et la page blanche ne me fait plus peur désormais !!)

    J’ai essayé d’autres solutions, en ajoutant une classe à l’article mais l’attribut text-overflow: ellipsis ne fait pas s’afficher de points, ce qui ne m’étonne pas car la longueur de l’extrait est défini par la fonction, ce n’est pas vrraimen comme si le texte était tronqué. J’ai aussi essayé d’ajouter un attribut content (bien que cette façon de faire m’ai l’air assez moche) mais ça ne fonctionne pas, quand je veux mettre mes points de suspension en excerpt:after, il s’affiche après mon « lire la suite ».

    Voilà mon php sur toute la partie concernée :

    Et le CSS qui va avec :

    Mon thème est Black and White, je sais que c’est compliqué quand on ne peut pas voir de quoi il retourne exactement mais si vous aviez une idée à me donner pour que je sache au moins où chercher ce serait top !

    Merci beaucoup pour votre retour !

  3. Camille

    Bonjour !
    Simplement pour vous dire qu’un de mes amis a trouvé la solution : http://pastebin.com/2Ti5pjk5
    Il a ajouté les points de suspension ligne 16 avant le « readmore »
    Donc c’est bon pour moi !
    Merci encore pour votre retour.
    PS / si par contre vous pourriez me dire pourquoi mes pastebin ne s’affichent pas quand je mets le lien embed javascript (ou iframe d’ailleurs), je veux bien !

Laisser un commentaire

Thèmes & Plugins
Premium By WP Channel

WP Alacarte propose des produits et services de qualité
made in France pour la plateforme WordPress.

Tout est prêt pour créer votre site à la carte !

  • Thèmes et extensions premium
  • Facilité d’utilisation garantie
  • Temps de chargement optimisé
  • Personnalisation avancée
Découvrir

Rejoignez la communauté WordPress !

Faites partie de l’aventure en devenant membre d’une association WordPress. Conférences, ateliers, BarCamp, WordCamp… Venez
partager votre passion pour WordPress !

Aurélien DENIS,
président des associations WordPress Francophone et WPMX