Wie Sie Ihr WordPress-Kommentar-Layout gestalten

Vor kurzem haben wir Ihnen gezeigt , wie Sie das WordPress-Kommentarformular gestalten können, und wir dachten, es wäre unvollständig, wenn wir nicht auch über die Gestaltung des WordPress-Kommentarlayouts schreiben würden. In der Vergangenheit haben wir besprochen, dass es standardmäßig von WordPress generierte CSS-Klassen und IDs gibt, die es Theme-Designern erleichtern, ihre Vorlagen zu gestalten. In diesem Artikel werden wir diese Standardklassen verwenden, um Ihnen zu zeigen, wie Sie Ihr WordPress-Kommentar-Layout gestalten können, und einige der coolen Dinge, die Sie damit tun können.

Für dieses Beispiel werden wir das standardmäßige Twenty Twelve WordPress-Theme in diesem Artikel modifizieren. Hinweis: Dieser Artikel richtet sich an angehende Theme-Designer und Heimwerker, die über ein gutes Verständnis von HTML und CSS verfügen.

Standard-WordPress-Kommentar-Klassen

Standardmäßig erzeugt WordPress diese Klassen für Elemente in der Kommentarvorlage:

/*Comment Output*/

.commentlist .reply {}
.commentlist .reply a {}

.commentlist .alt {}
.commentlist .odd {}
.commentlist .even {}
.commentlist .thread-alt {}
.commentlist .thread-odd {}
.commentlist .thread-even {}
.commentlist li ul.children .alt {}
.commentlist li ul.children .odd {}
.commentlist li ul.children .even {}

.commentlist .vcard {}
.commentlist .vcard cite.fn {}
.commentlist .vcard span.says {}
.commentlist .vcard img.photo {}
.commentlist .vcard img.avatar {}
.commentlist .vcard cite.fn a.url {}

.commentlist .comment-meta {} 
.commentlist .comment-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {}

.commentlist .parent {}
.commentlist .comment {}
.commentlist .children {}
.commentlist .pingback {}
.commentlist .bypostauthor {}
.commentlist .comment-author {}
.commentlist .comment-author-admin {}

.commentlist {}
.commentlist li {}
.commentlist li p {}
.commentlist li ul {}
.commentlist li ul.children li {}
.commentlist li ul.children li.alt {}
.commentlist li ul.children li.byuser {}
.commentlist li ul.children li.comment {}
.commentlist li ul.children li.depth-{id} {}
.commentlist li ul.children li.bypostauthor {}
.commentlist li ul.children li.comment-author-admin {}

#cancel-comment-reply {}
#cancel-comment-reply a {}

Wie Sie herausfinden, welche CSS-Klassen Sie bearbeiten müssen

Bevor wir uns der Gestaltung des WordPress-Kommentarlayouts widmen, ein kleiner Tipp für unsere neuen Benutzer. Die Webbrowser Google Chrome und Mozilla Firefox verfügen über ein praktisches Tool, mit dem Sie Ihre Fähigkeiten bei der Entwicklung von WordPress-Themen verbessern können. Das Tool heißt “ Element inspizieren„. Gehen Sie einfach mit der Maus auf ein Element auf einer Webseite, klicken Sie mit der rechten Maustaste und wählen Sie Element inspizieren. Ihr Browserfenster wird in zwei Zeilen aufgeteilt, und im unteren Fenster sehen Sie den Quellcode des Elements. Im unteren Fenster sehen Sie auch die CSS-Elemente und wie sie gestylt sind. Sie können die CSS-Elemente dort sogar zu Testzwecken bearbeiten. Wichtig ist, dass alles, was Sie mit der Funktion „Element inspizieren“ ändern, nur für Sie sichtbar ist. Sobald Sie die Seite aktualisieren, verschwinden diese Änderungen. Um die Änderungen dauerhaft zu machen, müssen Sie Ihre style.css-Datei oder andere geeignete Dateien in Ihren Themes verwenden.

Hinzufügen von ungeraden und geraden Hintergrundfarben für Kommentare

