WP – Kommentarbereich anpassen

Der Kommentarbereich kann recht schön angepasst werden. Dazu müssen nur einige kleine Veränderungen vorgenommen werden, insofern dein Theme die folgende Funktionalität noch nicht hat, so hilft es dir vielleicht beim Einbau. Ich werde kurz erläutern, wie man einen Zähler zu den Kommentaren hinzufügt und wie die Kommentare des Beitragsautors hervorgehoben werden können. Wie du das ganze dann stylisch ein- und umsetzt, das ist eine Frage des Geschmacks und der CSS-Kunst. Außerdem kommt noch ein wenig Coding hinzu, wenn man Gravatare ohne ein Plugin einbauen will.

Der Kommentarbereich kann recht schön angepasst werden. Dazu müssen nur einige kleine Veränderungen vorgenommen werden, insofern dein Theme die folgende Funktionalität noch nicht hat, so hilft es dir vielleicht beim Einbau.
Ich werde kurz erläutern, wie man einen Zähler zu den Kommentaren hinzufügt und wie die Kommentare des Beitragsautors hervorgehoben werden können. Wie du das ganze dann stylisch ein- und umsetzt, das ist eine Frage des Geschmacks und der CSS-Kunst. Außerdem kommt noch ein wenig Coding hinzu, wenn man Gravatare ohne ein Plugin einbauen will.

Zähler für die Kommentare

Beginnen wir mit dem Einbau eines Counters in die Kommentare. Dadurch kann man schnell auf einen Beitrag hinweisen und es wird ein wenig übersichtlicher.
In der Datei comments.php, in der wir alle Anpassungen, die den Kommentarbereich betreffen vornehmen, suchen wir nach folgenden Code ...


<?php foreach ($comments as $comment) : ?>

und ersetzen ihn mit diesem:


<?php $count = 0; foreach ($comments as $comment): $count++; ?>

Nun habe wir unseren Counter, der zuerst auf 0 gesetzt wird und dann immer 1 addiert (++), wenn ein Kommentar hinzu kommt.
Nun fügen wir den Code ein, damit der Counter zum jeweiligen Kommentar dargestellt wird. Ich verwende hier einen div-Container, da ich die Zahl floaten lassen. Das muss natürlich nicht sein, da sind den Regeln des xHTML keien Grenzen gesetzt. Ebenso vergebe ich eine Klasse (class="comment-number"), um die Zahl dann per CSS zu formatieren. Dazu musst du dein Stylesheet bearbeiten. Ebenso habe ich die Zahl mit einem Link zum Kommentar versehen, auch das muss nicht sein, also optional.


<div class="comment-number"><a href="#comment-<?php comment_ID() ?>"><?php echo $count; ?></a></div>

Beitragsautor hervorheben

Die Kommentare, die vom Autor des Beitrags kommen, können mit einer kleinen Abfrage eine andere Klasse haben, somit kann man sie über diese Klasse anders gestallten und einige Leser finden das hilfreich beim Suchen von Antworten zu Problemen. Auch hier ist der Gestaltung keine Grenzen gesetzt - da überlasse ich es gern dem eigenen Geschmack, wie aufdringlich oder dezent die Hervorhebung des Autors sein soll.
Um die Abfrage einzubauen, suche nach folgenden Code in der comments.php ...


<li id="comment-<?php comment_ID() ?>"></li>

und ersetze mit folgendem Code:


<li id="comment-<?php comment_ID() ?>"<?php global $comment;
        if ( ($comment->comment_author_email == get_the_author_email()) && ($comment->user_id != 0) ) {
            echo " class=\"autor_kommentar\"";
        } else {
            echo " class=\"" . $oddcomment . "\"";
        }
        ?>></li>

Mit Hilfe dieser Zeilen wird nun die Klasse autor_kommentar ausgegeben, wenn der Autor des Beitrags gleich dem Autor des Kommentars ist, ansonsten wird keine Klasse oder die Alternativklasse (meist .alt, wenn die Variable $oddcomment gesetzt ist - falls nicht, dann schreibe anstatt der Variable eine Klasse wie bei autor_kommentar) ausgegeben. Somit kannst du deinen Kommentar über autor_kommentar formatieren und die anderen über die List-Anweisung und zusätzlich über die Alternativklasse, damit jeder zweite Beitrag ein wenig anders aussieht und das Lesen der Beiträge erleichtert wird.

Gravatare hinzufügen

