Des commentaires et des avis dans votre propre design

Ce que vous obtenez

<!-- single.html: under the post -->
<section class="comments" wp="comment-list">
  <h2 class="comments__title">Comments</h2>
  <div class="comment">
    <img class="comment__avatar" src="images/avatar.png" alt="" wp="comment-avatar">
    <p class="comment__author" wp="comment-author">Anna</p>
    <p class="comment__date" wp="comment-date">October 2</p>
    <div class="comment__text" wp="comment-text">Is the pumpkin latte vegan?</div>
    <a class="comment__reply" href="#" wp="comment-reply">Reply</a>
  </div>
  <form class="comment-form" wp="comment-form">
    <div class="field" wp="comment-input-author">
      <label for="name">Name</label>
      <input type="text" id="name" class="input">
    </div>
    <div class="field" wp="comment-input-email">
      <label for="email">Email</label>
      <input type="email" id="email" class="input">
    </div>
    <div class="field" wp="comment-input-text">
      <label for="comment">Comment</label>
      <textarea id="comment" class="input"></textarea>
    </div>
    <button type="submit" class="button" wp="comment-submit">Post comment</button>
  </form>
</section>

<!-- single-product.html: reviews of a product (WooCommerce) -->
<section class="reviews" wp="review-list">
  <div class="review">
    <p class="review__author" wp="comment-author">Anna</p>
    <div class="review__stars" wp="review-rating"><div class="review__stars-fill"></div></div>
    <span class="review__badge" wp="review-verified">Verified buyer</span>
    <div class="review__text" wp="comment-text">Fruity and bright, great as a filter.</div>
  </div>
  <form class="review-form" wp="review-form">
    <div class="field" wp="review-input-rating">
      <label for="rating">Rating</label>
      <select id="rating" class="input"></select>
    </div>
    <div class="field" wp="comment-input-text">
      <label for="review">Review</label>
      <textarea id="review" class="input"></textarea>
    </div>
    <button type="submit" class="button" wp="comment-submit">Leave a review</button>
  </form>
</section>

Étape par étape

1. Le bloc des commentaires

   wp="comment-list" se place sur le bloc sous le texte de l’article, dans single.html. Tout ce qu’il contient devient le modèle des commentaires : le titre, la carte, le formulaire.

   <section class="comments" wp="comment-list">

2. Une seule carte

   Dessinez exactement une carte et balisez ses parties : l’avatar comment-avatar, le nom comment-author, la date comment-date, le texte comment-text, le lien comment-reply. WordPress la répète pour chaque commentaire.

   <div class="comment">
     <img class="comment__avatar" src="images/avatar.png" alt="" wp="comment-avatar">
     <p class="comment__author" wp="comment-author">Anna</p>
     <p class="comment__date" wp="comment-date">October 2</p>
     <div class="comment__text" wp="comment-text">Is the pumpkin latte vegan?</div>
     <a class="comment__reply" href="#" wp="comment-reply">Reply</a>
   </div>

3. Le formulaire

   wp="comment-form" sur le formulaire, les attributs des champs sur les conteneurs : comment-input-author, comment-input-email, comment-input-text. Le libellé et le champ d’un même conteneur passent ensemble dans le thème.

   <form class="comment-form" wp="comment-form">
     <div class="field" wp="comment-input-author">
       <label for="name">Name</label>
       <input type="text" id="name" class="input">
     </div>

4. Le bouton

   wp="comment-submit" sur le bouton : son apparence est la vôtre, l’envoi est assuré par WordPress.

   <button type="submit" class="button" wp="comment-submit">Post comment</button>

5. Les avis sur le produit

   Même procédé dans single-product.html : un bloc wp="review-list", et dans la carte les mêmes attributs que pour un commentaire, plus la note review-rating et le badge review-verified.

   <div class="review__stars" wp="review-rating"><div class="review__stars-fill"></div></div>
   <span class="review__badge" wp="review-verified">Verified buyer</span>

6. Le formulaire d’avis

   wp="review-form" se place obligatoirement à l’intérieur du bloc des avis. Le champ de note est review-input-rating : un <select> vide reçoit tout seul les options de 1 à 5.

   <form class="review-form" wp="review-form">
     <div class="field" wp="review-input-rating">
       <label for="rating">Rating</label>
       <select id="rating" class="input"></select>
     </div>

À retenir

• Autoriser les commentaires et activer la modération : Réglages → Discussion.
• Les réponses reçoivent les classes tf-comment-depth-2, tf-comment-depth-3. Définissez le retrait avec votre propre CSS. Dans Webflow, placez-le dans Project settings → Custom code : une classe qu’aucun élément ne porte est supprimée à la publication, avec sa règle.
• La note fournit une variable --tf-rating : la largeur de la bande colorée des étoiles vaut calc(var(--tf-rating) / 5 * 100%). Un élément de note vide affiche le chiffre.
• Le badge review-verified n’apparaît que sur l’avis d’un client qui a acheté ce produit.

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.

<section class="comments" wp="comment-list">
  <div class="comment">
    <p class="comment__author">Anna</p>
    <div class="comment__text">Is the pumpkin latte vegan?</div>
  </div>
</section>

<section class="comments" wp="comment-list">
  <div class="comment">
    <p class="comment__author" wp="comment-author">Anna</p>
    <div class="comment__text" wp="comment-text">Is the pumpkin latte vegan?</div>
  </div>
</section>

<form class="comment-form" wp="comment-form">
  <label for="name">Name</label>
  <input type="text" id="name" wp="comment-input-author">
  <button type="submit" wp="comment-submit">Post comment</button>
</form>

<form class="comment-form" wp="comment-form">
  <div class="field" wp="comment-input-author">
    <label for="name">Name</label>
    <input type="text" id="name">
  </div>
  <button type="submit" wp="comment-submit">Post comment</button>
</form>

<section class="comments" wp="comment-list">
  <div class="comment">
    <p wp="comment-author">Anna</p>
  </div>
  <div class="comment">
    <p wp="comment-author">Tom</p>
  </div>
</section>

<section class="comments" wp="comment-list">
  <div class="comment">
    <p wp="comment-author">Anna</p>
  </div>
</section>

Attributs de cette recette

Autres recettes