WordPress Kommentare als Zeitlinie visualisieren

Die Zeiten ändern sich.

Dieser Beitrag scheint älter als 15 Jahre zu sein – eine lange Zeit im Internet. Der Inhalt ist vielleicht veraltet.

Die Kommentarfunktion von Weblogs ist sicher eine der bedeutendsten Bereicherungen. Eine Funktion die ich nicht missen möchte und die einem ein Feedback zu den veröffentlichten Artikeln geben kann.
Um die Darstellung der Kommentare gibt es eine ganze Reihe von Tutorials. Auch hier im Blog gab es dazu schon einige Hinweise und Tipps um die Gestaltung zu verbessern.

In diesem Artikel möchte ich eine Lösung von Jeff Minard vorstellen, der die Kommentare in Abhängigkeit ihres Zeitpunktes mit Hilfe einer Zeitlinie darstellt. Die Lösung habe ich im aktuellen Design integriert und im Folgenden findet ihr die Schritt für Schritt-Anleitung dazu.

Dazu muss das Template comments.php im verwendeten Theme bearbeitet werden. Öffnet diese Datei also in eurem Editor des Vertrauens. Dort sucht ihr den Bereich, der die Ausgabe der Kommentare übernimmt. Dieser ist in der Regel, je nach verwendeten Theme, an dem List-Tag <ol> oder <ul> zu erkennen. Innerhalb dieses Bereiches kommen folgende Zeilen.



    


<?php
$last_comment = $comments[count($comments)-1]->comment_date;
$bar_length = strtotime($last_comment) - strtotime($post->post_date);
$bar_length = $bar_length + ($bar_length*.03); // 3% Weite
?>

Im Anschluss erweitern wir die Ausgabe des einzelnen Kommentars, welcher in den meisten Themes mit dem li-Tag innerhalb der <ol> oder <<l> ausgegeben wird.
Dort fügt ihr folgenden Syntax ein. Dabei entsteht hier die Zeitlinie, die dann mittels CSS formatiert wird. Dabei wird der Abstand von Links mittels der Kommentar-Zeitpunktes berechnet und direkt dem div zugewiesen (<div style="left:).



  •

    • Nun erfolgt eine exemplarische Formatierung mittels CSS im Stylesheet eures Themes - style.css. Diese könnt ihr entsprechend anpassen an eure Bedürfnisse.

    
.commentlist li {
position: relative;
_height: 1px;
}

.alt .commenttimeline {
position: absolute;
top: 50px;
left: 8px;
right: 8px;
height: 1px;
_width: 102.5%;
}

.commenttimeline {
position: absolute;
top: 51px;
left: 8px;
right: 8px;
height: 1px;
_width: 102.5%;
}

.mein_kommentar .commenttimeline {
top: 50px;
}

.commenttimeline div {
background: #793907;
height: 5px;
width: 3%;
_line-height: 1px;
_font-size: 1px;
}

    Ein Hinweis noch zum Abschluss. Der Wert für den Abstand wird errechnet auf Grund des Veröffentlichungszeitpunktes des Beitrags. Dadurch ist der Wert bei älteren (anderes Jahr) Beiträgen außerhalb der Darstellung und es ist, je nach Theme, nicht unbedingt schön in der optischen Darstellung. Eine Lösung ist es, das Datum zu prüfen und die Zeitlinie nur darzustellen, wenn der Beitrag im aktuellen Jahr veröffentlicht wurde.

    

      


<?php
$today = getdate();
$today = $today[year];
$last_comment = $comments[count($comments)-1]->comment_date;
if (substr($post->post_date, 0, 4) == $today) {
	$bar_length = strtotime($last_comment) - strtotime($post->post_date);
	$bar_length = $bar_length + ($bar_length*.04); // 4% slack, width of each 'tick mark'
	$timeline = 1;
}
?>

    Von Frank Bültge

    bueltge.de [by:ltge.de] wird von Frank Bültge geführt, administriert und gestaltet. Alle Inhalte sind persönlich von mir ausgewählt und erstellt, nach bestem Gewissen und Können, was die Möglichkeit von Fehlern nicht ausschließt.