So gestalten Sie das WordPress-Kommentarformular (ultimativer Leitfaden)

Möchten Sie das Design des WordPress-Kommentarformulars auf Ihrer Website ändern? Bei WPBeginner haben wir jahrelang mit verschiedenen Möglichkeiten zur Steigerung des Benutzerengagements experimentiert und festgestellt, dass ein gut aussehendes, benutzerfreundliches Kommentarformular einen riesigen Unterschied machen kann.

Kommentare spielen eine wichtige Rolle beim Aufbau des Nutzerengagements auf einer Website. Wenn Sie es den Nutzern leicht und optisch ansprechend machen, Kommentare zu hinterlassen, fördern Sie mehr Diskussionen und Interaktionen auf Ihrer Website.

In diesem Artikel zeigen wir Ihnen, wie Sie das WordPress-Kommentarformular einfach gestalten können, um das Engagement auf Ihrer Website zu steigern.

Bevor Sie beginnen

WordPress-Themes steuern das Erscheinungsbild Ihrer Website. Jedes WordPress-Theme enthält mehrere Dateien, darunter Vorlagendateien, functions.php-Datei, JavaScripts und Stylesheets.

Stylesheets enthalten die CSS-Regeln für alle Elemente, die von Ihrem WordPress-Theme verwendet werden. Sie können Ihr eigenes benutzerdefiniertes CSS hinzufügen, um die Stilregeln Ihres Themes zu überschreiben.

Wenn Sie dies noch nicht getan haben, lesen Sie unseren Artikel So fügen Sie ganz einfach benutzerdefiniertes CSS zu Ihrer WordPress-Website hinzu für Anfänger.

Abgesehen von CSS müssen Sie möglicherweise auch einige Funktionen hinzufügen, um das Standardaussehen Ihres WordPress-Kommentarformulars zu ändern. Wenn Sie dies noch nie zuvor getan haben, lesen Sie unseren Artikel über das Kopieren und Einfügen von Code in WordPress.

Nichtsdestotrotz werfen wir einen Blick darauf, wie das WordPress-Kommentarformular gestaltet wird.

Da dies ein ziemlich umfassender Leitfaden ist, haben wir ein Inhaltsverzeichnis für eine einfache Navigation erstellt:

• Styling des WordPress-Kommentarformulars mit dem SeedProd Theme Builder
• Change WordPress Comments with Default CSS Classes
• Social Login zu WordPress-Kommentaren hinzufügen
• Text der Kommentarrichtlinie im WordPress-Kommentarformular hinzufügen
• Kommentartextfeld nach unten verschieben
• Website (URL) Feld aus dem WordPress-Kommentarformular entfernen
• Ein Kontrollkästchen zum Abonnieren von Kommentaren in WordPress hinzufügen
• Benutzerdefinierte Felder zum WordPress-Kommentarformular hinzufügen

Styling des WordPress-Kommentarformulars mit dem SeedProd Theme Builder

Diese Methode erfordert SeedProd, das der beste WordPress-Seiten- und Theme-Builder-Plugin auf dem Markt ist.

Es wird für Anfänger ohne Programmierkenntnisse empfohlen. Der Nachteil dieser Methode ist jedoch, dass sie Ihr bestehendes WordPress-Theme durch ein benutzerdefiniertes Theme ersetzt.

Installieren und aktivieren Sie zuerst das SeedProd Plugin. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Thema Installation eines WordPress-Plugins.

Hinweis: Sie benötigen mindestens den PRO-Plan, um auf die Theme-Builder-Funktion zugreifen zu können.

Nach der Aktivierung müssen Sie Vorlagen für Ihr benutzerdefiniertes WordPress-Theme erstellen. SeedProd ermöglicht es Ihnen, diese Vorlagen einfach mit einem der integrierten Themes zu generieren.

Ausführliche Anleitungen finden Sie in unserem Tutorial zum Erstellen eines benutzerdefinierten WordPress-Themes ohne Code.

