Show/Hide Kommentarformular

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') . '">&nbsp;</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


Version: 1.0.5
02. November 2012

  • Tested up to WordPress 3.8-alpha


Version: 1.0.4
09. 11. 2011

  • changes in readme.txt
  • Testing in WP 3.5 alpha


Version: 1.0.3
09. 11. 2011

  • Ready for WordPress 3.3


Version: 1.0.1
22. 02. 2011

  • Correcting SVN :-)


Version: 1.0.0
22. 02. 2011

  • Initial Release

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 :-)

Download “show-hide-commentform” show-hide-commentform.latest-stable.zip – 1235-mal heruntergeladen – 178 B

19 Meinungen zu “Show/Hide Commentform

  1. 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.

  2. 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:

      1
      $var_sSHCF_Css .= '#commentform-slide {display:block; .....

      Must be changed to:

      1
      $var_sSHCF_Css .= '#commentform-slide {display:block; height:16px; padding-left:20px; cursor:pointer; background-repeat:no-repeat; background-image:url("data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQRJREFUeNpi/P//PwM1AQtW0XnqCkAyAYj9gdgATfYBEB8A4okMSTcvoGtlxHDhPPUGIJkPxAJEOGgDECcCDf6A3cB56vOhLiMFgFzpCDOUCcmwBDIMY4AGyXoYhwlJop6CuHAAOsgA3UAFNEUToN6BhdUGKBvktUYojQwC0A1Ej8lGaGyCwEIgLoQbnnSzAaoGb7L5gBSzINe+R5Jbj+SiBKD3ArCkgg/oLtxAIJwEcLBR9CMbWIglXIgFjcBgeIBqICQdLSDDsAXQMGXAFikfSTAI5KJAoGGJ+PKyPFIAg1x7EJpw9aHhBjLkITSmLxBTOCiA8yZEwwciI4tA4UAhAAgwAKW4TCsIsCVRAAAAAElFTkSuQmCC");}' . "\n";

      On line 65:

      1
      $var_sHTML_before = '<span id="commentform-slide" .....

      Must be changed to:

      1
       title="' . __('Show/Hide Commentform', 'show-hide-commentform') . '">Click here to show or hide comments</span>' . "\n";

      Good luck :-)

      • Hi, I copied the line you are supposed to put in line 65 but I just get an error.

        Was also wondering if its possible to change the icon?

      • I managed getting the text now, but I would like to remove the icon. How do I do that?

  3. 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

    • 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

  4. 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

  5. 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!

  6. 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

  7. Hallo,

    ich nutze dieses schöne kleine Plugin und finde es super.
    Mir ist nur aufgefallen, dass im IE7 und IE9 die Darstellung nicht passt. Im IE7 liegt das Comment Form hinter den Kommentaren, wenn es aufgeklappt wird und im IE9 wird nur ein kleiner grauer Balken aufgeklappt. Im IE8 und FF ist alles ok.

    Woran kann das liegen?

    Desweitern ist seit dem letzten Update nur noch ein Icon zu sehen und nicht mehr der Text.

    Nutze WP 3.4.1 und Twentyeleven.

    Dank und Gruss
    Ingo

    • Holla,

      Also, bei meinen Tests in diversen Themes funktioniert das einwandfrei, Darunter natürlich auch die Standardthemes wie TwentyTen, TwentyEleven und TwentyTwelve. Allerdings ist mir aufgefallen, dass Dein Kommentarformular über den Kommentaren zu finden ist, wo es bei WordPress normalerweise nicht ist. Falls Du da etwas selbst dran geändert hast, dann hast Du da wohl einen Fehler gemacht. Ist also kein Fehler meines Plugins.

  8. Hi, ich suche eine ähnliche Funktion um alle Kommentare inkl. dem Formular zu verbergen.

    Ich habe also einen Blogartikel und unter dem Artikel hätte ich gerne einen Button ’show comments‘ der dann die Kommentare mit Formular zum Vorschein bringt.

    Weisst Du evtl. Rat?

Schreibe einen Kommentar

Ihre Email-Adresse wird nicht veröffentlicht. Pflichtfelder sind durch * markiert.

Sie können folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>