So gestalten Sie das WordPress-Kommentarformular (Ultimate Guide)

Möchten Sie den Stil des WordPress-Kommentarformulars auf Ihrer Website ändern? Kommentare spielen eine wichtige Rolle beim Aufbau einer Benutzerbindung auf einer Website. Ein gut aussehendes, benutzerfreundliches Kommentarformular ermutigt Benutzer zur Teilnahme an der Diskussion. Deshalb haben wir die ultimative Anleitung zur einfachen Gestaltung des WordPress-Kommentarformulars erstellt.

Bevor Sie loslegen

WordPress-Themes steuern das Erscheinungsbild Ihrer Website. Jedes WordPress-Design enthält mehrere Dateien, darunter Vorlagendateien, Funktionsdateien, JavaScripts und Stylesheets.

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.

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, lesen Sie bitte unseren Artikel zum Kopieren und Einfügen von Code in WordPress.

Sehen wir uns an, wie das WordPress-Kommentarformular gestaltet wird.

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

• Ändern Sie WordPress-Kommentare mit Standard-CSS-Klassen
• Hinzufügen eines Social Login zum WordPress-Kommentarformular
• Hinzufügen von Kommentartext in WordPress-Kommentarformular
• Kommentartextfeld nach unten verschieben
• Entfernen des Website (URL) -Felds aus dem WordPress-Kommentarformular
• Hinzufügen von Kommentaren zum Ankreuzen in WordPress
• Fügen Sie Quicktags in WordPress-Kommentaren hinzu

Ändern des Kommentartyps in WordPress

In den meisten WordPress-Themes gibt es eine Vorlage namens comments.php. Diese Datei wird verwendet, um Kommentare und Kommentarformulare in Ihren Blogbeiträgen anzuzeigen. Das WordPress-Kommentarformular wird mithilfe der Funktion generiert: .

Standardmäßig generiert diese Funktion Ihr Kommentarformular mit drei Textfeldern (Name, E-Mail und Website), einem Textfeld für den Kommentartext, einem Kontrollkästchen für die Einhaltung der DS-GVO und der Schaltfläche "Senden".

Sie können jedes dieser Felder einfach ändern, indem Sie einfach die Standard-CSS-Klassen anpassen. Nachfolgend 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 #submit .comment-notes  .required  .com-Formular-Autor  .com-Formular-E-Mail  .com-Formular-URL  .com-Formular-Kommentar  .com-Formular-Cookies-Einwilligung  .form-allowed-tags  .form-submit 

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

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

Zuerst markieren wir das aktive Formularfeld. Durch Markieren des aktuell aktiven Felds wird das Formular für Personen mit besonderen Bedürfnissen zugänglicher. Außerdem ist das Kommentarformular auf kleineren Geräten schöner.

 #respond Hintergrund: #fbfbfb; Auffüllen: 0 10px 0 10px;  / * Aktiviere das aktive Formularfeld * / #respond input [type = text], textarea -webkit-transition: alle 0.30s ease-in-out; -moz-Übergang: alle 0,30-Sekunden-Einstieg; -ms-Übergang: alle 0,30er Einstiegsmöglichkeiten; -o-Übergang: alle 0,30-Sekunden-Einstieg; Umriss: keine; Auffüllen: 3px 0px 3px 3px; Marge: 5px 1px 3px 0px; Rand: 1px fest #DDDDDD;  #respond Eingabe [Typ = Text]: Fokus, Eingabe [Typ = E-Mail]: Fokus, Eingabe [Typ = URL]: Fokus, Textbereich: Fokus Box-Schatten: 0 0 5px rgba (81, 203, 238, 1 ); Marge: 5px 1px 3px 0px; Grenze: 2px feste rgba (81, 203, 238, 1);  

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

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

 #author, #email font-family: "Open Sans", "Droid Sans", Arial; Schriftstil: kursiv; Farbe: # 1d1d1d; Buchstabenabstand: .1em;  #url color: # 1d1d1d; Schriftfamilie: "Luicida Console", "Courier New", "Courier", Monospace;  

Wenn Sie sich den Screenshot unten genauer ansehen, unterscheidet sich die Schriftart des Namens und der E-Mail-Felder von der Website-URL.

