WordPress-Themes mit Bootstrap

Eingabefelder für Kommentare definieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
WordPress verfügt über eine Funktion, welche der Erstellung von Eingabefeldern für Kommentare dient. Das Design lässt sich über Style Sheets anpassen.
04:50

Transkript

Ein WordPress Blog ohne Kommentare, das ist wie München ohne Brezeln oder Bayern ohne Berge. Das geht so nicht und das müssen wir jetzt entsprechend ändern. Dazu gehe ich mal in den Quelltext meines Themes hinein. Ich bin in der Datei "single.php". Das ist ja diejenige Datei, die einzelne Beiträge auch bestimmt oder deren Aussehen definiert. Und da schreibe ich jetzt einfach unterhalb von the_content einen neuen Befehl hinein und der heißt "comment_form". Wenn ich das Ganze jetzt abspeichere und mir nochmal neu anzeigen lasse, dann sehen Sie hier, schon habe ich: "Hinterlasse eine Antwort, E-Mail wird nicht veröffentlicht." Ich habe ein Eingabeformular und kann den Kommentar abschicken. Das schaut noch nicht besonders hübsch aus, also schauen wir einfach mal, was sich denn unter comment_form für Einstellungsmöglichkeiten habe. Ich gebe das einfach mal in eine Suchmaschine ein und lande dann automatisch hier bei codex.wordpress.org. Und hier habe ich verschiedene Möglichkeiten, Argumente zu übergeben und auch eine POSTID. Wir haben verschiedene Einstellungsmöglichkeiten. Hier geht es los mit den Feldern, die wir definieren möchten mit dem Kommentarfeld, wir können also beispielsweise das genaue HTML, das ausgegeben wird, für diese Text-Area hier gestalten. Wir können sagen, was denn angezeigt werden muss, wenn jemand zum Kommentieren eingeloggt sein muss, oder als was man eingeloggt ist, was vor den Kommentaren steht und was danach. Da haben wir die ganze Reihe von Einstellungsmöglichkeiten und ich habe schon mal ein paar für Sie vorbereitet und die schreibe ich hier einfach unterhalb von "get_header" mal hinein. "args_comment_form" und damit ich das nicht vergesse, nehme ich dieses Array und schreibe es hier direkt in comment_form hinein, damit auch hier die Argumente richtig übergeben werden. Schauen wir uns die mal der Reihe nach an, mit title_reply kann ich sagen: "Hinterlassen Sie einen Kommentar". Bisher stand da ja "Hinterlasse einen Kommentar". Ich möchte aber meine Blog Besucher siezen. Dann kann ich sagen, was denn vor den Kommentaren angezeigt werden soll und hier habe ich die Möglichkeit, kompletten HTML-Code anzugeben. Notwendige Felder sind mit einem Stern markiert und so weiter. Ich kann sagen, was denn unterhalb der Kommentare angezeigt werden soll. Das habe ich leer gelassen, weil ich nämlich hier diesen Bereich, "Du kannst folgende HTML-Tags benutzen", den finde ich nicht besonders schön und deswegen möchte ich ihn mit einem leeren String überschreiben. Dann sage ich: dieses Autor, E-Mail und URL Feld, das sind diese 3 Felder die ich hier habe, die möchte ich anders formatieren mit einem div class="form-group". Das sind alles Klassennamen, die von Bootstrap kommen. Das ist natürlich abhängig von Ihrer eigenen muster.html Vorlage. Und hier habe ich nochmal das comment_field, also die Text-Area, wie das Ganze heißt und damit bin ich auch schon mit meinen Argumenten durch. Ich speichere das Ganze ab. Und jetzt lade ich die Seite nochmal neu und Sie sehen, das sind die selben Inhalte, aber sie sind jetzt entsprechend hübsch formatiert. Für diejenigen, die Bootstrap verwenden, da müssen wir noch einen kleinen Hack anwenden, denn das Besondere ist, wir können diesen Button hier nicht direkt bestimmen. Wir haben innerhalb von comment_form keine Möglichkeit, diesen Submit-Button zu verändern. Wir können lediglich die ID von diesem Submit-Button bestimmen und wie dieser Submit-Button beschrieben wird. Wir müssen aber auch eine Klasse diesem Submit-Button hinzufügen, damit Bootstrap diesen Button auch ordentlich hünsch machen kann und dafür brauchen wir einen kleinen Hack, den ich Ihnen jetzt zeige. Wir können auf diesen Kommentar Button zugreifen, denn dieser Kommentar Button, der hat ja eine eindeutige ID und dann sagen wir einfach mit JavaScript, dass dieser Kommentar-Button mit dieser ID "submit" noch eine Klasse hinzubekommen soll. Dazu gehe ich mal in meine footer.php Datei, ich könnte das auch hier direkt in der Single machen, aber ich möchte das etwas aufgeräumt lassen und habe hier einen neuen Scriptbereich und da trage ich jetzt einfach, wenn ich das Ganze noch ein bisschen hübsch mache, mit "document.ready" folgenden Befehl ein. Nimm den Tag mit der ID "Submit" und füge dort die Klasse "btn btn-default btn-large" hinzu. Und wenn ich das Ganze jetzt abspeichere und nochmal neu mir anzeigen lasse, dann sehen Sie, ist hier der Button auch entsprechend von Bootstrap schön formatiert. Das heißt um die Kommentarfunktion für WordPress bereitzustellen, brauchen Sie im Wesentlichen den Befehl comment_form, dem Sie natürlich aber verschiedene Argumente mitgeben können.

WordPress-Themes mit Bootstrap

Verwirklichen Sie Ihre eigenen Designvorstellungen bei Ihrem Webauftritt und sehen Sie, wie Sie WordPress-Seiten über Plug-ins und Themes wie z.B. Bootstrap erweitern können.

2 Std. 33 min (39 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!