Um Gravatare in die Kommentare zu integrieren, was vor allem dem Design und der Ladezeit gut 😉 tut, kann man verschiedene Plugins nutzen oder das Template anpassen.
Dazu fügst du nach Beginn der Liste (ul oder ol) folgenden Code ein, der setzt ein Standardbild, wenn kein Gravatar zum Kommentator gefunden wurde. Die Adresse muss natürlich so angepasst sein, dass dein Bild auch dort liegt.


<?php $gravatar_default = "http://www.dein_blog.de/wp-content/themes/default/images/avatar.gif"; ?>

Den nachstehenden Code musst du nun dort einbauen, wo das Gravatar erscheinen soll. Also am besten im Kommentarabschnitt - in der foreach-Schleife, denn jeder Kommentator soll ja ein Gravatar bekommen. Suche den Abschnitt, in dem der einzelne Kommentar ausgegeben wird, zwischen <li> und </li>.


<?php $gravatar_url = "http://www.gravatar.com/avatar.php?gravatar_id=" . md5(get_comment_author_email()) . "&default=" . urlencode($gravatar_default) . "&size=30"; ?>
<img class="gravatar" src="<?php echo $gravatar_url ?/>" alt="Gravatar" />

Komplettes Listing in einem Beispiel


  <ol class="commentlist">

  <?php $gravatar_default = "https://bueltge.de/wp-content/themes/default/images/avatar.gif"; ?>

  <?php $count = 0; foreach ($comments as $comment): $count++; ?>

    <li id="comment-<?php comment_ID() ?>"<?php global $comment;
        if ( ($comment->comment_author_email == get_the_author_email()) && ($comment->user_id != 0) ) {
            echo " class=\"mein_kommentar\"";
        } else {
            echo " class=\"" . $oddcomment . "\"";
        }
        ?>>
      <div class="comment-number"><a href="#comment-<?php comment_ID() ?>"><?php echo $count; ?></a></div>

      <?php $gravatar_url = "http://www.gravatar.com/avatar.php?gravatar_id=" . md5( get_comment_author_email() ) . "&default=" . urlencode($gravatar_default) . "&size=30"; ?>
      <img class="gravatar" src="<?php echo $gravatar_url ?/>" alt="Gravatar" />

      <cite><?php comment_author_link() ?></cite> sagt:
      <?php if ($comment->comment_approved == '0') : ?>
      <em>Dein Kommentar muss noch moderiert werden.</em>
      <?php endif; ?>
      <br />

      <small class="commentmetadata"<>a href="#comment-<?php comment_ID() ?>" title=""<<?php comment_date('j. F Y') ?> um <?php comment_time('H:i') ?></a> <?php edit_comment_link('· bearbeiten','',''); ?></small>

      <?php comment_text() ?>

    </li>

  <?php /* Changes every other comment to a different class */
    if ('alt' == $oddcomment) $oddcomment = '';
    else $oddcomment = 'alt';
  ?>

  <?php endforeach; /* end for each comment */ ?>

  </ol>

