Abonniere die neusten Artikel via RSS-Feed oder Atom und verfolge die Kommentare ebenso via RSS-Feed oder Atom-Feed
Anzeige
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;
}
?>
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.
Das Weblog wird angetrieben von WordPress und aktuell gibt es 854 Beiträge, 15060 Kommentare in 14 Kategorien und 450 Tags.
Das Blog wird liebevoll mit xHTML & CSS in Handarbeit gestaltet.
Design und Code ist unter Copyright
© 2001 - 2010 bueltge.de [by:ltge.de]
2 Kommentare und 1 Trackback zu „WordPress Kommentare als Zeitlinie visualisieren“
31. Oktober 2007 um 14:20
26. Juli 2009 um 14:57
Wo finde ich denn eine Demo? Bevor man sich das einbaut, möchte man doch erst mal sehen, wie es aussieht.
26. Juli 2009 um 20:12
@Nick: es gibt kein Demo, hier im Blog ist es nicht mehr eingebaut und das Design kannst du via CSS bestimmen.
Kommentar schreiben
Kommentar-Hilfe
Bezug auf Textstellen:
Du kannst direkt bezug auf Textstellen im Beitrag nehmen. Dazu muss lediglich der Bereich im Artikel markiert werden; daraufhin erscheint ein Button, der den markierten Text in das Kommentarfeld übernimmt und als Zitat auszeichnet. Die Funktion ist nur bei aktivem JavaScript nutzbar.
xHTML:
Du kannst folgende Tags benutzen:
<a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <code> <pre> <em> <strong> <strike> <ul> <ul> <li>Achte darauf, wenn du Code im Kommentar hinterlegen willst, dann muss der Code maskiert sein. Dann wird er nicht interpretiert. Der Code muss mit Hilfe von HTML-Entities dargestellt werden, d.h. dass man z.B. < als
<und > als>einfügt.E-Mail-Benachrichtigung bei neuen Kommentaren ?
Wenn der Haken in der Checkbox gesetzt ist, dann wirst du über neue Kommentare vie E-Mail informiert. Der Versand erfolgt nur, wenn du die URL in der Bestätigungs-E-Mail genutzt hast oder schon Abonnent hier im Blog bist.
Kommentar erscheint nicht:
Alle Kommentare werden manuell geprüft, freigegeben und nach Möglichkeit beantwortet. Bitte um etwas Geduld und Nachsicht.
Identifikationsbilder (Avatare):
Auf Gravatar.com kann man sich mit seiner E-Mail-Adresse registrieren und ein Bild hochladen, dann erscheint dieses Gravatar hier und in vielen weiteren Blogs.
Spamschutz:
Das Kommentarformular ist mit einem JavaScript-Spamschutz ausgerüstet. Solltest du diesen Artikel ohne JavaScript besuchen und kommentieren wollen, so muss du die Frage beantworten und das jeweilige Wort in das Textfeld eingeben.