Comment afficher la description des étiquettes et catégories sur WordPress ?


Dans cet article, je vais vous apprendre à afficher la description des étiquettes et la description des catégories sur un blog WordPress. Ça peut être un atout pour votre référencement si vous y glissez des mots clés pertinents mais cela peut aussi, plus simplement, fournir des informations complémentaires à vos lecteurs sur le sujet que vous abordez.

Comment afficher la description des catégories et des étiquettes sur WordPress ?
Comment afficher la description des catégories et des étiquettes sur WordPress ?

Comment afficher la description des étiquettes sur WordPress ?

Les étiquettes (également appelées « tags ») permettent de regrouper des articles autour d’une thématique plus précise qu’une catégorie. Par exemple, si vous avez une catégorie intitulée « Recettes de cuisine », les étiquettes peuvent vous permettre de distinguer les « Desserts » des « Poissons »…

En affichant les étiquettes sur vos articles, vos lecteurs pourront cliquer dessus et accéder à une page listant l’ensemble des posts associés à une étiquette précise. Si vous regardez par exemple mon tag WordPress, vous constaterez que la page comporte en haut à droite la description de l’étiquette (que l’on rédige en allant dans le menu Articles > Etiquettes).

Description des étiquettes sur WordPress
Description des étiquettes sur WordPress

Certains thèmes WordPress prévoient l’affichage de ces étiquettes. Dans ce cas, vous aurez juste à rédiger votre description et elle apparaîtra automatiquement sur la page de l’étiquette. Si votre thème ne propose pas cette fonctionnalité, il est possible de l’ajouter au code assez facilement.

Vous devez d’abord déterminer quel fichier de votre thème permet d’afficher les tags. Souvent, il s’agit du fichier archive.php. À l’endroit où vous souhaitez afficher la description de l’étiquette, vous allez copier un petit morceau de code.

Pour ma part, j’ai choisi d’afficher cette description au-dessus de la liste des articles, j’ai donc inséré mon code au-dessus de la ligne suivante :
<?php if ( have_posts() ) : ?>

Je vous propose d’utiliser le code suivant :