Sobald Sie Ihre Theme-Vorlagen generiert haben, müssen Sie unter der Vorlage „Einzelner Beitrag“ auf den Link „Design bearbeiten“ klicken.

Dies lädt die Vorschau des einzelnen Beitrags in der SeedProd Theme Builder-Oberfläche. Sie werden das Kommentarformular-Block am unteren Rand der Vorschau bemerken.

Klicken Sie einfach auf das Kommentarformular und Sie sehen seine Eigenschaften im linken Bereich.

Von hier aus können Sie eine Kommentar-Notiz oder eine Datenschutzerklärung hinzufügen. Sie können auch zum Tab 'Erweitert' wechseln, um den Stil des Kommentarformulars zu bearbeiten, ohne CSS-Code schreiben zu müssen.

Wenn Sie fertig sind, vergessen Sie nicht, auf die Schaltfläche „Speichern“ zu klicken, um Ihre Änderungen zu veröffentlichen.

SeedProd macht es super einfach, den Stil jedes Elements auf Ihrer Website zu ändern, ohne Code schreiben zu müssen.

Allerdings ist es ein Theme-Builder und Sie verwenden möglicherweise bereits ein WordPress-Theme, das Ihnen gefällt. In diesem Fall helfen Ihnen die folgenden Tipps, die Kommentarformularstile in WordPress manuell zu ändern.

Kommentarformularstil in WordPress ändern

In den meisten WordPress-Themes gibt es eine Vorlage namens comments.php. Diese Datei wird verwendet, um Kommentare und Kommentarformulare auf Ihren Blogbeiträgen anzuzeigen. Das WordPress-Kommentarformular wird mit der Funktion generiert: <?php comment_form(); ?>.

Standardmäßig generiert diese Funktion Ihr Kommentarformular mit drei Textfeldern (Name, E-Mail und Website), einem Textbereich für den Kommentartext, einer Checkbox für die DSGVO-Konformität und der Schaltfläche zum Absenden.

Sie können jedes dieser Felder einfach ändern, indem Sie die Standard-CSS-Klassen anpassen. Unten finden Sie eine Liste der Standard-CSS-Klassen, die WordPress jedem Kommentarformular hinzufügt.

#respond { }
#reply-title { }
#cancel-comment-reply-link { }
#commentform { }
#author { }
#email { }
#url { }
#comment
#submit
.comment-notes { }
.required { }
.comment-form-author { }
.comment-form-email { }
.comment-form-url { }
.comment-form-comment { }
.comment-form-cookies-consent { }
.form-allowed-tags { }
.form-submit

Durch einfaches Anpassen dieser CSS-Klassen können Sie das Erscheinungsbild Ihres WordPress-Kommentarformulars vollständig verändern.

Lassen Sie uns ein paar Dinge ändern, damit Sie eine gute Vorstellung davon bekommen, wie das funktioniert.

Zuerst beginnen wir damit, das aktive Formularfeld zu hervorzuheben. Das Hervorheben des aktuell aktiven Feldes macht Ihr Formular für Menschen mit besonderen Bedürfnissen zugänglicher und lässt Ihr Kommentarformular auf kleineren Geräten auch besser aussehen.

#respond {
background: #fbfbfb;
padding:0 10px 0 10px;
}

/* Highlight active form field */

#respond input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}

#respond input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
margin: 5px 1px 3px 0px;
border: 2px solid rgba(81, 203, 238, 1);
}

So sah unser Formular im WordPress Twenty Sixteen Theme nach den Änderungen aus:

Mit diesen Klassen können Sie das Verhalten ändern, wie Text in Eingabefeldern angezeigt wird. Wir werden den Textstil des Autornamens und der URL-Felder ändern.

#author, #email {
font-family: "Open Sans", "Droid Sans", Arial;
font-style:italic;
color:#1d1d1d;
letter-spacing:.1em;
} 

#url  {
color: #1d1d1d;
font-family: "Luicida Console", "Courier New", "Courier", monospace;
} 