Sie können auch den Stil der Schaltfläche zum Senden des WordPress-Kommentarformulars ändern. Anstelle der standardmäßigen Übergabeschaltfläche geben wir ihm einen CSS3-Verlauf und einen Box-Schatten.

 #submit Hintergrund: -moz-linearer Gradient (oben, # 44c767 5%, # 5cbf2a 100%); Hintergrund: -webkit-linearer Gradient (oben, # 44c767 5%, # 5cbf2a 100%); Hintergrund: -o-linearer Gradient (oben, # 44c767 5%, # 5cbf2a 100%); Hintergrund: -ms-linearer Gradient (oben, # 44c767 5%, # 5cbf2a 100%); Hintergrund: linearer Gradient (nach unten, # 44c767 5%, # 5cbf2a 100%); Hintergrundfarbe: # 44c767; -moz-border-radius: 28px; -webkit-border-radius: 28px; Grenzradius: 28px; Grenze: 1px fest # 18ab29; Anzeige: Inline-Block; Cursor: Zeiger; Farbe: #ffffff; Schriftfamilie: Arial; Schriftgröße: 17px; Polsterung: 16px 31px; Textdekoration: keine; Text-Schatten: 0px 1px 0px # 2f6627;  #submit: hover Hintergrund: -webkit-gradient (linear, links oben, links unten, Farbstopp (0,05, # 5cbf2a), Farbstopp (1, # 44c767)); Hintergrund: -moz-linearer Gradient (oben, # 5cbf2a 5%, # 44c767 100%); Hintergrund: -webkit-linearer Gradient (oben, # 5cbf2a 5%, # 44c767 100%); Hintergrund: -o-linearer Gradient (oben, # 5cbf2a 5%, # 44c767 100%); Hintergrund: -ms-linearer Gradient (oben, # 5cbf2a 5%, # 44c767 100%); Hintergrund: linearer Gradient (nach unten, # 5cbf2a 5%, # 44c767 100%); Hintergrundfarbe: # 5cbf2a;  #submit: aktiv Position: relativ; oben: 1px;  

WordPress-Kommentarformulare auf die nächste Stufe bringen

Sie denken vielleicht, das sei zu einfach. Nun, wir müssen dort anfangen, damit jeder mitmachen kann.

Sie können Ihr WordPress-Kommentarformular auf die nächste Ebene bringen, indem Sie Formularfelder neu anordnen, ein soziales Login hinzufügen, Kommentare, Richtlinien für Kommentare, Quicktags usw. abonnieren.

Fügen Sie Social Login zu WordPress-Kommentaren 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 schrittweisen Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung müssen Sie besuchen Einstellungen »WP Social Login Seite, um die Plugin-Einstellungen zu konfigurieren.

Das Plugin benötigt API-Schlüssel, um sich mit sozialen Plattformen zu verbinden. Sie finden Links mit Anweisungen, wie Sie diese Informationen für jede Plattform erhalten.

Klicken Sie nach der 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 Social Login-Schaltflächen über Ihrem Kommentarformular anzuzeigen.

Hinzufügen von Kommentartext vor oder nach Kommentarformular

Wir lieben alle unsere Nutzer und schätzen es sehr, dass sie ein paar Minuten brauchen, um einen Kommentar auf unserer Website zu hinterlassen. Um eine gesunde Diskussionsumgebung zu schaffen, ist es jedoch wichtig, die Kommentare zu moderieren.

Um vollständige Transparenz zu erreichen, haben wir eine Seite mit Kommentierungsrichtlinien erstellt. Sie können diesen Link jedoch nicht einfach in die Fußzeile einfügen.

Wir wollten, dass unsere Richtlinien für alle Benutzer, die einen Kommentar hinterlassen, sichtbar und sichtbar sind. Aus diesem Grund haben wir beschlossen, die Kommentarrichtlinie in unser WordPress-Kommentarformular aufzunehmen.

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

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

 Funktion wpbeginner_comment_text_before ($ arg) $ arg ['comment_notes_before'] = "
Wir freuen uns, dass Sie sich für einen Kommentar entschieden haben. Bitte beachten Sie, dass Kommentare gemäß unseren Richtlinien für Kommentare moderiert werden.
"; return $ arg; add_filter ('comment_form_defaults', 'wpbeginner_comment_text_before'); 

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

 p.comment-policy border: 1px fest # ffd499; Hintergrundfarbe: # fff4e5; Grenzradius: 5px; Polsterung: 10px; Marge: 10px 0px 10px 0px; Schriftgröße: klein; Schriftstil: kursiv;  

So sah es auf unserer Testseite aus:

