Möchten Sie den Stil des WordPress-Kommentarformulars auf Ihrer Website ändern? Kommentare spielen eine wichtige Rolle beim Aufbau des Benutzereingriffs auf einer Website. Ein attraktives und benutzerfreundliches Kommentarformular ermutigt Benutzer, an der Diskussion teilzunehmen. Aus diesem Grund haben wir die endgültige Anleitung zum einfachen Entwerfen des WordPress-Kommentarformulars erstellt.
Bevor Sie anfangen
WordPress-Themes steuern das Erscheinungsbild Ihrer Website. Jedes WordPress-Design enthält verschiedene Dateien, einschließlich Vorlagendateien, Funktionsdateien, JavaScripts und Stylesheets.
Die Stylesheets enthalten die CSS-Regeln für alle Elemente, die von Ihrem WordPress-Design verwendet werden. Sie können Ihr eigenes benutzerdefiniertes CSS hinzufügen, um die Stilregeln Ihres Themas zu überschreiben.
Wenn Sie dies noch nicht getan haben, lesen Sie unseren Artikel zum Hinzufügen von benutzerdefiniertem CSS in WordPress für Anfänger.
Zusätzlich zu CSS müssen Sie möglicherweise einige Funktionen hinzufügen, um das Standardaussehen Ihres WordPress-Kommentarformulars zu ändern. Wenn Sie dies noch nicht getan haben, lesen Sie unseren Artikel zum Kopieren und Einfügen von Code in WordPress.
Nachdem dies gesagt ist, werfen wir einen Blick darauf, wie das WordPress-Kommentarformular gestaltet wird.
Da dies ein ziemlich umfassender Leitfaden ist, haben wir ein Inhaltsverzeichnis erstellt, um die Navigation zu erleichtern:
- Ändern Sie WordPress-Kommentare mit Standard-CSS-Klassen
- Fügen Sie dem WordPress-Kommentarformular ein soziales Login hinzu
- Fügen Sie einen Kommentarrichtlinientext in das WordPress-Kommentarformular ein
- Verschieben Sie das Kommentartextfeld nach unten
- Entfernen Sie das Website-Feld (URL) aus dem WordPress-Kommentarformular
- Hinzufügen des Kontrollkästchens Kommentare abonnieren in WordPress
- Fügen Sie schnelle Tags in WordPress-Kommentaren hinzu
In den meisten WordPress-Themes gibt es eine Vorlage namens comment.php. Diese Datei wird verwendet, um Kommentare und Kommentarformulare in Ihren Blog-Posts anzuzeigen. Das WordPress-Kommentarformular wird mit der Funktion generiert:
Standardmäßig generiert diese Funktion Ihr Kommentarformular mit drei Textfeldern (Name, E-Mail und Website), einem Textbereichsfeld für den Kommentartext, einem Kontrollkästchen für die RGPD-Konformität und der Schaltfläche Senden.
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 Aussehen Ihres WordPress-Kommentarformulars vollständig ändern.
Lassen Sie uns ein paar Dinge ändern, damit Sie eine gute Vorstellung davon bekommen, wie es funktioniert.
Zunächst markieren wir das aktive Formularfeld. Durch Hervorheben des aktuell aktiven Felds ist Ihr Formular für Personen mit besonderen Bedürfnissen zugänglicher und Ihr Kommentarformular sieht auf kleineren Geräten besser aus.
#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-Thema nach den Änderungen aus:
Mit diesen Klassen können Sie das Verhalten der Textanzeige in Eingabefeldern ändern. Wir werden den Textstil der Namen- und URL-Felder des Autors ä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 den folgenden Screenshot genauer ansehen, unterscheiden sich Name und Quelle des E-Mail-Felds von der Website-URL.
Sie können auch den Stil der Senden-Schaltfläche des WordPress-Kommentarformulars ändern. Anstatt die Standardschaltfläche "Senden" zu verwenden, geben wir ihr einen CSS3-Verlauf und einen Kastenschatten.
#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 Ebene bringen
Vielleicht denkst du, das war zu einfach. Nun, wir müssen dort anfangen, damit jeder uns folgen kann.
Sie können Ihr WordPress-Kommentarformular auf die nächste Ebene heben, indem Sie Formularfelder neu anordnen, ein soziales Login hinzufügen, Kommentare, Kommentarrichtlinien, Schnell-Tags und mehr abonnieren.
Fügen Sie WordPress-Kommentaren ein soziales Login hinzu
Beginnen wir mit dem Hinzufügen sozialer Logins zu WordPress-Kommentaren.
Als erstes müssen Sie das WordPress Social Login Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.
Nach der Aktivierung müssen Sie besuchen Einstellungen »WP Social Login Seite zum Konfigurieren der Plugin-Einstellungen.
Das Plugin benötigt API-Schlüssel, um sich mit sozialen Plattformen zu verbinden. Sie sehen Links zu Anweisungen, wie Sie diese Informationen für jede Plattform erhalten.
Klicken Sie nach Eingabe Ihrer API-Schlüssel auf die Schaltfläche Einstellungen speichern, um Ihre Änderungen zu speichern.
Sie können jetzt ihre Website besuchen, um die sozialen Anmeldeschaltflächen über ihrem Kommentarformular zu sehen.
Wir lieben alle unsere Benutzer und schätzen es sehr, sich die Zeit zu nehmen, um einen Kommentar auf unserer Website zu hinterlassen. Um ein gesundes Diskussionsumfeld zu schaffen, ist es jedoch wichtig, die Kommentare zu moderieren.
Aus Gründen der vollständigen Transparenz haben wir eine Seite mit Kommentarrichtlinien erstellt. Sie können diesen Link jedoch nicht in die Fußzeile einfügen.
Wir wollten, dass unsere Kommentarrichtlinie für alle Benutzer, die einen Kommentar hinterlassen, prominent und sichtbar ist. Aus diesem Grund haben wir beschlossen, die Kommentarrichtlinie in unser WordPress-Kommentarformular aufzunehmen.
Wenn Sie eine Kommentarrichtlinienseite hinzufügen möchten, müssen Sie zunächst eine WordPress-Seite erstellen und Ihre Kommentarrichtlinie definieren (Sie können unsere stehlen und an Ihre Bedürfnisse anpassen).
Danach können Sie den folgenden Code in die Datei functions.php Ihres Themas oder in ein ortsspezifisches Plugin einfügen.
function wpbeginner_comment_text_before($arg) {
$arg('comment_notes_before') = "";
return $arg;
}
add_filter('comment_form_defaults', 'wpbeginner_comment_text_before');
Der obige Code ersetzt das Standardkommentarformular vor Notizen durch diesen Text. Wir haben dem Code auch eine CSS-Klasse hinzugefügt, damit wir die Warnung mithilfe von CSS hervorheben können. Hier ist das CSS-Beispiel, das wir verwenden:
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 Kommentartextbereich anzeigen möchten, verwenden Sie den folgenden Code.
function wpbeginner_comment_text_after($arg) {
$arg('comment_notes_after') = "";
return $arg;
}
add_filter('comment_form_defaults', 'wpbeginner_comment_text_after');
Vergessen Sie nicht, die URL entsprechend zu ändern. Wechseln Sie daher zu Ihrer Seite mit Kommentarrichtlinien anstelle von example.com 
Standardmäßig zeigt das WordPress-Kommentarformular zuerst den Kommentartextbereich und dann die Felder 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 und dann das Textfeld Kommentare an. Wir sind der Meinung, dass unsere Benutzer es gewohnt sind, das Kommentarformular in dieser Reihenfolge anzuzeigen, daher verwenden wir weiterhin die alte Feldreihenfolge in WPBeginner.
Wenn Sie möchten, müssen Sie lediglich den folgenden Code zur Datei functions.php Ihres Themas oder zu einem ortsspezifischen 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');
Dieser Code verschiebt einfach das Feld im Kommentartextbereich nach unten.
Entfernen Sie das Feld Website (URL) aus dem WordPress-Kommentarformular
Das Website-Feld im Kommentarformular zieht viele Spammer an. Durch das Entfernen werden Spammer zwar nicht gestoppt oder Spam-Kommentare reduziert, es wird jedoch sicher verhindert, dass Sie versehentlich einen Kommentar mit einem Link zur Website des falschen Autors genehmigen.
Außerdem wird ein Feld aus dem Kommentarformular verkleinert, wodurch es einfacher und benutzerfreundlicher wird. Weitere Informationen zu diesem Thema finden Sie in unserem Artikel zum Entfernen des Website-URL-Felds aus dem WordPress-Kommentarformular
Um das URL-Feld aus dem Kommentarformular zu entfernen, fügen Sie einfach den folgenden Code zu Ihrer Datei functions.php oder einem ortsspezifischen Plugin hinzu.
function wpbeginner_remove_comment_url($arg) {
$arg('url') = '';
return $arg;
}
add_filter('comment_form_default_fields', 'wpbeginner_remove_comment_url');
Wenn Benutzer einen Kommentar auf Ihrer Website hinterlassen, möchten sie möglicherweise diesem Thread folgen, um festzustellen, ob jemand auf Ihren Kommentar geantwortet hat. Durch Hinzufügen eines Kontrollkästchens zum Abonnieren von Kommentaren können Benutzer jedes Mal, wenn ein neuer Kommentar im Beitrag angezeigt wird, sofort benachrichtigt werden.
Um dieses Kontrollkästchen hinzuzufügen, müssen Sie zunächst das Plugin Reload Subscribe to Comments installieren und aktivieren. Nach der Aktivierung sollten Sie Einstellungen »Kommentare abonnieren aufrufen, um die Plugin-Einstellungen zu konfigurieren.
Ausführliche Schritt-für-Schritt-Anleitungen finden Sie in unserem Artikel darüber, wie Benutzer Kommentare in WordPress abonnieren können.
Quick Tags sind Formatierungsschaltflächen, mit denen Benutzer ihre Kommentare einfach gestalten können. Dazu gehören Schaltflächen zum Fettdruck, Kursivschrift, Hinzufügen eines Links oder eines Blockzitats.
Um Quick Tags hinzuzufügen, müssen Sie das Plugin Basic Tags Quick Tags installieren und aktivieren. Weitere Informationen finden Sie in unserem Artikel zum einfachen Hinzufügen von Schnell-Tags im WordPress-Kommentarformular.
So sieht Ihr Kommentarformular nach dem Hinzufügen von Quick-Tags aus.
Wir hoffen, dieser Artikel hat Ihnen dabei geholfen, das WordPress-Kommentarformular so zu gestalten, dass es Ihren Benutzern mehr Spaß macht. Sie können auch unsere Tipps lesen, um weitere Kommentare zu Ihren WordPress-Blog-Posts zu erhalten.
Wenn dir dieser Artikel gefallen hat, abonniere unseren YouTube-Kanal, um WordPress-Tutorial-Videos anzusehen. Sie finden uns auch unter Twitter und Facebook.