Wenn Sie sich das Screenshot unten genau ansehen, ist die Schriftart für die Felder Name und E-Mail anders als die für die Website-URL.

Sie können auch den Stil des Absende-Buttons des WordPress-Kommentarformulars ändern. Anstatt den Standard-Absende-Button zu verwenden, geben wir ihm einen CSS3-Verlauf und Box-Schatten.

#submit {
background:-moz-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-webkit-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-o-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-ms-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
background-color:#44c767;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
} 

#submit:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cbf2a), color-stop(1, #44c767));
background:-moz-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-webkit-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-o-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-ms-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
background-color:#5cbf2a;
}
#submit:active {
position:relative;
top:1px;
}

WordPress-Kommentarformulare auf die nächste Stufe heben

Sie denken vielleicht, das war zu einfach. Nun, wir müssen dort beginnen, damit jeder folgen kann.

Sie können Ihr WordPress-Kommentarformular jedoch auf die nächste Stufe heben, indem Sie Formularfelder neu anordnen, soziale Anmeldungen hinzufügen, Kommentar-Abonnements, Kommentarrichtlinien, Quick-Tags und mehr.

Social Login zu WordPress-Kommentaren hinzufügen

Beginnen wir damit, soziale Logins zu WordPress-Kommentaren hinzuzufügen.

Das erste, was Sie tun müssen, ist das Super Socializer Plugin zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Thema Installieren eines WordPress-Plugins.

Nach der Aktivierung müssen Sie zu Super Socializer » Social Login gehen und dann das Kontrollkästchen „Social Login aktivieren“ aktivieren.

Dies öffnet das Panel für die Social-Login-Optionen. Klicken Sie zuerst auf den Tab „Erweiterte Konfiguration“.

Stellen Sie dann sicher, dass das Kontrollkästchen 'Im Kommentarformular aktivieren' aktiviert ist.

Klicken Sie anschließend auf die Registerkarte „Grundlegende Konfiguration“. Hier können Sie die sozialen Netzwerke auswählen, die Sie hinzufügen möchten, indem Sie die Kontrollkästchen im Abschnitt „Soziale Netzwerke auswählen“ aktivieren.

Darunter benötigt das Plugin API-Schlüssel, um sich mit sozialen Plattformen zu verbinden. Klicken Sie einfach auf das Symbol mit dem Fragezeichen, um Anweisungen zum Abrufen dieser Schlüssel für jede Plattform anzuzeigen.

Wenn Sie fertig sind, klicken Sie auf die Schaltfläche „Änderungen speichern“, um Ihre Social-Login-Einstellungen zu speichern.

Sie können Ihre Website jetzt besuchen, um die Social Login-Schaltflächen über Ihrem Kommentarformular anzuzeigen. 

Text der Kommentarrichtlinie vor oder nach dem Kommentarformular hinzufügen

Wir lieben all unsere Nutzer und schätzen es sehr, dass sie sich ein paar Minuten Zeit nehmen, um einen Kommentar auf unserer Website zu hinterlassen. Um jedoch ein gesundes Diskussionsumfeld zu schaffen, ist es wichtig, Kommentare zu moderieren.

Um volle Transparenz zu gewährleisten, haben wir eine Seite mit Kommentarrichtlinien erstellt, aber Sie können diesen Link nicht einfach in die Fußzeile einfügen.

Wir wollten, dass unsere Kommentarrichtlinien für alle Benutzer, die einen Kommentar hinterlassen, prominent und sichtbar sind. Deshalb haben wir beschlossen, die Kommentarrichtlinien in unser WordPress-Kommentarformular aufzunehmen.

Wenn Sie eine Seite mit Kommentarrichtlinien hinzufügen möchten, müssen Sie zuerst eine WordPress-Seite erstellen und Ihre Kommentarrichtlinien definieren (Sie können unsere stehlen und sie an Ihre Bedürfnisse anpassen).

Danach können Sie den folgenden Code in die functions.php-Datei Ihres Themes oder in ein Code-Snippet-Plugin einfügen.

