Kommentare ab WordPress 2.7 formatieren

WordPress erlaubt seit Version 2.7 „Threaded Comments“ zu nutzen, ohne Plugin- oder Themeerweiterung. Dazu muss das bestehende Theme die API der Kommentare unterstützen. Im Netz finden sich einige schöne Artikel dazu und das Basis-Theme von mir wird gerade vorbereitet. Noch gibt es keine Dokumentation und ohne diese will ich es nicht frei geben - bitte ein wenig Geduld. Um nun aber die Funktion der „Threaded Comments“ entsprechend darzustellen und für den Besucher ansprechend zu formatieren stehen eine ganze Reihe von Klassen zur Verfügung. Alle möglichen Zugriffe via CSS sind im folgenden gelistet und helfen dem einen oder anderen aber beim Erarbeiten des CSS.

Die Zeiten ändern sich.

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

WordPress erlaubt seit Version 2.7 „Threaded Comments“ zu nutzen, ohne Plugin- oder Themeerweiterung. Dazu muss das bestehende Theme die API der Kommentare unterstützen. Im Netz finden sich einige schöne Artikel dazu und das Basis-Theme von mir wird gerade vorbereitet. Noch gibt es keine Dokumentation und ohne diese will ich es nicht frei geben - bitte ein wenig Geduld. Dank Andreas geht es vielleicht ein wenig schneller und ich habe einen verlässlichen und fähigen Unterstützer.

Um nun aber die Funktion der „Threaded Comments“ entsprechend darzustellen und für den Besucher ansprechend zu formatieren stehen eine ganze Reihe von Klassen zur Verfügung. Nicht alle muss man nutzen und viele entstehen auch nur durch die Unterstützung der Semantik mit Mikroformaten in WordPress.

Alle möglichen Zugriffe via CSS sind im folgenden gelistet und helfen dem einen oder anderen aber beim Erarbeiten des CSS und ersparen ein wenig Arbeit mit Hilfe von Firebug und co.


ol.commentlist {}
ol.commentlist li {}
ol.commentlist li.alt {}
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment {}
ol.commentlist li.comment div.comment-author {}
ol.commentlist li.comment div.vcard {}
ol.commentlist li.comment div.vcard cite.fn {}
ol.commentlist li.comment div.vcard cite.fn a.url {}
ol.commentlist li.comment div.vcard img.avatar {}
ol.commentlist li.comment div.vcard img.avatar-32 {}
ol.commentlist li.comment div.vcard img.photo {}
ol.commentlist li.comment div.vcard span.says {}
ol.commentlist li.comment div.commentmetadata {}
ol.commentlist li.comment div.comment-meta {}
ol.commentlist li.comment div.comment-meta a {}
ol.commentlist li.comment * {} - (p, em, strong, blockquote, ul, ol, etc.)
ol.commentlist li.comment div.reply {}
ol.commentlist li.comment div.reply a {}
ol.commentlist li.comment ul.children {}
ol.commentlist li.comment ul.children li {}
ol.commentlist li.comment ul.children li.alt {}
ol.commentlist li.comment ul.children li.bypostauthor {}
ol.commentlist li.comment ul.children li.byuser {}
ol.commentlist li.comment ul.children li.comment {}
ol.commentlist li.comment ul.children li.comment-author-admin {}
ol.commentlist li.comment ul.children li.depth-2 {}
ol.commentlist li.comment ul.children li.depth-3 {}
ol.commentlist li.comment ul.children li.depth-* {}
/* * steht für die Einstellungen der Antwort-Tiefe im Backend */
ol.commentlist li.comment ul.children li.depth-10 {}
ol.commentlist li.comment ul.children li.odd {}
ol.commentlist li.even {}
ol.commentlist li.odd {}
ol.commentlist li.parent {}
ol.commentlist li.pingback {}
ol.commentlist li.pingback div.comment-author {}
ol.commentlist li.pingback div.vcard {}
ol.commentlist li.pingback div.vcard cite.fn {}
ol.commentlist li.pingback div.vcard cite.fn a.url {}
ol.commentlist li.pingback div.vcard span.says {}
ol.commentlist li.pingback div.commentmetadata {}
ol.commentlist li.pingback div.comment-meta {}
ol.commentlist li.pingback div.comment-meta a {}
ol.commentlist li.pingback * {} 
/* * steht für Tags; z.B.: p, em, strong, blockquote, ul, ol, etc. */
ol.commentlist li.pingback div.reply {}
ol.commentlist li.pingback div.reply a {}
ol.commentlist li.pingback ul.children {}
ol.commentlist li.pingback ul.children li {}
ol.commentlist li.pingback ul.children li.alt {}
ol.commentlist li.pingback ul.children li.bypostauthor {}
ol.commentlist li.pingback ul.children li.byuser {}
ol.commentlist li.pingback ul.children li.comment {}
ol.commentlist li.pingback ul.children li.comment-author-admin {}
ol.commentlist li.pingback ul.children li.depth-2 {}
ol.commentlist li.pingback ul.children li.depth-3 {}
ol.commentlist li.pingback ul.children li.depth-4 {}
ol.commentlist li.pingback ul.children li.depth-* {}
/* * steht für die Einstellungen der Antwort-Tiefe im Backend */
ol.commentlist li.pingback ul.children li.depth-10 {}
ol.commentlist li.pingback ul.children li.odd {}
ol.commentlist li.thread-alt {}
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}

via Chris Harrison

Comments are closed.