La page de catégorie : en-tête et articles

Ce que vous obtenez

<body wp-fields-group="Category">
<header class="category">
  <img class="category__cover" src="images/coffee.jpg" alt="" tax-image="Category cover">
  <h1 wp="term-title">Coffee</h1>
  <div class="category__lead" wp="term-desc">
    <p>Beans, brewing and the people who roast them.</p>
  </div>
  <p class="category__tagline" tax-text="Category tagline">Roasted on Mondays</p>
</header>
<div class="posts" wp="posts">
  <article class="post-card">
    <a href="#" wp="post-link"><img src="images/news.jpg" alt="" wp="post-image"></a>
    <p class="post-card__date" wp="post-date">October 1</p>
    <h3><a href="#" wp="post-title-link">New autumn menu</a></h3>
  </article>
</div>
<div class="posts__empty" wp="no-results">No posts in this category yet</div>
</body>

Étape par étape

1. Nommez le groupe de champs

   wp-fields-group sur le <body> de archive.html. Ce fichier sert à générer le modèle avec lequel WordPress affiche les catégories et les étiquettes.

   <body wp-fields-group="Category">

2. Nom et description

   wp="term-title" et wp="term-desc" affichent ce qui est défini sur la catégorie. WordPress découpe la description en paragraphes : elle se place donc sur un <div>.

   <h1 wp="term-title">Coffee</h1>
   <div class="category__lead" wp="term-desc">
     <p>Beans, brewing and the people who roast them.</p>
   </div>

3. La couverture

   tax-image sur un <img> : chaque catégorie a sa propre image, que le client choisit dans les réglages de la catégorie.

   <img class="category__cover" src="images/coffee.jpg" alt="" tax-image="Category cover">

4. Un champ propre à la catégorie

   tax-text : une ligne que les catégories WordPress n’ont pas, ici un sous-titre.

   <p class="category__tagline" tax-text="Category tagline">Roasted on Mondays</p>

5. Les articles de la catégorie

   wp="posts" est la liste principale de la page : WordPress y place lui-même les articles de la catégorie ouverte. À l’intérieur, une carte d’article comme dans wp="post-title" ; à côté, un bloc wp="no-results" pour une catégorie vide.

   <div class="posts" wp="posts">
     <article class="post-card">
       <a href="#" wp="post-link"><img src="images/news.jpg" alt="" wp="post-image"></a>
       <p class="post-card__date" wp="post-date">October 1</p>
       <h3><a href="#" wp="post-title-link">New autumn menu</a></h3>
     </article>
   </div>
   <div class="posts__empty" wp="no-results">No posts in this category yet</div>

À retenir

• Le nombre d’articles affichés à la fois se règle dans Réglages → Lecture. S’il y en a plus, ajoutez la pagination.
• Les champs de catégorie apparaissent sur toutes les catégories et étiquettes. Il faut les remplir sur chacune : « Charger les données » ne les transfère pas.
• Le même modèle s’ouvre pour une étiquette : term-title affiche le nom de l’étiquette, et les champs de catégorie ses propres valeurs.

Erreurs fréquentes

Le journal de génération est l’onglet « Journaux » de votre projet sur themeforge.pro ; la vérification gratuite du balisage affiche les mêmes remarques.

<div class="posts" wp-query="'post_type'=>'post','posts_per_page'=>6">
  <article class="post-card">
    <h3><a href="#" wp="post-title-link">New autumn menu</a></h3>
  </article>
</div>

<div class="posts" wp="posts">
  <article class="post-card">
    <h3><a href="#" wp="post-title-link">New autumn menu</a></h3>
  </article>
</div>

<p class="category__tagline" fld-text="Category tagline">Roasted on Mondays</p>

<p class="category__tagline" tax-text="Category tagline">Roasted on Mondays</p>

Attributs de cette recette

Autres recettes