6 Schönheitstipps für Deinen WordPress-Kommentarbereich

6 Schönheitstipps für Deinen WordPress-Kommentarbereich

Kommentare machen ein Blog erst lebendig. Mit den folgenden sechs Tipps bringst Du Leben in Deinen Kommentarbereich.

Den Kommentarbereich der meisten WordPress-Themes kann man als nüchtern-funktional beschreiben. Das ist praktisch, aber wenig einladend. Doch was macht einem ansprechenden Kommentarbereich aus? Zum Beispiel eine eigene Überschrift für das Formular, hervorgehobene Autoren-Kommentare, individuelle Farben, eine Paginierung für Beiträge mit vielen Kommentaren und die Möglichkeit, Kommentare zu liken. Wenn Du das alles willst, solltest Du weiterlesen. 😉

Voraussetzungen für diese Anleitung sind ein Hosting-Paket von STRATO, eine WordPress-Installation und Kenntnisse in PHP/CSS. Die beschriebenen Anpassungen beziehen sich auf das Theme Twentyseventeen. Bitte verwende ein Child Theme, damit Deine Anpassungen das nächste Theme-Update überleben.

Standard-Kommentarbereich
So sehen Kommentare bei Twentyseventeen standardmäßig aus.

Tipp 1: Kommentare hervorheben

Twentyseventeen hat ein helles und ein dunkles Farbschema zur Auswahl (Design -> Customizer -> Farben). In unserem Beispiel verwenden wir das helle Farbschema. Um die Kommentare und die Formularfelder vom weißen Hintergrund abzuheben, passt Du diese einfach per CSS an. Sämtliche Anweisungen kommen wie gewohnt in die style.css des Child Themes.

/* Leser-Kommentare hervorheben */
.comment-body {
	background: #f9f9f9;
	padding: 6px;
	border-radius: 3px;
}

Praktischerweise vergibt WordPress für Autoren-Kommentare eine eigene Klasse namens .bypostauthor. Damit kannst Du diese etwa durch eine dunklere Hintergrundfarbe oder einen Rahmen von den anderen abgrenzen:

/* Autoren-Kommentare hervorheben */
.bypostauthor > article {
	background: #ededed;
	padding: 6px;
	border-right: #ff9900 solid 10px;
	border-radius: 3px;
}

Das Pfeil-Icon neben dem Antworten-Link wirkt jetzt etwas deplatziert. Mit display:none kannst Du das ausblenden:

/* Antwort-Icon ausblenden */
.comment-reply-link .icon {
	display: none;
}
Kommentarbereich formatiert
Der Kommentar des Autors Thomas wird durch einen dunkleren Hintergrund und einen Rahmen auf der rechten Seite hervorgehoben.

Tipp 2: Überschrift für den Kommentarbereich ändern

Die Überschrift lautet standardmäßig „Schreibe einen Kommentar“. Um das zu ändern, lädst Du im Theme-Verzeichnis die Datei comments.php herunter und ersetzt folgende Zeile

comment_form();

durch diese

comment_form(array('title_reply'=>'Sag mir Deine Meinung!'));

Statt „Sag mir Deine Meinung!“ kannst Du natürlich auch irgendetwas anderes einfügen. Anschließend lädst Du die Datei in das Hauptverzeichnis Deines Child Themes.

Tipp 3: Feld für Website ausblenden

Mit den folgenden Zeilen blendest Du das Formularfeld für die Website aus. Füge den Code einfach in die functions.php Deines Child Themes ein:

/*URL-Feld ausblenden */
add_filter('comment_form_default_fields', 'remove_url');
function remove_url($fields) {
	if(isset($fields['url']))
 	unset($fields['url']);
 	return $fields;
 	}

Tipp 4: Formular bunter machen

Wie die Kommentare sieht auch das Kommentarformular im Auslieferungszustand etwas blass aus:

Kommentarformular unformatiert

Mit wenigen CSS-Anweisungen ist auch das schnell erledigt:

/* Kommentar-Formular anpassen */
#respond.comment-respond {
	background-color: #f1f1f1;
	border-radius: 3px;
	padding: 10px;
	}

.form-submit button, input[type="button"], input[type="submit"] {
	background-color: #ff9900;
}

So sieht das Formular aus, nachdem wir die Überschrift geändert, das Feld für die Website entfernt und Farben angepasst haben:

Kommentar-Formular formatiert

Tipp 5: Kommentarbereich in Seiten untergliedern

Unter einer hohen Zahl an Kommentaren leiden Performance und Übersicht. In dem Fall ist eine Aufteilung des Kommentarbereichs in mehrere Seiten sinnvoll. Dazu setzt Du im Backend unter Einstellungen -> Diskussion ein Häkchen bei „Breche Kommentare in Seiten um (…)“.

Kommentareinstellungen

Im Frontend erscheinen nun unterhalb des Kommentarbereichs Pfeile und Seitenzahlen. Damit können Deine Besucher bequemer durch die Kommentare navigieren:

Paginierung

Tipp 6: Like-Buttons hinzufügen

Liken und Favorisieren gehören zum digitalen Alltag. Dennoch: Obwohl das Bewerten anderer Posts die Interaktion steigert, verzichten die meisten Blogs auf diese Funktion. Dabei ist es mit dem Plugin Comments Like Dislike so einfach. Nachdem Du das Plugin installiert und aktiviert hast, kannst Du in den Plugin Settings unter dem Reiter Design Settings sogar Templates und die Farbe auswählen.

Plugin-Einstellungen

Wir haben uns natürlich für ein oranges Herz entschieden:

