Wie man das WordPress-Kommentarformular gestaltet (ultimative Anleitung)
Möchten Sie den Stil des WordPress-Kommentarformulars auf Ihrer Website ändern? Kommentare spielen eine wichtige Rolle beim Aufbau von Benutzerbindung auf einer Website. Ein gut aussehendes, benutzerfreundliches Kommentarformular ermutigt Benutzer zur Teilnahme an Diskussionen.
Deshalb haben wir die ultimative Anleitung erstellt, wie Sie das WordPress-Kommentarformular einfach gestalten können.
Bevor Sie loslegen
WordPress-Themes steuern das Erscheinungsbild Ihrer Website.
Jedes WordPress-Theme wird mit mehreren Dateien geliefert, darunter Vorlagendateien, Funktionsdateien, JavaScripts und Stylesheets. Stylesheets enthalten die CSS-Regeln für alle von Ihrem WordPress-Theme verwendeten Elemente. Sie können Ihr eigenes benutzerdefiniertes CSS hinzufügen, um die Stilregeln Ihres Themes außer Kraft zu setzen.
Wenn Sie dies noch nicht getan haben, lesen Sie unseren Artikel über das Hinzufügen von benutzerdefiniertem CSS in WordPress 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 nicht getan haben, dann lesen Sie bitte unseren Artikel über das Kopieren und Einfügen von Code in WordPress.
Lassen Sie uns nun einen Blick darauf werfen, wie Sie das WordPress-Kommentarformular gestalten können.
Da dies eine ziemlich umfassende Anleitung ist, haben wir zur einfachen Navigation ein Inhaltsverzeichnis erstellt:
Ändern des Stils des Kommentarformulars in WordPress
In den meisten WordPress-Themes gibt es eine Vorlage namens comments.php.
Diese Datei wird verwendet, um Kommentare und das Kommentarformular in Ihren Blogbeiträgen anzuzeigen.
Das WordPress-Kommentarformular wird mit Hilfe der Funktion: erzeugt.
Standardmäßig generiert diese Funktion Ihr Kommentarformular mit drei Textfeldern (Name, E-Mail und Website), einem Textarea-Feld für den Kommentartext, einem Kontrollkästchen für die GDPR-Konformität und der Schaltfläche "Submit". Sie können jedes dieser Felder leicht ändern, indem Sie einfach die Standard-CSS-Klassen anpassen. Im Folgenden finden Sie eine Liste der Standard-CSS-Klassen, die WordPress zu jedem Kommentarformular hinzufügt.
#respond { } #reply-title { } #cancel-comment-reply-link { } #commentform { } #author { } #email { } #url { } #comment #einreichen .comment-notes { } .required { } .kommentar-formular-autor { } .kommentar-form-email { } .kommentar-form-url { } .kommentar-form-kommentar { } .comment-form-cookies-consent { } .form-allowed-tags { } .form-submit
Durch einfaches Anpassen dieser CSS-Klassen können Sie das Aussehen Ihres WordPress-Kommentarformulars komplett verändern.
Versuchen wir nun, ein paar Dinge zu ändern, damit Sie eine gute Vorstellung davon bekommen, wie das funktioniert. Zuerst werden wir damit beginnen, das aktive Formularfeld hervorzuheben. Durch die Hervorhebung des aktiven Feldes wird Ihr Formular für Menschen mit besonderen Bedürfnissen zugänglicher, und es lässt Ihr Kommentarformular auf kleineren Geräten schöner aussehen.
#respond { background: #fbfbfb; padding:0 10px 0 10px; } /* Aktives Formularfeld hervorheben */ #respond input[type=text], textarea { -webkit-transition: all 0.30s ease-in-out; -moz-transition: alle 0.30s ease-in-out; -ms-transition: alle 0,30s Erleichterung-hinaus; -o-transition: alle 0,30s nach innen und außen; 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); border: 2px solid rgba(81, 203, 238, 1); }
So sieht unser Formular im WordPress-Theme Twenty Sixteen nach den Änderungen aus: 
Mit diesen Klassen können Sie das Verhalten der Textdarstellung in Eingabefeldern ändern. Wir machen weiter und ändern den Textstil der Felder für den Autorennamen und die URL.
#autor, #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 im Screenshot unten genau hinschauen, ist die Schriftart des Namens und des E-Mail-Feldes anders als die der Website-URL. 
Sie können auch den Stil der WordPress-Kommentarformular-Absenden-Schaltfläche ändern. Anstatt den Standard-Sendebutton zu verwenden, geben wir ihm einen CSS3-Farbverlauf und einen 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(oben, #44c767 5%, #5cbf2a 100%);; background:linear-gradient(nach unten, #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; farbe:#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, links oben, links unten, color-stop(0.05, #5cbf2a), color-stop(1, #44c767)); background:-moz-linear-gradient(oben, #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(oben, #5cbf2a 5%, #44c767 100%);; background:linear-gradient(nach unten, #5cbf2a 5%, #44c767 100%);; background-color:#5cbf2a } #submit:active { position:relative; top:1px; }
WordPress-Kommentarformulare auf die nächste Stufe bringen
Sie werden vielleicht denken, dass das zu grundlegend war.
Nun, wir müssen dort anfangen, damit jeder mitmachen kann. Sie können Ihr WordPress-Kommentarformular auf die nächste Stufe bringen, indem Sie Formularfelder neu anordnen, Social Login hinzufügen, Kommentare abonnieren, Kommentarrichtlinien, Quicktags und mehr.
Hinzufügen von Social Login zu WordPress-Kommentaren
Beginnen wir mit dem Hinzufügen von Social Logins zu WordPress-Kommentaren.
Das erste, was Sie tun müssen, ist das WordPress Social Login Plugin zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins. Nach der Aktivierung müssen Sie die Seite Einstellungen " WP Social Login besuchen, um die Plugin-Einstellungen zu konfigurieren
Das Plugin benötigt API-Schlüssel, um sich mit sozialen Plattformen zu verbinden.
Sie sehen Links mit Anweisungen, wie Sie diese Informationen für jede Plattform erhalten. Nachdem Sie Ihre API-Schlüssel eingegeben haben, klicken Sie auf die Schaltfläche Einstellungen speichern, um Ihre Änderungen zu speichern. Sie können nun Ihre Website besuchen, um die Social-Login-Schaltflächen über Ihrem Kommentarformular zu sehen.
Hinzufügen von Kommentarrichtlinien-Text vor oder nach dem Kommentarformular
Wir lieben alle unsere Benutzer und wir schätzen es sehr, dass sie sich ein paar Minuten Zeit nehmen, um einen Kommentar auf unserer Website zu hinterlassen.
Um jedoch eine gesunde Diskussionsumgebung zu schaffen, ist es wichtig, Kommentare zu moderieren. Um volle Transparenz zu haben, haben wir eine Seite mit Kommentarrichtlinien erstellt, aber Sie können diesen Link nicht einfach in die Fußzeile setzen. Wir wollten, dass unsere Kommentarrichtlinien prominent und für alle Benutzer, die einen Kommentar hinterlassen, sichtbar sind.
Aus diesem Grund haben wir uns entschieden, die Kommentarrichtlinie in unser WordPress-Kommentarformular einzufügen. Wenn Sie eine Seite mit Kommentarrichtlinien hinzufügen möchten, dann müssen Sie als erstes eine WordPress-Seite erstellen und Ihre Kommentarrichtlinien definieren (Sie können unsere stehlen und sie Ihren Bedürfnissen entsprechend anpassen). Danach können Sie den folgenden Code in die functions.php-Datei Ihres Themes oder ein Site-spezifisches Plugin einfügen.
function drdomains_comment_text_before($arg) { $arg['comment_notes_before'] = " Wir freuen uns, dass Sie sich entschieden haben, einen Kommentar zu hinterlassen.
Bitte denken Sie daran, dass Kommentare gemäß unserer Kommentarrichtlinien moderiert werden
"; return $arg; } add_filter('comment_form_defaults', 'drdomains_comment_text_before'); Der obige Code ersetzt das Standard-Kommentarformular vor Hinweisen durch diesen Text. Wir haben auch eine CSS-Klasse in den Code eingefügt, so dass wir den Hinweis mit CSS hervorheben können.
Hier ist das Beispiel-CSS, das 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 Kommentar-Textbereich anzeigen möchten, dann verwenden Sie den folgenden Code.
function wpmeginner_comment_text_after($arg) { $arg['comment_notes_after'] = " Wir freuen uns, dass Sie sich entschieden haben, einen Kommentar zu hinterlassen.
Bitte denken Sie daran, dass Kommentare gemäß unserer Kommentarrichtlinien moderiert werden "; return $arg; } add_filter('comment_form_defaults', 'wpmeginner_comment_text_after'); Vergessen Sie nicht, die URL entsprechend zu ändern, so dass sie zu Ihrer Seite mit den Kommentarrichtlinien führt und nicht zu example.com Kommentar-Textfeld an den unteren Rand verschieben
Standardmäßig zeigt das WordPress-Kommentarformular zuerst das Textfeld für den Kommentar an und dann die Felder für Name, E-Mail und Website.
Diese Änderung wurde in WordPress 4.4 eingeführt. Davor wurden auf WordPress-Websites zuerst Name, E-Mail und Website-Felder angezeigt und erst dann das Kommentar-Textfeld. Wir waren der Meinung, dass unsere Benutzer daran gewöhnt sind, das Kommentarformular in dieser Reihenfolge zu sehen, daher verwenden wir auf wordpressmonster noch die alte Feldreihenfolge.
Wenn Sie das wollen, dann müssen Sie nur den folgenden Code in die functions.php Datei Ihres Themes oder in ein site-spezifisches Plugin einfügen.
function wpm_move_comment_field_to_bottom( $fields ) { $comment_field = $fields['comment']; unset( $fields['comment'] ); $fields['comment'] = $comment_field; return $fields; } add_filter( 'comment_form_fields', 'wpm_move_comment_field_to_bottom')
Dieser Code verschiebt einfach das Kommentar-Textfeld an den unteren Rand. 
Website (URL)-Feld aus WordPress-Kommentarformular entfernen
Das Website-Feld im Kommentarformular zieht eine Menge Spammer an.
Das Entfernen dieses Feldes wird Spammer zwar nicht stoppen oder sogar Spam-Kommentare reduzieren, aber es wird Sie sicherlich davor bewahren, versehentlich einen Kommentar mit einem schlechten Link zur Autoren-Website zu genehmigen. Außerdem wird dadurch ein Feld aus dem Kommentarformular entfernt, was es einfacher und benutzerfreundlicher macht. Mehr zu diesem Thema finden Sie in unserem Artikel zum 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 in Ihre functions.php-Datei oder ein site-spezifisches Plugin ein.
function wpmeginner_remove_comment_url($arg) { $arg['url'] = ''; return $arg; } add_filter('comment_form_default_fields', 'wpmeginner_remove_comment_url');
Hinzufügen einer Checkbox zum Abonnieren von Kommentaren in WordPress
Wenn Benutzer einen Kommentar auf Ihrer Website hinterlassen, möchten sie diesen vielleicht weiterverfolgen, um zu sehen, ob jemand auf ihren Kommentar geantwortet hat.
Durch Hinzufügen eines Kontrollkästchens für das Abonnieren von Kommentaren ermöglichen Sie es den Benutzern, sofortige Benachrichtigungen zu erhalten, wenn ein neuer Kommentar zu einem Beitrag erscheint. Um diese Checkbox hinzuzufügen, müssen Sie als erstes das Plugin Subscribe to Comments Reloaded installieren und aktivieren. Nach der Aktivierung müssen Sie Einstellungen " Kommentare abonnieren besuchen, um die Plugin-Einstellungen zu konfigurieren. Eine ausführliche Schritt-für-Schritt-Anleitung finden Sie in unserem Artikel, wie Sie Benutzern das Abonnieren von Kommentaren in WordPress ermöglichen.
Quicktags im Kommentarformular hinzufügen
Quicktags sind Formatierungsschaltflächen, die es Benutzern ermöglichen, ihre Kommentare einfach zu gestalten.
Dazu gehören Schaltflächen zum Fett- und Kursivmachen, Hinzufügen eines Links oder Blockquote. Um Quicktags hinzuzufügen, müssen Sie das Basic Comment Quicktags Plugin installieren und aktivieren. Details dazu finden Sie in unserem Artikel über das einfache Hinzufügen von Quicktags im WordPress-Kommentarformular.
So wird Ihr Kommentarformular nach dem Hinzufügen von Quicktags aussehen.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie das WordPress-Kommentarformular so gestalten können, dass es für Ihre Benutzer mehr Spaß macht.