function wpbeginner_comment_text_before($arg) {
    $arg['comment_notes_before'] .= '<p class="comment-policy"">We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our <a href="http://www.example.com/comment-policy-page/">comment policy</a>.</p>';
    return $arg;
}

add_filter('comment_form_defaults', 'wpbeginner_comment_text_before');

Der obige Code ersetzt das Standard-Kommentarformular vor den Notizen durch diesen Text. Wir haben dem Code auch eine CSS-Klasse hinzugefügt, damit wir den Hinweis mit CSS hervorheben können. Hier ist der Beispiel-CSS, den wir verwendet haben:

p.comment-policy {
    border: 1px solid #ffd499;
    background-color: #fff4e5;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 0px 10px 0px;
    font-size: small;
    font-style: italic;
}

So sah es auf unserer Testseite aus:

Wenn Sie den Link nach dem Kommentartextfeld anzeigen möchten, verwenden Sie den folgenden Code.

function wpbeginner_comment_text_after($arg) {
    $arg['comment_notes_after'] .= '<p class="comment-policy"">We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our <a href="http://www.example.com/comment-policy-page/">comment policy</a>.</p>';
    return $arg;
}

add_filter('comment_form_defaults', 'wpbeginner_comment_text_after');

Vergessen Sie nicht, die URL entsprechend zu ändern, damit sie zu Ihrer Kommentarrichtlinien-Seite und nicht zu example.com führt.

Kommentartextfeld nach unten verschieben

Standardmäßig zeigt das WordPress-Kommentarformular zuerst das Kommentartextfeld und dann die Felder für Name, E-Mail und Website an. Diese Änderung wurde in WordPress 4.4 eingeführt.

Zuvor zeigten WordPress-Websites zuerst die Felder Name, E-Mail und Website an, gefolgt vom Kommentartextfeld. Wir hatten das Gefühl, dass unsere Benutzer es gewohnt sind, das Kommentarformular in dieser Reihenfolge zu sehen, daher verwenden wir auf WPBeginner immer noch die alte Feldreihenfolge.

Wenn Sie das tun möchten, müssen Sie nur den folgenden Code zur Datei functions.php Ihres Themes oder einem Code-Snippet-Plugin hinzufügen.

function wpb_move_comment_field_to_bottom( $fields ) {
$comment_field = $fields['comment'];
unset( $fields['comment'] );
$fields['comment'] = $comment_field;
return $fields;
}

add_filter( 'comment_form_fields', 'wpb_move_comment_field_to_bottom');

Wir empfehlen immer, Code in WordPress mit einem Code-Snippet-Plugin wie WPCode hinzuzufügen. Dies erleichtert das Hinzufügen von benutzerdefiniertem Code, ohne Ihre functions.php-Datei bearbeiten zu müssen, sodass Sie sich keine Sorgen machen müssen, Ihre Website zu beschädigen.

Um zu beginnen, müssen Sie das kostenlose WPCode-Plugin installieren und aktivieren. Anleitungen finden Sie in diesem Leitfaden zum Thema Installieren eines WordPress-Plugins.

Gehen Sie nach der Aktivierung im WordPress-Dashboard zu Code Snippets » + Snippet hinzufügen .

Suchen Sie dort nach der Option „Benutzerdefinierten Code hinzufügen (Neuer Snippet)“ und klicken Sie darunter auf die Schaltfläche „+ Benutzerdefinierten Snippet hinzufügen“.

Danach müssen Sie aus der Liste der angezeigten Optionen „PHP-Snippet“ als Code-Typ auswählen.

Fügen Sie als Nächstes einen Titel für Ihren Ausschnitt oben auf der Seite hinzu. Dieser kann beliebig sein, damit Sie sich merken können, wofür der Code bestimmt ist.

Fügen Sie dann den obigen Code in das Feld 'Code-Vorschau' ein.

