Коментарі й відгуки у вашій верстці

Що вийде

<!-- 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>

Покроково

1. Блок коментарів

   wp="comment-list" — на блок під текстом запису в single.html. Усе всередині стає шаблоном коментарів: заголовок, картка, форма.

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

2. Одна картка

   Намалюйте рівно одну картку й розмітьте її частини: аватар comment-avatar, ім’я comment-author, дата comment-date, текст comment-text, посилання comment-reply. WordPress повторить її для кожного коментаря.

   <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. Форма

   wp="comment-form" на формі, мітки полів — на обгортках: comment-input-author, comment-input-email, comment-input-text. Підпис і поле всередині обгортки потрапляють у тему разом.

   <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. Кнопка

   wp="comment-submit" на кнопці: вигляд — ваш, надсилання бере на себе WordPress.

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

5. Відгуки про товар

   У single-product.html той самий підхід: блок wp="review-list", у картці ті самі мітки коментаря, а ще оцінка review-rating і бейдж 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. Форма відгуку

   wp="review-form" — обов’язково всередині блоку відгуків. Поле оцінки review-input-rating: порожній <select> сам отримає варіанти від 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>

Що важливо

• Дозволити коментарі й увімкнути модерацію — Налаштування → Обговорення.
• Відповіді отримують класи tf-comment-depth-2, tf-comment-depth-3. Відступ задайте власним CSS. У Webflow — у Project settings → Custom code: клас, який не надіто на жоден елемент, під час публікації викидається разом із правилом.
• Оцінка має змінну --tf-rating: ширина кольорової смуги зірок — calc(var(--tf-rating) / 5 * 100%). Порожній елемент оцінки покаже число.
• Бейдж review-verified видно лише у відгуку від покупця цього товару.

Типові помилки

Журнал збирання — вкладка «Логи» вашого проєкту на themeforge.pro; ті самі зауваження показує безплатна перевірка розмітки.

<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>

Атрибути в рецепті

Ще рецепти