Комментарии и отзывы в вашей вёрстке

Что получится

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

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

Ещё рецепты