Bessere Darstellung der Kommentare

von | Tipps

Die Kommentardarstellung des Divi Themes bringt in der Standarddarstellung einige kleinere Probleme mit sich:

  1. Die Antwortbuttons ragen schnell in den Kommentartext hinein. Das liegt daran, dass die Buttonbreite auf die wesentlich kürzere englische Bezeichnung „Reply“ bemessen ist statt dem längeren deutschen „Antworten“.
  2. Divi erstellt von Haus aus bis zur 4. Ebene verschachtelte Kommentare. Das hat zur Folge, dass der Kommentartext immer schmaler in der Anzeige wird. Das sieht weder gut aus, noch erleichtert dies die Lesbarkeit.

 

Die Lösung

Mit dem folgenden CSS-Snippet kannst Du die Probleme beheben und erhältst dazu noch einige weitere Verbesserungen.

Wir sorgen dafür, dass nur die 2. Kommentarebene eingerückt wird. Für eine etwas gefälligere Darstellung werden die Avatare der zweiten Ebene etwas kleiner angezeigt und außerdem in der modernen runden Form. Darüber hinaus lassen wir die Spalte für die Antwortbuttons etwas größer werden, so dass es zu keinen Überlappungsproblemen kommt:

Zusätzlich machen wir das Kommentarfeld zweispaltig, so dass die Anzeige Kompakter wirkt:

Falls Du nur einzelne Elemente verändern willst, dann schau einfach weiter unten.

/* Saubere Kommentaranzeige */

.comment_avatar img { border-radius: 50%; } /** Runde Avatarbilder **/

@media (min-width: 768px) { /** Der Umbruchspunkt für das Kommentarformular **/
 body:not(.logged-in) #comment { max-width: 50%; float: right; margin-top: 18px; height: 176px; } /** Zweispaltiges Formular **/
 .children .comment.depth-2 { margin-left: 30px;} /** Abstand für Einrückung **/
 .comment .children { margin-left: 0px; } /** Abstand für Einrückung **/
 .comment .children .comment_avatar img { max-width: 60px; } /** Antwortavatare kleiner darstellen **/
 .comment .children .comment_avatar { margin-left: 20px; } /** Antwortavatare linksbündig halten **/
 .comment-body { padding: 0 150px 0 110px; } /** größere Spalte (150px) für die Antwortbuttons **/
}

@media (max-width: 767px) {
 .comment-reply-link { bottom: -20px !important; top: auto !important; } /** Buttons vom Text fernhalten **/
 .comment_area { padding-bottom: 40px; } /** Buttons vom Text fernhalten **/
 .comment_avatar { max-width:50px } /** Kleinere Avatare auf Mobilgeräten **/
 .comment_postinfo, .comment-content.clearfix { margin-left: -15px; } /** Kleinere Avatare linksbündig halten **/
}

Du kannst den CSS-Code einfach in die style.css Deines Child Themes kopieren oder im Designmodifikator (englisch Customizer) eintragen.

Einzelne Kommentarelemente ändern

Wenn du z.B. nur dafür sorgen willst, dass der Antworten Button nicht den Kommentartext überlappt:

/* Antwortbutton Überlappen verhindern */

@media (min-width: 768px) { /** Der Umbruchspunkt für das Kommentarformular **/
 .comment-body { padding: 0 150px 0 110px; } /** größere Spalte (150px) für die Antwortbuttons **/
}

Oder falls Du nur runde Avatarbilder haben möchtest:

/* Runde Avatarbilder */

.comment_avatar img { border-radius: 50%; } /** Runde Avatarbilder **/

Die Grundidee für diese Anpassungen haben wir bei Divi.space in dem Artikel „How to Create Cleaner Comments for your Divi website“ gefunden. Da das Snippet nicht 1:1 funktionierte, haben wir einige Anpassungen vorgenommen.

8 Kommentare

  1. Doris Niestroj

    Ich möchte mich einfach mal für Eure Tipps und den kostenlos zur Verfügung gestellten Code bedanken. Sie haben mir schon einige Mal SEHR geholfen!
    Doris

    Antworten
    • Nils

      Danke Doris! Wir freuen uns immer, wenn wir positives Feedback erhalten 🙂 !

      Antworten
  2. Christine

    Halli Hallo!
    Ich finde es immer wieder wahnsinnig hilfreich Eure Beiträge zu lesen – so wird manches viel einfacher! Ich habe noch eine Frage – ist es auch möglich das Kommentarfeld vor den ganzen Kommentaren einzublenden? Wir haben schon viele Kommentare und die User müssen so immer ewig scrollen bis sie zum Kommentarfeld kommen…. hier springen einige ab.
    LG christine

    Antworten
    • Nils

      Hallo Christine,

      meines Wissens gibt es da keine einfache Lösung und du müsstest die comments.php (möglichst in einem Child Theme) entsprechend bearbeiten. Ich kann das aus Zeitgründen nicht selbst testen, aber hier findest Du ein paar Hinweise dazu: How to Move the Reply Box Above the Comments in WordPress.

      Als Workaround könnte man auch schauen, ob man oberhalb einen Link mit Sprungmarke auf die Kommentarbox erstellt.

      Antworten
      • Christine

        Hallo Nils,
        Vielen Dank für die Info und den link. Ich werde es versuchen umzusetzen.
        Lg Christine

        Antworten
  3. Verena

    Super, vielen Dank! Genau die Lösung, die ich mir vorgestellt hab! Copy, Paste, fertig. Perfekt!

    Antworten
  4. Stefanie

    Vielen Dank für die nützlichen Tipps. Leider schaffe ich es nicht einmal, ein weiteres Feld für E-Mail, Name usw. hinzuzufügen. Können Sie mir da bitte weiterhelfen?

    Antworten
    • Nils

      Hallo Stefanie,

      es scheint mir als würdest du einem Irrtum aufsitzen. Die WordPress Kommentarfunktion und auch das Divi Kommentarmodul stellt diese Felder immer zur Verfügung. Da brauchst du nichts selbst erstellen.

      Allerdings wenn Du eingeloggt bist, erscheinen diese Felder natürlich nicht mehr, da WordPress dann ja bereits weiß wer du bist und wie deine E-Mail lautet. Deshalb steht da dann auch beim Kommentarfeld so etwas wie „Angemeldet als Nils. Abmelden?“.

      Oder meinst du vielleicht die Funktionen des Divi Kontaktformulars?

      Antworten

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.