Kommentare und Bewertungen in deinem eigenen Layout

Das Ergebnis

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

Schritt für Schritt

1. Der Kommentarblock

   wp="comment-list" an den Block unter dem Beitragstext in single.html. Alles darin wird zur Vorlage der Kommentare: Überschrift, Karte, Formular.

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

2. Eine einzige Karte

   Zeichne genau eine Karte und markiere ihre Teile: Avatar comment-avatar, Name comment-author, Datum comment-date, Text comment-text, Link comment-reply. WordPress wiederholt sie für jeden Kommentar.

   <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. Das Formular

   wp="comment-form" am Formular, die Feldmarkierungen an den Hüllen: comment-input-author, comment-input-email, comment-input-text. Beschriftung und Feld in einer Hülle kommen zusammen ins Theme.

   <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. Der Button

   wp="comment-submit" am Button: Das Aussehen ist deins, das Absenden übernimmt WordPress.

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

5. Produktbewertungen

   In single-product.html dasselbe Prinzip: ein Block wp="review-list", in der Karte dieselben Kommentarmarkierungen plus die Sternebewertung review-rating und das 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. Das Bewertungsformular

   wp="review-form" gehört unbedingt in den Block mit den Bewertungen. Das Feld für die Sterne ist review-input-rating: Ein leeres <select> bekommt die Optionen 1 bis 5 von selbst.

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

Worauf es ankommt

• Kommentare erlauben und die Moderation einschalten: unter Einstellungen → Diskussion.
• Antworten bekommen die Klassen tf-comment-depth-2, tf-comment-depth-3. Den Einzug legst du mit eigenem CSS fest. In Webflow gehört es in Project settings → Custom code: Eine Klasse, die an keinem Element hängt, fliegt beim Veröffentlichen samt Regel heraus.
• Die Sternebewertung hat die Variable --tf-rating: Die Breite des farbigen Sternstreifens ist calc(var(--tf-rating) / 5 * 100%). Ein leeres Bewertungselement zeigt die Zahl.
• Das Badge review-verified erscheint nur bei einer Bewertung von jemandem, der dieses Produkt gekauft hat.

Typische Fehler

Das Build-Protokoll ist der Tab „Logs“ deines Projekts auf themeforge.pro; die kostenlose Markup-Prüfung zeigt dieselben Hinweise.

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

Attribute in diesem Rezept

Weitere Rezepte