So gestalten Sie das WordPress-Kommentarformular
Veröffentlicht: 2022-05-23
Vor dem Start
WordPress-Themes steuern das Erscheinungsbild Ihrer Website. Jedes WordPress-Theme enthält mehrere Dateien, darunter Vorlagendateien, Funktionsdateien, 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 Designs 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 standardmäßige Erscheinungsbild 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.
Lassen Sie uns einen Blick darauf werfen, wie das WordPress-Kommentarformular gestaltet wird.
Ändern des Kommentarformularstils in WordPress
In den meisten WordPress-Themes gibt es eine Vorlage namens comments.php. Diese Datei wird verwendet, um Kommentare und Kommentarformulare zu Ihren Blogbeiträgen anzuzeigen. Das WordPress-Kommentarformular wird mithilfe der Funktion generiert: <?php comment_form(); ?> .
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 DSGVO 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 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 ändern.
Lassen Sie uns weitermachen und versuchen, ein paar Dinge zu ändern, damit Sie eine gute Vorstellung davon bekommen, wie das funktioniert.
Zunächst markieren wir zunächst das aktive Formularfeld. Das Hervorheben des derzeit aktiven Felds 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 Autorennamens 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 den Screenshot unten genau ansehen, unterscheidet sich die Schriftart des Namens- und E-Mail-Felds von der Website-URL.
Sie können auch den Stil der Schaltfläche zum Senden des WordPress-Kommentarformulars ändern. Anstatt den Standard-Submit-Button 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(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 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, Social Login hinzufügen, Kommentare, Kommentarrichtlinien, Quicktags und mehr abonnieren.
Social-Login zu WordPress-Kommentaren hinzufügen
Beginnen wir mit dem Hinzufügen von Social Logins zu WordPress-Kommentaren.
Als erstes müssen Sie das WordPress Social Login-Plugin installieren und aktivieren.
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 jetzt Ihre Website besuchen, um die Social-Login-Schaltflächen über Ihrem Kommentarformular zu sehen.
Kommentarrichtlinientext vor oder nach dem Kommentarformular hinzufügen
Wir lieben alle unsere Benutzer und wissen es sehr zu schätzen, 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 vollständige 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 Kommentarrichtlinie für alle Benutzer, die einen Kommentar hinterlassen, prominent und sichtbar ist. Aus diesem Grund haben wir uns entschieden, 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 an Ihre Bedürfnisse anpassen).
Danach können Sie den folgenden Code in die Datei functions.php Ihres Themes oder ein seitenspezifisches 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 Standardkommentarformular vor Notizen durch diesen Text. Wir haben auch eine CSS-Klasse im Code hinzugefügt, damit wir den Hinweis per 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 Kommentartextbereich 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 Kommentarrichtlinienseite und nicht zu example.com führt
Kommentartextfeld 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.
Davor zeigten WordPress-Websites zuerst Namens-, E-Mail- und Website-Felder und dann das Kommentar-Textfeld an.
Wenn Sie das tun möchten, müssen Sie lediglich den folgenden Code zur Datei functions.php Ihres Themes oder zu einem seitenspezifischen 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 Kommentartextbereichsfeld nach unten.
Entfernen Sie das Feld Website (URL) aus dem WordPress-Kommentarformular
Das Website-Feld im Kommentarformular zieht viele Spammer an. Das Entfernen wird zwar keine Spammer aufhalten oder sogar Spam-Kommentare reduzieren, es wird Sie jedoch sicherlich davor bewahren, versehentlich einen Kommentar mit einem schlechten Link zur Autorenwebsite zu genehmigen.
Es wird auch ein Feld aus dem Kommentarformular reduzieren, was es einfacher und benutzerfreundlicher macht.
Um das URL-Feld aus dem Kommentarformular zu entfernen, fügen Sie einfach den folgenden Code zu Ihrer Datei functions.php oder einem seitenspezifischen Plugin hinzu.
function 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 Kontrollkästchen „Kommentare abonnieren“ hinzu
Wenn Benutzer einen Kommentar auf Ihrer Website hinterlassen, möchten sie diesen Thread möglicherweise weiterverfolgen, um zu sehen, ob jemand auf ihren Kommentar geantwortet hat. Durch Hinzufügen eines Kontrollkästchens zum Abonnieren von Kommentaren ermöglichen Sie Benutzern, sofortige Benachrichtigungen zu erhalten, wenn ein neuer Kommentar zu dem Beitrag erscheint.
Um dieses Kontrollkästchen hinzuzufügen, müssen Sie zunächst das Plug-in „Comments Reloaded abonnieren“ installieren und aktivieren. Nach der Aktivierung müssen Sie Einstellungen » Kommentare abonnieren aufrufen, um die Plugin-Einstellungen zu konfigurieren.
Fügen Sie Quicktags im Kommentarformular hinzu
Quicktags sind Formatierungsschaltflächen, mit denen Benutzer ihre Kommentare einfach gestalten können. Dazu gehören Schaltflächen für Fettdruck, Kursivschrift, Hinzufügen eines Links oder Blockzitieren.
Um Quicktags hinzuzufügen, müssen Sie das Basic Comment Quicktags-Plugin installieren und aktivieren.
So sieht Ihr Kommentarformular nach dem Hinzufügen von Quicktags aus.
Wir hoffen, dass dieser Artikel Ihnen dabei geholfen hat, das WordPress-Kommentarformular so zu gestalten, dass es Ihren Benutzern mehr Spaß macht.