Wenn Sie den Link hinter dem Kommentartextbereich anzeigen möchten, verwenden Sie den folgenden Code.

 Funktion wpbeginner_comment_text_after ($ arg) $ arg ['comment_notes_after'] = "
Wir freuen uns, dass Sie sich für einen Kommentar entschieden haben. Bitte beachten Sie, dass Kommentare gemäß unseren Richtlinien für Kommentare moderiert werden.
"; return $ arg; add_filter ('comment_form_defaults', 'wpbeginner_comment_text_after'); 

Vergessen Sie nicht, die URL entsprechend zu ändern. Sie wird also auf Ihre Seite mit den Kommentarrichtlinien anstatt auf example.com geleitet

Kommentarfeld nach unten verschieben

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 wurden auf WordPress-Websites zuerst die Felder Name, E-Mail und Website und dann das Kommentar-Textfeld angezeigt. Wir hatten das Gefühl, dass unsere Benutzer es gewohnt sind, das Kommentarformular in dieser Reihenfolge zu sehen. Daher verwenden wir immer noch die alte Feldreihenfolge in WPBeginner.

Wenn Sie dies tun möchten, müssen Sie nur den folgenden Code zur Datei functions.php Ihres Themas oder zu einem site-spezifischen Plugin hinzufügen.

 Funktion wpb_move_comment_field_to_bottom ($ fields) $ comment_field = $ fields ['comment']; nicht gesetzt ($ Felder ['Kommentar']); $ fields ['comment'] = $ comment_field; $ Felder zurückgeben;  add_filter ('comment_form_fields', 'wpb_move_comment_field_to_bottom') 

Dieser Code verschiebt das Feld für den Kommentartext einfach nach unten.

Entfernen Sie das Website (URL) -Feld aus dem WordPress-Kommentarformular

Das Website-Feld im Kommentarformular zieht viele Spammer an. Durch das Entfernen werden Spammer zwar nicht gestoppt oder sogar Spamkommentare reduziert, doch Sie werden sicherlich vor dem versehentlichen Zulassen eines Kommentars mit einem schlechten Autor-Website-Link bewahrt.

Außerdem wird ein Feld aus dem Kommentarformular reduziert, 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 site-spezifischen Plug-In hinzu.

 Funktion wpbeginner_remove_comment_url ($ arg) $ arg ['url'] = "; return $ arg; add_filter ('comment_form_default_fields', 'wpbeginner_remove_comment_url'); 

Fügen Sie in WordPress ein Ankreuzfeld Kommentare hinzu

Wenn Benutzer einen Kommentar zu Ihrer Website hinterlassen, möchten Sie möglicherweise den Thread weiter verfolgen, um zu sehen, ob jemand auf ihren Kommentar geantwortet hat. Durch das Hinzufügen eines Kontrollkästchens zum Abonnieren von Kommentaren können Benutzer sofort Benachrichtigungen erhalten, wenn ein neuer Kommentar im Beitrag angezeigt wird.

Um dieses Kontrollkästchen hinzuzufügen, müssen Sie zunächst das Plugin Subscribe to Comments Reloaded installieren und aktivieren. Nach der Aktivierung müssen Sie die Einstellungen besuchen, um die Plugin-Einstellungen zu konfigurieren.

Detaillierte Schritt-für-Schritt-Anweisungen finden Sie in unserem Artikel, in dem Sie Benutzern das Abonnieren von Kommentaren in WordPress ermöglichen.

Fügen Sie Quicktags im Kommentarformular hinzu

Quicktags sind Schaltflächen zum Formatieren, mit denen Benutzer ihre Kommentare problemlos formatieren können. Dazu gehören Schaltflächen zum Fettdruck, Kursivieren, Hinzufügen eines Links oder Sperren.

Um Quicktags hinzufügen zu können, müssen Sie das Plug-In Quicktags Basic Comment installieren und aktivieren. Weitere Informationen finden Sie in unserem Artikel zum einfachen Hinzufügen von Quicktags im WordPress-Kommentarformular.

So wird Ihr Kommentarformular aussehen, nachdem Sie Quicktags hinzugefügt haben.

Wir hoffen, dass Sie mit diesem Artikel erfahren haben, wie Sie das WordPress-Kommentarformular formatieren, damit es Ihren Benutzern mehr Spaß macht. Vielleicht möchten Sie auch unsere Tipps lesen, um weitere Kommentare zu Ihren WordPress-Blogbeiträgen zu erhalten.

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