<?php $tag_description = tag_description(); ?>
<?php if ( ( is_tag () ) && (! empty( $tag_description ) ) ) { ?><div class="tag-description">
<h1><?php echo single_tag_title(); ?></h1>
<?php echo tag_description(); ?>
</div><?php } else { ?><div class="tag-description">
<h1><?php echo single_tag_title(); ?></h1>
(Texte par défaut si aucune description n'est renseignée)</div><?php } ?>

Ça ressemble peut-être pour vous à du chinois mais en simplifiant, ce code dit la chose suivante : SI on se trouve sur la page d’un tag ET que la description de cette étiquette n’est pas vide… ALORS on affiche le nom du tag (« single_tag_title ») puis on affiche sa description (« tag_description »). SINON (« else »), on affiche le titre suivi d’un texte par défaut de votre choix.

Ensuite, vous pouvez personnaliser l’affichage de la description dans votre feuille de style à l’aide de la classe « .tag-description ».

Comment afficher la description des catégories WordPress ?

En suivant le même principe, il est possible d’afficher la description des catégories. Cette fois-ci, il faut les rédiger via le menu Articles > Catégories de WordPress.

Rédiger une description pour ses catégories WordPress
Rédiger une description pour ses catégories WordPress

Si votre thème WordPress n’affiche pas cette description par défaut, vous pouvez l’ajouter à la main en modifiant le fichier qui contrôle l’affichage d’une catégorie. Il s’appelle dans la plupart des cas category.php.

Là encore, vous pouvez placer le code au-dessus de la ligne suivante afin que la description apparaisse en haut de page, avant la liste d’articles rattachés à cette catégorie :
<?php if ( have_posts() ) : ?>

Selon votre thème, vous devrez parfois modifier un peu l’emplacement pour que le rendu soit optimal. Voici un code que vous pouvez utiliser :

<?php global $cat; ?><?php if (category_description ()) { ?><div class="cat-description">
<h1><?php echo get_cat_name($cat); ?></h1>
<?php echo category_description( $cat ); ?></div><?php } else { ?><div class="cat-description">
<h1><?php echo get_cat_name($cat); ?></h1>
(Texte par défaut si la catégorie n'a pas de description)
</div><?php } ?>

Ce code signifie : « Repère dans quelle catégorie on se trouve. S’il existe une description pour cette catégorie (if category_description)… alors affiche-moi son nom (get_cat_name) et sa description (category_description). Sinon, affiche simplement le nom et un texte par défaut ».

Si vous maîtrisez le langage CSS, vous pouvez ensuite ajouter la classe « .cat-description » à votre feuille de style (style.css) ou créer des classes additionnelles pour une personnalisation plus fine de cette zone !

Cette méthode vous permet d’avoir des landing pages optimisées pour chacune des grandes thématiques de votre blog. Je vous conseille de poursuivre votre lecture avec cet article qui vous apprendra à bien utiliser les étiquettes sur WordPress !


Poster un commentaire

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

23 commentaires sur “Comment afficher la description des étiquettes et catégories sur WordPress ?

  • Alex

    Oh, ok entre temps en regardant un autre de vos articles j’ai pu bricoler un petit code CSS basique :-)
    par contre il me restait une petite question au cas où vous auriez 1 mn… :-)
    voilà, je me demandais comment faire pour afficher le nom SEO de la catégorie (celui qu’on renseigne dans les balises Yoast). dans mon cas ils différent un peu (le titre SEO est plus précis). je ne sais pas si ça serait faisable et quel code utiliser pour cela à la place de « cat_name » ?
    Mille mercis par avance de vos lumières !

    Répondre à Alex
    • Marlène

      Bonjour Alex, pourquoi ne pas tout simplement utiliser directement ce « nom SEO » en renommant la catégorie (sans changer l’URL) ? Si le titre « non SEO » ne sert pas sur le site, à quoi bon vouloir deux titres distincts (enfin, un titre et un title) ?

      Sinon, d’après l’API Yoast, le petit nom de ce title de catégorie est wpseo_title (toutes les informations sur les codes de Yoast sont sur leur site).

      Répondre à Marlène
    • Alex

      Merci bp Marlène de votre prompte réponse !
      Du coup, comment pourrais je l intégrer ds le code ?
      J ai un doute sur ce je dois remplacer, je suppose dans cette balise ?
      J ai pensé à:

      Mais ça me fait un bug :-(

      Qu en pensez vous svp ?
      Encore merci de votre aide précieuse et de votre blog génial !
      Ps: J ai été obligée d avoir 2 noms différents car le nom complet était trop long a rentrer de mon thème :-(

      Répondre à Alex
    • Marlène

      Hello Alex, le code ne passe pas dans les commentaires pour éviter le piratage. Je te conseille de te tourner plutôt vers un forum d’aide WordPress ou vers le forum de support de Yoast car pour ma part, je n’ai jamais utilisé ce filtre. Il y a des pistes à creuser dans ce post.

      Répondre à Marlène
    • Alex

      OK merci encore!

      Répondre à Alex
  • Alex

    Bonjour Marlène, merci de cet article qui m’a été fort utile, toutefois j’aurais souhaité styler l’affichage mais n’ai pas de connaissance en CSS, auriez vous possibilité de nous proposer un code de style pour l’affichage de la description comprendant notamment un petit background et si possible le centrage du titre de la catégorie sur la page d’archives ?
    Mille mercis par avance à vous pour ce « coup de pouce » et bonne soirée,

    Répondre à Alex
    • Marlène

      Arf, ton premier message était passé dans les spams. Pour centrer un élément, on peut tout simplement le placer dans une balise div avec centrage :
      <div align="center">Elément à centrer</div>

      Pour ajouter un fond à la description, il faut utiliser un code de ce type :
      .cat-description {
      background-color:#E5E5E5;
      }

      Le code « #E5E5E5 » correspond à la couleur grise en notation hexadécimale, on peut le remplacer par une couleur de son choix (ce type de site permet de connaître le code hexadécimal associé à chaque couleur).

      Répondre à Marlène
  • melissa

    Bonjour,
    j’ai testé votre code pour rendre visible la description des categories et ca a marché. Merci beaucoup pour ca! Seulement j’ai l’impression que la fonctionnalité a récemment sauté car les descriptions n’étaient plus présentes. Avez-vous eu des messages dans ce sens?
    De plus quand j’ai essayé de recoller la partie de code que vous aviez donnée, j’ai dû faire une fausse manipulation car j’ai désormais la description visible mais aussi un bout de code qui apparaît sous la description : if ( have_posts() ) { while ( have_posts() ) : the_post(); ?> endwhile; }?>
    Voici le code en entier dans Category.php (pour info j’utilise le thème Kale gratuit sur WordPress)

    if ( have_posts() ) {
    while ( have_posts() ) : the_post(); ?>

    endwhile;
    }?>

    Une idée pour le cacher à nouveau ?

    Merci beaucoup

    Melissa

    Répondre à melissa
    • Marlène

      Hello Melissa, si le code apparaît sur la page, c’est sans doute qu’il n’est pas reconnu comme étant du code PHP. Il faut vérifier qu’il y a bien la partie <?php au début. J’utilise toujours le même code que celui indiqué dans l’article sur mon blog… et les descriptions s’affichent bien (cf la partie « Créer un blog » par exemple).

      Répondre à Marlène
  • Sarah

    Bonjour Marlène,

    Merci pour cet article!
    Je suis parvenue à renommer mes catégories sans souci.
    Par contre, lorsque je tape mon nom de blog sur Google, il apparait mais précédé de Uncategorized. Je suis un peu perdue et ne comprend pas pourquoi.
    Penses-tu avoir une piste pour m’aider?

    Merci :)

    Répondre à Sarah
    • Marlène

      Hello, Google n’a sans doute pas mis à jour la version de ta page qu’il indexe. Pour qu’il prenne en compte la modification, il faut qu’il revienne sur la page donc ça peut être plus ou moins long :)

      Répondre à Marlène
  • Alan

    Bonjour, Je vais tester mais en cas de mise a jour du templates estce que cela aura effet a supprimer le code ou la page archives fait ^partie de la base de worl press ?

    Répondre à Alan
    • Marlène

      Alors, de manière générale quand on personnalise son blog on ne touche jamais aux fichiers core de WordPress, la fameuse « base de WordPress » :) En revanche, oui, si tu modifies directement ton thème, les personnalisations peuvent disparaître en cas de mise à jour, sauf si tu as créé un thème enfant.

      Répondre à Marlène
  • JulienGilles

    Bonjour,
    Merci pour le code qui permet d’afficher la description de la catégorie.
    Je voudrais juste apporter une précision sur l’emplacement du fichier à modifier.
    Après avoir effectué des recherches sur le codex WorpPress, il se trouve que la portion de code devant laquelle insérer la description de la catégorie se trouve non pas le fichier category.php mais dans le fichier index.php du theme.
    Il s’agit de la boucle de rendu, qui liste tout les articles du blog.

    Répondre à JulienGilles
    • Marlène

      Bonjour Julien, tout dépend de la façon dont le thème est conçu. Si la page category.php existe dans le dossier du thème, elle est utilisée en priorité (elle prend donc le pas sur index.php) pour l’affichage des pages de catégories. L’information figure dans le codex. Chez moi par exemple, le code figure bien dans category.php, qui contrôle l’affichage des pages de catégories.

      Répondre à Marlène
    • JulienGilles

      Merci pour ce complément d’information.

      Répondre à JulienGilles
    • Marlène

      De rien. Bonne journée !

      Répondre à Marlène
  • Rosty

    Bonjour,

    J’essaie d’appliquer ces codes sur mon blog pour afficher le nom d’un tag seulement sil il y a une description, mais cela ne fonctionne pas, le code est il toujours d’actualité avec les dernières version de wordpress ?

    Je voudrait pouvoir afficher en dessous du texte de l’article sur la home page le tag FINI (correspondant à la catégorie FINI) lorsque je rajoute ce tag sur l’article.

    Merci d’avance.

    Répondre à Rosty
    • Marlène

      Bonjour, oui le code fonctionne toujours… mais ne correspond pas à l’usage que tu veux en faire, c’est pour ça que ça ne marche pas. Le code que je propose ici est destiné à s’afficher sur la page du tag, pour qu’elle comporte une description optimisée. Dans ton cas, il s’agit d’exporter cette description ailleurs sur ton blog (page d’accueil). Il faut juste que tu marques :
      <?php echo tag_description( ID du tag ); ?>

      Tu remplaces « ID du tag » par le numéro de ton tag.

      Répondre à Marlène
    • Rosty

      bonsoir et merci pour la réponse, entre temps un peu avancé avec ce code que j’ai ajouté dans le fichier content-archive.php

      ça m’affiche les tags mais tous les tag renseigné dans l’article s’affiche, pas seulement ceux qui disposent d’une description.

      Quand je mets

      La description du tag 106 s’affiche en dessous de tout les articles même si il n’ont aucun tags :(

      Je sèche…

      En gros, je voudrais pouvoir afficher le tags seulement si il à une description…

      Merci pour ton aide.

      Répondre à Rosty
    • Marlène

      Hello, le code PHP est bloqué dans les commentaires pour limiter les risques de piratage… Tu me parles de la page d’accueil, puis des articles, puis d’un tag précis, puis de tous les tags… je suis un peu larguée hé hé. Si je comprends bien, tu veux :
      – Afficher la liste des tags associée à un article sur l’article en question.
      – Mais en sélectionnant uniquement les tags qui possèdent une description.

      Si c’est ça, tu peux essayer ce code :
      <?php
      $posttags = get_the_tags();
      if ($posttags) {
      foreach($posttags as $tag) {
      $tag_description = tag_description($tag->term_id);
      if (!empty( $tag_description ) ) {
      echo '<a href="' . get_tag_link($tag->term_id) . '">' . $tag->name . '</a>'; }
      }
      } ?>

      Il détecte si un article a des tags associés… et si leur description n’est pas vide, il affiche les tags avec le lien associé. Je viens de tester sur le blog et ça fonctionne.

      Répondre à Marlène
    • Rosty

      BINGO, ça fonctionne avec ce code sur la page d’accueil , merci beaucoup !!!

      Par contre, petit problème, j’ai que le teste et non l’image du tag comme dans les article, une piste ?

      Merci d’avance

      Répondre à Rosty
    • Marlène

      Bonjour, visiblement tu as résolu ton problème car je vois une mise en forme différente de la mise en forme standard ! Bien joué ;)

      Répondre à Marlène
Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.