Eine unterschiedliche Hintergrundfarbe für ungerade und gerade Kommentare ist ein Designtrend, den es schon seit einigen Jahren gibt. Es hilft der Lesbarkeit, besonders wenn Sie viele Kommentare haben. Außerdem sieht es bei bestimmten Themenfarben sehr gut aus, weshalb viele Designer diese Funktion nutzen möchten. Um den Designern zu helfen, dieses Ziel zu erreichen, fügt WordPress jedem Kommentar eine ungerade bzw. gerade Klasse hinzu.

Sie können das ungerade/gerade Styling für Kommentare ganz einfach in der style.css Ihres Themes hinzufügen, indem Sie den folgenden Code einfügen.

.commentlist .even .comment { 
background-color:#ccddf2; 
} 
.commentlist .odd .comment {
background-color:#CCCCCC;
}

Das Ergebnis würde etwa so aussehen:

Stilisierung von Kommentarautor und Metainformationen

WordPress fügt auch Klassen zu den Elementen hinzu, die in jedem Kommentar-Header angezeigt werden. Dies ermöglicht es Theme-Designern, die Anzeige von Autoreninformationen und anderen Kommentar-Meta-Informationen wie Datum und Uhrzeit des Kommentars anzupassen. Hier ist ein Beispielcode, den Sie in die style.css-Datei Ihres Themes einfügen können, um diese Elemente anders zu gestalten. In diesem Beispiel haben wir der Kommentar-Meta eine Hintergrundfarbe und etwas Abstand hinzugefügt.

.comments-area article header {
	margin: 0 0 48px;
	overflow: hidden;
	position: relative;
	background-color:#55737D;
	color:#FFFFFF;
	padding: 10px;
}

So sollte es aussehen:

Kommentare von Beitragsautoren anders gestalten

Oft sieht man, dass Kommentare von Beitragsautoren entweder mit einer anderen Hintergrundfarbe oder einem zusätzlichen Abzeichen hervorgehoben werden. WordPress fügt eine Standardklasse bypostauthor zu allen Kommentaren hinzu, die vom Autor des Beitrags erstellt werden. WordPress-Theme-Designer können diese Klasse verwenden, um Kommentare von Beitragsautoren anders zu gestalten.

Einige Themes verwenden ihre eigene Callback-Funktion, um Kommentare anzuzeigen. Mit Hilfe der Callback-Funktion können diese Themes zusätzliche Informationen zu einem Kommentar nach Beitragsautor hinzufügen. Twenty Twelve verwendet zum Beispiel die folgende Zeile in der Kommentar-Callback-Funktion twentytwelve_comment() (in der Datei functions.php des Themes).

// If current post author is also comment author, make it known visually.

( $comment->user_id === $post->post_author ) ? '<span> ' . __( 'Post author', 'twentytwelve' ) . '</span>' : '' );

Dieser Code fügt <span>Post Author</span> zu den Kommentar-Meta-Informationen hinzu. Je nachdem, wie Ihr WordPress-Theme mit Kommentaren des Beitragsautors umgeht, können Sie dies nach Belieben ändern.

Wenn Sie ein anderes Theme als Twenty Twelve verwenden, müssen Sie herausfinden, wie Ihr Theme mit Kommentaren umgeht. Öffnen Sie einfach die Datei comments.php Ihres Themes. Wenn Ihr Theme eine eigene Callback-Funktion verwendet, sehen Sie diese in der Funktion wp_list_comments, etwa so:

<?php wp_list_comments( array( 'callback' => 'twentytwelve_comment', 'style' => 'ol' ) ); ?>

Im obigen Beispiel können Sie sehen, dass das Thema twentytwelve_comment als Callback-Funktion verwendet. Wenn eine Callback-Funktion angegeben ist, ist der wahrscheinlichste Ort, an dem Sie diese Funktion finden, die Datei functions.php Ihres Themes.

In diesem Beispiel ändern wir diese Funktion so, dass der Editor anstelle des Beitragsautors angezeigt wird. Dazu haben wir die Kommentar-Callback-Funktion wie folgt geändert:

// If current post author is also comment author, make it known visually.

( $comment->user_id === $post->post_author ) ? '<span> ' . __( 'Editor', 'twentytwelve' ) . '</span>' : '');