Kommentare mit Herz

Schlagworte:

Teilen

  1. Avatar

    Sandra sagte am

    Hallo!
    Eine Frage: ist das Plugin „Like“ bzw. „Disklike“ eigentlich DSGVO konform oder speichert es z. Bsp. die IP-Adresse?
    Ich hatte dieses Plugin mal im Einsatz, aber wieder heraus genommen nachdem die ganze Diskussion und Angstmacherei um die DSGVO los ging.
    Leider habe ich auf diese Frage vom Entwickler selbst keine Antwort erhalten, obwohl ich da dreimal nachgefragt habe. Vielleicht könnt ihr ja helfen!?

    Freundliche Grüße
    Sandra H.

    Antworten
    • Avatar

      Michael Poguntke sagte am

      Hallo Sandra,

      leider können auch wir hier nichts zu sagen, denn: Zur genauen Nutzung von WordPress und den vorhandenen Plugins können wir nicht viel sagen, da wir die Funktionsweise der einzelnen Plugins nicht im Detail kennen. Entsprechend können wir Dir hier auch keine Auskunft geben, was die Datenschutz-Konformität einzelner Plugins angeht.

      Unter https://strato.de/blog/dsgvo-kommentarfunktion-wordpress/ geben wir ein paar Tipps, wie man den Kommentarbereich seiner WordPress Installation DSGVO-konform gestaltet. Vielleicht hilft das?`

      Viele Grüße
      Michael

      Antworten
  2. Avatar

    Sandra sagte am

    Genau solch einen Artikel habe ich gesucht! Wie das Webseite-Feld deaktiviert wird, weiß ich schon mal, dank der tollen Anleitung. ABER: gibt es auch die Möglichkeit eine eigene Checkbox mit entsprechendem Text in das Kommentarformular einzubauen? Uuund: gibt es eine Möglichkeit die Felder für Name und für E-Mail Adresse aufeinander abzustimmen, was deren Länge betrifft? Meine beiden Felder unterscheiden sich leider in ihrer jeweiligen Länge und das sieht, mit Verlaub, ganz schön doof aus! Es wäre wahnsinnig nett, wenn ich eine Antwort bekommen könnte. Dankeschön schon mal im voraus dafür!

    LG
    Sandra H.

    Antworten
    • Avatar

      Oliver Meiners sagte am

      Hallo Sandra,

      wie Du eine Checkbox mit benutzerdefiniertem Text erstellst, erfährst Du in diesem Beitrag: https://strato.de/blog/wordpress-datenschutz-kommentarfunktion/

      Was Deine Frage nach der Länge der Felder für Name und E-Mail-Adresse angeht, kommt hier die Antwort von unserem Autor Christian:

      „Ohne Dein Theme zu kennen, weiß ich nicht welche CSS-Klassen bzw. IDs Du dafür ansprechen musst. Das findest Du mit den Entwicklerwerkzeugen Deines Browsers heraus, beim Firefox zum Beispiel Taste F12 drücken und dann mit der Maus über die Felder hovern. In dem Falls sind das wahrscheinlich #author und #email. In der CSS-Datei gibst Du dann die passenden (am besten prozentualen) Werte ein.“

      Viele Grüße

      Antworten
  3. Avatar

    Edgar, Webdesigner Bonn sagte am

    Webdesign mit WordPress ist schon sehr einfach. Sicherlich sind tiefgehende Webdesign-Kentnisse immer hilfreich. Eine einfache Seite kann man allerdings (mit etwas Übung) auch ohne erstellen. Auf jeden Fall vielen Dank für die hilfreichen Tipps in diesem Artikel 🙂

    Antworten
  4. Avatar

    Daniel sagte am

    Ich finde es tragisch, wenn mit WordPress als das CMS für Bloger geworben wird, und dann die wichtigste Funktion Schrott ist und mit Programmierkenntnisen erst brauchbar wird. Sonst kann fast alles verändert werden aber hier nichts. Sehr schade, dass man hier nicht mit einfachen Dingen den Style, Farbe und sonst noch was verändern kann wie auf jeder Seite. Ich wollte mir auch mit WP eine Seite zusammenstellen. Muss mir das nun aber noch einmal überlegen.

    Antworten
    • Avatar

      Oliver Meiners sagte am

      Hallo Daniel,

      ich hoffe sehr, dass unser Artikel Dir trotzdem weiterhilft.

      Wenn Du mehr über individuelle Anpassungsmöglichkeiten in WordPress lernen möchtest, empfehle ich Dir unser E-Book „WordPress für Einsteiger“. Vielleicht hilft es Dir ja bei Deiner Entscheidung.

      Als Alternative für WordPress gibt es dann ja immer noch unseren Homepage-Baukasten.

      Ich wünsche Dir in jedem Fall viel Erfolg mit der eigenen Website 🙂

      Viele Grüße
      Oliver

      Antworten

Sie können erst kommentieren, wenn Sie unseren Datenschutzbestimmungen und den Cookies zugestimmt haben. Aus Datenschutzrechtlichen Gründen dürfen wir andernfalls keine personenbezogenen Daten von Ihnen aufzeichnen.

Klicken Sie dazu einfach unten im Browser Fenster auf den blauen Button Akzeptieren. Nach dem Neuladen der Seite können Sie Ihr Kommentar schreiben.

Diese Webseite verwendet Cookies, um die Nutzung der Seite zu verbessern, den Erfolg von Werbemaßnahmen zu messen und interessengerechte Werbung anzuzeigen. Durch die Nutzung dieser Seite erklären Sie sich damit einverstanden. Informationen