So gestalten Sie das Layout Ihrer WordPress-Kommentare

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

Zu diesem Beispiel werden wir das Standard-Twenty-Twelve-WordPress-Theme in diesem Artikel modifizieren. Hinweis: Dieser Artikel richtet sich an angehende Theme-Designer und DIY-Benutzer, die ein gutes Verständnis von HTML und CSS haben.

Standard-WordPress-Kommentar-Klassen

Standardmäßig generiert 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 {}

So finden Sie heraus, welche CSS-Klassen Sie bearbeiten müssen

Before we move on to styling WordPress comments layout, a little tip for our new users. Google Chrome and Mozilla Firefox web browsers come with a handy tool that you can use to improve your WordPress theme development skills. The tool is called Inspect Element. Simply take your mouse to an element on a web page, right click and choose inspect element. Your browser window will split into two rows and in the lower window you will see the source code of that element. Also in the lower window, you will be able to see CSS elements and how they are styled. You can even edit the CSS in there for testing purposes. It’s important to remember, anything you change using the Inspect Element is only visible to you. The moment you refresh the page, those changes will disappear. To make the changes permanent, you have to use your style.css file or other appropriate files in your themes.

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

Eine unterschiedliche Hintergrundfarbe für ungerade und gerade Kommentare ist ein Designtrend, der seit einigen Jahren besteht. Er verbessert die Lesbarkeit, insbesondere wenn Sie viele Kommentare haben. Er sieht auch bei bestimmten Theme-Farben sehr gut aus, weshalb viele Designer diese Funktionalität nutzen möchten. Um Designern bei der Erreichung dieses Ziels zu helfen, fügt WordPress jeweils eine ungerade und eine gerade Klasse zu jedem Kommentar hinzu.

Sie können die ungerade/gerade Formatierung 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 ungefähr so aussehen:

Gestaltung von Kommentarautoren- und Meta-Informationen

WordPress fügt auch Klassen zu Elementen hinzu, die in der Kopfzeile jedes Kommentars angezeigt werden. Dies ermöglicht es Theme-Designern, die Anzeige von Autoreninformationen und anderen Kommentar-Metadaten 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 unterschiedlich zu gestalten. In diesem Beispiel haben wir der Kommentar-Metadaten 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 des Beitragsautors anders gestalten

Oftmals sehen Sie, dass Kommentare des Beitragsautors entweder mit einer anderen Hintergrundfarbe oder einem zusätzlichen Abzeichen hervorgehoben werden. WordPress fügt allen Kommentaren des Beitragsautors die Standardklasse bypostauthor hinzu. WordPress-Theme-Designer können diese Klasse verwenden, um Kommentare des Beitragsautors anders zu gestalten.

Einige Themes verwenden ihre eigene Callback-Funktion zur Anzeige von Kommentaren. Mithilfe der Callback-Funktion können diese Themes zusätzliche Informationen zu einem Kommentar des Beitragsautors hinzufügen. Zum Beispiel verwendet Twenty Twelve die folgende Zeile in der Kommentar-Callback-Funktion twentytwelve_comment() (befindet sich 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 Metadaten des Kommentars hinzu. Je nachdem, wie Ihr WordPress-Theme Kommentare vom Beitragautor behandelt, können Sie dies beliebig ändern.

Wenn Sie ein anderes Theme als Twenty Twelve verwenden, müssen Sie herausfinden, wie Ihr Theme Kommentare behandelt. Öffnen Sie einfach die Datei comments.php Ihres Themes. Wenn Ihr Theme eine eigene Callback-Funktion verwendet, sehen Sie diese innerhalb der Funktion wp_list_comments, wie hier:

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

Im obigen Beispiel sehen Sie, dass das Theme twentytwelve_comment als Callback-Funktion verwendet. Wenn eine Callback-Funktion angegeben ist, ist der wahrscheinlichste Ort, um diese Funktion zu finden, die Datei functions.php Ihres Themes.

In diesem Beispiel ändern wir diese Funktion, um Editor anstelle von Beitragsautor anzuzeigen. Dazu haben wir die Kommentar-Callback-Funktion wie folgt modifiziert:

// 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 ändern, indem wir Folgendes in die style.css-Datei unseres Themes einfü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 aussehen:

Styling des Kommentar-Antwort-Links in WordPress-Kommentaren

Die meisten WordPress-Themes haben unter jedem Kommentar einen Antwortlink. Diese Funktionalität wird nur angezeigt, wenn Sie verschachtelte Kommentare aktiviert haben. Um verschachtelte Kommentare zu aktivieren, gehen Sie zu Ihrem WordPress-Admin (Einstellungen » Diskussion). Suchen Sie den Abschnitt, in dem andere Kommentareinstellungen aufgeführt sind, und aktivieren Sie das Kontrollkästchen für verschachtelte (verschachtelte) Kommentare aktivieren.

Die von WordPress für den Antwortlink generierten Standard-CSS-Klassen sind reply und comment-reply-link. Wir werden diese Klassen verwenden, um den Antwortlink zu modifizieren und ihn in einen CSS-Button umzuwandeln.

.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:

Styling des Kommentar-Bearbeitungsbuttons

In den meisten WordPress-Themes sehen angemeldete Benutzer mit der Berechtigung, Kommentare zu bearbeiten, unter jedem Kommentar einen Link zum Bearbeiten des Kommentars. Hier ist ein kleines CSS, das die Standardklasse comment-edit-link verwendet, um das Erscheinungsbild 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 des Links zum Abbrechen der Kommentarantwort

In most good WordPress themes, clicking on the Reply link opens up the comment form just below the comment you are replying to with a link to cancel comment reply. Lets modify this cancel comment reply link by using the default CSS ID cancel-comment-reply.

#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:

Styling des WordPress-Kommentarformulars

Benutzbare, ästhetisch ansprechende und stilvolle Kommentarformulare ermutigen Benutzer, einen Kommentar auf Ihrem Blog zu hinterlassen. Zuvor haben wir einen detaillierten Artikel über das Styling des WordPress-Kommentarformulars geschrieben. Wir empfehlen Ihnen dringend, sich das anzusehen, um zu sehen, wie Sie Ihr WordPress-Kommentarformular auf die nächste Stufe heben können.

Wir hoffen, dass dieser Artikel Ihnen hilft, das Layout Ihrer WordPress-Kommentare zu gestalten. Wenn Sie Fragen oder Anregungen haben, lassen Sie es uns bitte wissen, indem Sie unten einen Kommentar hinterlassen.