Wir werden auch das Aussehen der Funktion ändern, indem wir in der style.css-Datei unseres Themas Folgendes hinzufügen:

li.bypostauthor cite span {
	color: #21759b;
	background-color: #f8f0cb;
	background-image: none;
	border: 1px solid #f8f0cb;
	border-radius: 3px;
	box-shadow: none;
	padding: 3px;
	font-weight:bold;
}

So würde es dann aussehen:

Styling des Kommentar-Antwort-Links in WordPress-Kommentaren

Die meisten WordPress-Themes haben einen Antwort-Link unter jedem Kommentar. Diese Funktion wird nur angezeigt, wenn Sie die Kommentarfunktion aktiviert haben. Um Themenkommentare zu aktivieren, gehen Sie zu Ihrer WordPress-Verwaltung(Einstellungen “ Diskussion). Schauen Sie sich den Abschnitt an, in dem andere Kommentareinstellungen stehen, und markieren Sie das Kästchen für die Aktivierung von verschachtelten Kommentaren.

Die von WordPress generierten Standard-CSS-Klassen für den Antwort-Link sind reply und comment-reply-link. Wir werden diese Klassen verwenden, um den Antwort-Link zu ändern und in eine CSS-Schaltfläche zu verwandeln.

.reply { 
	float:right;
	margin:0 10px 10px 0;
	text-align:center;
	background-color: #55737D;
	border:1px solid #55737D;
	border-radius:3px;
	padding:3px;
	width:50px;
	box-shadow: 1px 1px 2px 2px #4f4f4f;
}

.comment article {
	padding-bottom:2.79rem;
}

a.comment-reply-link,
a.comment-edit-link {
	color: #FFFFFF;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	text-decoration:none;
}

a.comment-reply-link:hover,
a.comment-edit-link:hover {
	color: #f6e7d7;
}

So würde es aussehen:

Stilisierung der Schaltfläche „Kommentar bearbeiten

In den meisten WordPress-Themes sehen eingeloggte Benutzer mit der Möglichkeit, Kommentare zu bearbeiten, einen Link zum Bearbeiten von Kommentaren unter jedem Kommentar. Hier ist ein kleines CSS, das die Standardklasse comment-edit-link verwendet, um das Aussehen des Links zu ändern.

a.comment-edit-link {
	float:left;
	margin:0 0 10px 10px;
	text-align:center;
	background-color: #55737D;
	border:1px solid #55737D;
	border-radius:3px;
	padding:3px;
	width:50px;
	box-shadow: 1px 1px 2px 2px #4f4f4f;
}

So würde es aussehen:

Styling Abbrechen Kommentar Antworten Link

In den meisten guten WordPress-Themes öffnet ein Klick auf den Reply-Link das Kommentarformular direkt unter dem Kommentar, auf den Sie antworten, mit einem Link zum Abbrechen der Kommentarantwort. Lassen Sie uns diesen Link zum Abbrechen der Kommentarantwort ändern, indem wir die Standard-CSS-ID cancel-comment-reply verwenden.

#cancel-comment-reply-link  { 
	text-align:center;
	background-color: #55737D;
	border:1px solid #55737D;
	border-radius:3px;
	padding:3px;
	width:50px;
	color:#FFFFFF;
	box-shadow: 1px 1px 2px 2px #4f4f4f;
	text-decoration:none;
}

So würde es aussehen:

Gestalten des WordPress-Kommentarformulars

Brauchbare, ästhetisch ansprechende und stilvolle Kommentarformulare ermutigen die Benutzer, einen Kommentar in Ihrem Blog zu hinterlassen. Wir haben bereits einen ausführlichen Artikel darüber geschrieben, wie man das WordPress-Kommentarformular gestaltet. Wir empfehlen Ihnen, sich diesen anzusehen, um zu sehen, wie Sie Ihr WordPress-Kommentarformular auf die nächste Stufe bringen können.

Wir hoffen, dass dieser Artikel Ihnen bei der Gestaltung Ihres WordPress-Kommentar-Layouts hilft. Wenn Sie Fragen oder Anregungen haben, dann lassen Sie es uns bitte wissen, indem Sie unten einen Kommentar hinterlassen.