38 Kommentare

  1. Erst einmal danke für die Super-Tips. Nur leider habe ich mit der praktischen Umsetzung wohl so meine Probleme.
    Ich würde gern meine eigenen Kommentare von denen meiner Gäste abheben und bin so verfahren, wie Du es oben ja recht eindeutig beschrieben hast. Nur leider ändert sich bei da nichts. ;-(
    Kann man trotz Deiner sehr guten Erklärung da Fehler begehen?

    Gruß Stephan

  2. Damit ich dir helfen kann, benötige ich einen Link zu einem beitrag wo verschiedene user kommentieren, incl. dir selbst. Wichtig, der Autor des beitrags muss gleich der Kommentarmail sein, sonst geht die Abfrage daneben. Dann kann ich mir mal den html-Code ansehen.
    Wenn ich mehr schauen soll, so benötige ich einen Adminzugang.
    LG Frank

  3. Hallo Frank,

    ich hatte ebenfalls Probleme mit dem Script, die sich folgendermaßen im HTML-Code äußerten:

    1. Kommentar: (Besucher) [li class="alt" id="comment-21296"]
    2. Kommentar: (Besucher) [li class="" id="comment-21383"]
    3. Kommentar: (Autor) [li class="alt" id="comment-21564"]

    Dann habe ich dieses aus der comments.php entfernt:

    ...und nun geht's 😉

    Guckst du hier

  4. Nachtrag, leider wurder der Code gefressen:

    (?php /* Changes every other comment to a different class */
    if ('alt' == $oddcomment) $oddcomment = '';
    else $oddcomment = 'alt';
    ?)

    (Habe die Spitzklammern durch Rundklammern ersetzt)

  5. Mein Problem war, dass der 1. Besucher-Kommentar so angezeigt wurde, wie ich es für Besucherkommentare in meiner css vorgesehen hatte, der 2. Besucherkoimmentar- Kommentar wurde ohne jegliche Formatierung angezeigt, weil die class ja leer war und der 3. Kommentar, ein Autorenkommentar, wurde wieder so angezeigt wie der 1. Besucherkommentar.

  6. Das ist auch korrekt so.
    Das Problem ist: du formatierst also die class alt, in den Kommentaren und damit nur alle li-Elemente, die die Klasse alt haben. Ändere dein Stylesheet so, dass der tag li formatiert wird.
    Bsp:

    #comments ul li {
    border: 5px solid #000;
    }

    Um nun jeden zweiten anders zu formatieren, formatiere Klasse alt.

    Liebe Grüße Frank

  7. Hallo, danke erstmal für deine schnelle Antwort per E-Mail 🙂 Nun wollte ich dies auch gleich um setzen doch in meiner comments.php steht folgendes:

    " id="comment-">

    comment_approved == '0') : ?>
    Achtung: Der Kommentar muß erst noch freigegeben werden.

    " title="#comment-">Am um Uhr |',''); ?>

    Was muss ich nun davon verwenden ? bzw. abändern `?

  8. coole sachen die du hier vorstellst! leider gehts bei mir aber auch nicht... hab den code aber so kopiert wie du ihn da stehn hast....?

  9. Welches Problem hast du?
    Mit ist im obigen Listing nur ein Fehler bekannt:

    ?>>
    Da ist ein Zeichen zu viel, aber das entsteht durch WP. Dadurch müsstest du einen Parser-Fehler bekommen.
  10. Hallo Frank,
    ich habe von Dir die wp-paged-guestbook.php im Einsatz.

    Mit dem o.g. Codeschnipsel komme ich nicht weiter.
    Könntest Du hierfür die notwendigen Änderungen vorstellen.
    Danke

  11. @tboggi:
    alle Elemente, die ich für die veränderung der Kommentare nutze, findest du auch in der paged-guestbook. Die Reihenfolge ist lediglich ein wenig anders, da die Eingabefelder vor der Auflistung der Kommentare kommt.

  12. Lieber Frank,
    ich hoffe, Du liest diese Zeilen.
    Was ich gerne möchte: meinen eigenen Kommentar hervorheben durch andersfarbigen Hintergrund und stärkeren, farbigen Rahmen. Bei Dir funktioniert das tadellos (besonders in deinem vorherigen Design zu sehen).
    Ich komme mit Deinem Code aber leider nicht klar, weil der bei mir von vorneherein irgendwie anders aussieht. Ich weiß überhaupt nicht, wo ich was einsetzten oder ersetzen muss. Ich komme aber auch nicht mit irgendeinem anderen Code klar, den man bez. Kommentarhervorhebung im Netz so findet. Ich suche nun schon seit Tagen und habe etliches versucht. Entweder gar kein Effekt oder aber das blanke Chaos. Finde auch in den entsprechenden Foren keine Hilfe.
    Ich bin ganz sicher - es liegt an mir! Bin absoluter Anfänger und ein Doofi in diesen Dingen. Wahrscheinlich stelle ich mich einfach nur total blöd an.
    Ob ich Dir vielleicht mal per Mail meine comments.php schicken dürfte - und Du sagst mir dann, wo ich was ändern, ergänzen oder ersetzen muss? Ob Du mir dann vielleicht auch noch sagst, was ich in die style.css reinschreiben muss?
    Ich wäre Dir sehr dankbar und würde mich sehr über eine Antwort freuen!
    Vielen Dank schon mal im Voraus!

    Liebe Grüße von Tina

  13. Super! Bräuchte jetzt nur noch ne Mail-Adresse von Dir. Denn über diejenige, die unter "Kontakt" angegeben ist, kann man keine Anhänge verschicken. Auch "antworten" bez. Deiner Nachricht bei mir funktionierte leider nicht. Meine Addy hast Du ja.
    Vielen Dank, dass Du mit helfen willst! Freu ich mich total darüber, hatte die Hoffnung fast schon aufgegeben...

  14. Lieber Frank, ganz herzlichen Dank!
    Dank Deiner netten und kompetenten Hilfe werden nun meine Kommentare auch hervorgehoben.
    Super Unterstützung - vielen Dank!

    Viele Grüße von Tina

Kommentare sind geschlossen.