Schließlich schalten Sie einfach den Schalter von „Inaktiv“ auf „Aktiv“ und klicken Sie auf die Schaltfläche „Snippet speichern“.

Dieser Code verschiebt einfach das Kommentartextfeld nach unten.

Website (URL) Feld aus dem WordPress-Kommentarformular entfernen

Das Website-Feld im Kommentarformular zieht viele Spammer an. Das Entfernen wird zwar Spammer nicht aufhalten oder Spam-Kommentare reduzieren, aber es erspart Ihnen auf jeden Fall, versehentlich einen Kommentar mit einem schlechten Website-Link des Autors zu genehmigen.

Es wird auch ein Feld aus dem Kommentarformular entfernt, was es einfacher und benutzerfreundlicher macht. Mehr zu diesem Thema finden Sie in unserem Artikel über das Entfernen des Website-URL-Feldes aus dem WordPress-Kommentarformular.

Um das URL-Feld aus dem Kommentarformular zu entfernen, fügen Sie einfach den folgenden Code zu Ihrer functions.php-Datei oder einem Code-Snippet-Plugin hinzu.

function wpbeginner_remove_comment_url($arg) {
    $arg['url'] = '';
    return $arg;
}
add_filter('comment_form_default_fields', 'wpbeginner_remove_comment_url');

Sie können die gleichen Schritte wie im vorherigen Abschnitt befolgen, um diesen Code sicher in WordPress mit dem WPCode-Plugin hinzuzufügen.

Ein Kontrollkästchen zum Abonnieren von Kommentaren in WordPress hinzufügen

Wenn Benutzer einen Kommentar auf Ihrer Website hinterlassen, möchten sie möglicherweise diesem Thread folgen, um zu sehen, ob jemand auf ihren Kommentar geantwortet hat. Durch Hinzufügen einer Checkbox zum Abonnieren von Kommentaren ermöglichen Sie es Benutzern, sofortige Benachrichtigungen zu erhalten, wann immer ein neuer Kommentar zu dem Beitrag erscheint.

Um diese Checkbox hinzuzufügen, müssen Sie zuerst das Plugin Subscribe to Comments Reloaded installieren und aktivieren. Nach der Aktivierung müssen Sie die Seite StCR » Kommentarformular besuchen, um die Plugin-Einstellungen zu konfigurieren.

Ausführliche Schritt-für-Schritt-Anleitungen finden Sie in unserem Artikel, wie Sie Benutzern erlauben, Kommentare in WordPress zu abonnieren.

Zusätzliche Felder zum WordPress-Kommentarformular hinzufügen

Möchten Sie Ihrem WordPress-Kommentarformular zusätzliche Felder hinzufügen? Zum Beispiel ein optionales Feld, in dem Benutzer ihren Twitter-Handle eingeben können?

Installieren und aktivieren Sie einfach das WordPress Comments Fields Plugin. Gehen Sie nach der Aktivierung zur Seite „Comments Fields“ und wechseln Sie zum Tab „Comment Fields“.

Ziehen Sie einfach ein benutzerdefiniertes Feld per Drag & Drop und geben Sie ihm einen Titel, eine Beschreibung und einen Datennamen.

Vergessen Sie nicht, nach dem Hinzufügen der Felder auf die Schaltfläche „Alle Änderungen speichern“ zu klicken.

Sie können nun Ihr Kommentarformular anzeigen, um die benutzerdefinierten Felder in Aktion zu sehen.

Die benutzerdefinierten Felder werden dann in der Kommentarmoderation und unter dem Kommentarinhalt angezeigt.

Weitere Details finden Sie in unserem Tutorial zum Hinzufügen von benutzerdefinierten Feldern zum Kommentarformular in WordPress.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie das WordPress-Kommentarformular gestalten, um es für Ihre Benutzer unterhaltsamer zu gestalten. Möglicherweise möchten Sie auch unsere Tipps, um mehr Kommentare zu Ihren WordPress-Blogbeiträgen und unsere Expertenauswahl der besten Social-Media-Plugins für WordPress sehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.