Auf meiner täglichen Tour durch das Blogszene Forum stiess ich auf die Frage, ob jemand ein Plugin kennt, welches das Kommentarformular per default ausblendet und durch ein Klick wieder einblendet.
Nun, dazu braucht es nicht gleich ein Plugin, sondern nur etwas jQuery, CSS und einen kurzen Eingriff in die functions.php des verwendeten Themes.
functions.php erweitern
Um dies zu realisieren, wird einfach die functions.php um ganze drei kleine Funktionen erweitert. Eine für das jQuery, eine für das CSS und eine um das HTML etwas zu erweitern. Für alle drei Funktionen bietet WordPress günstiger Weise sogenannte Hooks an, so dass man nicht im Theme selbst herumbasteln muss.
Bei allen drei Funktionen wird dafür Sorge getragen, dass diese auch nur in das System “eingehängt” werden, wenn man sich auch wirklich im Frontend befindet.
Das CSS einbinden
Dieses wird in den Headerbereich des HTML eingebunden. Dafür wird der Hook wp_head genutzt.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | /** * Lade CSS in den Haderbereich */ if(!function_exists('shcf_load_css')) { function shcf_load_css() { $var_sSHCF_Css = "\n"; $var_sSHCF_Css .= '<style type="text/css">' . "\n"; $var_sSHCF_Css .= '#commentform-slide {display:block; width:20px; height:16px; cursor:pointer; background-image:url("data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQRJREFUeNpi/P//PwM1AQtW0XnqCkAyAYj9gdgATfYBEB8A4okMSTcvoGtlxHDhPPUGIJkPxAJEOGgDECcCDf6A3cB56vOhLiMFgFzpCDOUCcmwBDIMY4AGyXoYhwlJop6CuHAAOsgA3UAFNEUToN6BhdUGKBvktUYojQwC0A1Ej8lGaGyCwEIgLoQbnnSzAaoGb7L5gBSzINe+R5Jbj+SiBKD3ArCkgg/oLtxAIJwEcLBR9CMbWIglXIgFjcBgeIBqICQdLSDDsAXQMGXAFikfSTAI5KJAoGGJ+PKyPFIAg1x7EJpw9aHhBjLkITSmLxBTOCiA8yZEwwciI4tA4UAhAAgwAKW4TCsIsCVRAAAAAElFTkSuQmCC")}' . "\n"; $var_sSHCF_Css .= '#respond {display:none}' . "\n"; $var_sSHCF_Css .= '</style>' . "\n"; echo $var_sSHCF_Css; } if(!is_admin()) { add_action('wp_head', 'shcf_load_css'); } } |
In Zeile 8 wird das Hintergrundbild für die Fläche “Show/Hide Commentform” generiert. Ich habe diese Methode gewählt um nicht extra noch ein Bild ein das Theme einfügen zu müssen.
Das jQuery einbinden
In dieser Funktion wird das benötigte jQuery eingebunden. Dieses wird in den Footerbereich des HTML verlagert damit dieses erst nach dem ganzen HTML geladen wird. Genutzt wird hier der Hook wp_footer.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | /** * Lade das jQuery */ if(!function_exists('shcf_load_javascript')) { function shcf_load_javascript() { $var_sSHCF_Js = "\n"; $var_sSHCF_Js .= '<script type="text/javascript">' . "\n"; $var_sSHCF_Js .= 'jQuery(document).ready(function() {' . "\n"; $var_sSHCF_Js .= "\t" . 'jQuery("#commentform-slide").click(function() {' . "\n"; $var_sSHCF_Js .= "\t\t" . 'jQuery(this).next("div").slideToggle("slow");' . "\n"; $var_sSHCF_Js .= "\t" . '});' . "\n"; $var_sSHCF_Js .= '});' . "\n"; $var_sSHCF_Js .= '</script>' . "\n"; echo $var_sSHCF_Js; } if(!is_admin()) { wp_enqueue_script('jquery'); add_action('wp_footer', 'shcf_load_javascript'); } } |
HTML ausbauen
Nun muss nur noch das HTML etwas ausgebaut werden. Hier wird in das Formular durch den Hook comment_form_before eingegriffen.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | /** * Läd das notwendige HTML vor das Kommentarformular */ if(!function_exists('shcf_slide_html_before')) { function shcf_slide_html_before() { $var_sHTML_before = '<span id="commentform-slide" title="' . __('Show/Hide Commentform', 'your-theme') . '"> </span>' . "\n"; echo $var_sHTML_before; } if(!is_admin()) { add_action('comment_form_before', 'shcf_slide_html_before'); } } |
Abgesang
Ich hoffe, ich konnte dem Fragesteller im Forum und natürlich ach allen andern damit etwas helfen. Getestet ist diese Funktion mit WordPress 3.1 und fort für funktionsfähig befunden
In diesem Sinne,
Viel Spass damit
Update
22. Februar 2011
Ich habe mir mal erlaubt, aus dem Ganzen ein kleines Plugin zu basteln. Getestet mit WordPress 3.1 und 3.0.5. Zu finden ist dies im WordPress-Pluginverzeichnis
Dank Google hab ich den Weg hier auf die Homepage gefunden und bin auf diesen für mich sehr interessanten Artikel gestoßen. Ein echt Klasse Artikel der sehr hilfreich für mich persönlich ist.
Hi,
I am sorry – I can’t write German.
Your plugin is perfect – just what I was looking for.
One question: I would like to place some text, “Click to comment”, next to the show/hide comment icon. How can I do that please?
Thanks,
David
Hi David,
to do that, you have to modify the plugins code a little. But don’t worry it doesn’t hurt
I guess you downloaded the plugin from wp.org plugin repository. So, here is what you have to modify.
(Note, in both cases you have to replace the complete line of code.)
On line 25:
Must be changed to:
On line 65:
Must be changed to:
Good luck
Perfect!
Danke
[...] functions.php aufbohren – Pfeufer-Blog 3 Kommentare für » Kommentar-Eingabe verstecken (jQuery [...]
Hallo Peter
Danke vielmals für Dein Plugin, sowas habe ich gesucht.
Jetzt habe ich aber eine Frage und zwar in meinem Theme ist ein Toggle Style eingebunden.
Wie kann ich den Toggle von meinem Theme verwenden anstelle von der orangen Sprechblase?
Wenn ich ein Toggle bei mir erstellen möchte muss ich folgendes Eintragen:
[toggle title="test" style="fancy"]Your content goes here.[/toggle]
Danke in voraus für Deine Hilfe.
Liebe Grüsse
Elena
Wende Dich an die Entwickler des Themes und frage nach, wie die das Toggle umgesetzt haben.
Hallo Peter
Es wird mit auch mit jquery gelöst.
Kann ich aber nicht irgendwie den Befehl:
[toggle title="test" style="fancy"]Your content goes here.[/toggle]
In Dein Plugin integrieren damit ich ein Toggle Effekt kriege?
Lg
Elena
Someone has told me that they can’t get my form to show using Internet Explorer 8. I’m on a Mac so can’t test this, but I’m wondering if this is an expected problem? I know IE8 has issues with many scripts.
David
It definitily works with Internet Explorer 8.
Okay. Thank you. The problem must be with them.
Hello from America!
Thanks for this plugin. I was looking forever for a hide comment function in developing my new site. It’s still under development, but feel free to check back often.
Thanks again!
Hi …
der hier verknüpfte Download lädt ein ZIP-Archiv, dass zumindest dem Namen nach eine Version 1.0.2 sein dürfte und die im Word-Register angebotene Version soll eine 1.0.3 sein. Das verwirrt doch ein wenig und ich dachte mir, dass ich zumindest mal eben Bescheid geben sollte
Dennoch: sehr schöne, kleine, smarte Lösung! Vielen Dank für die Mühe, Arbeit und (für mich persönlich) auch die ein, oder andere Code-Anregung, die dein Ansatz mitliefert!
Weiterhin ALLES GUTE und viel Erfolg aus einem winterlichen Lahntal,
dein/ihr…
Frederic Ch.Reuter
Ich weiß zwar nicht, was da so verwirrend dran sein sollte, im Zweifelsfall gibt es halt nen Update des Plugins. Aber ich hab das mal berichtigt.
Sollte auch nicht mehr, als nur ein gut gemeinter Hinweis sein. Mag sein, dass ich mich ungünstig ausgedrückt haben sollte. Was du aber auch gerne (inkl. diesem Beitrag hier) nun löschen kannst – danke dir und auch weiterhin viel Spaß am WP-coden