Wie ermögliche ich Besuchern das Formatieren ihrer Kommentare per Quicktags?

MarcTV Quicktag Buttons für Kommentatoren

Vielleicht geht es Euch ja auch manchmal so. Da grübel ich über die Behebung eines Problems und komme einfach nicht weiter. Kaum spreche ich mit jemandem darüber, kommt meist genau in diesem Moment der rettende Gedanke, um den Fehler zu beheben. Oder es springt einem die Lösung förmlich entgegen.
So ähnlich lief es neulich im Bloggerforum von Alex ab. Nachdem ich geschildert hatte, dass das Quicktag-Plugin Comment Form Quicktags seit WordPress 3.7 nicht mehr funktioniert und ich auf der Suche nach einem Ersatz bin.

Aber immer der Reihe nach.

Es ist nicht so, als hätte ich nicht vorher gefühlte zig Stunden nach einem Ersatz für dieses Plugin gegoogelt.
Geahnt hatte ich ja bereits, dass es irgendwann den Dienst in meinem Blog versagen würde, da schon eine ganze Weile kein Update erfolgt ist und ich zwischendurch bereits manuelle Anpassungen vornehmen musste, damit es einwandfrei funktioniert.

Nach dem Update auf WP 3.7 war dann endgültig Schicht im Schacht. Es fiel mir erst auf, als ich aus dem Frontendbereich auf mehrere Kommentare antworten wollte. Denn auch ich bevorzuge die Textformatierung per Button … weil es so schön bequem ist. :-)

Was musste ich als Erstes lernen?

Es muss unterschieden werden, ob die Formatierung im Kommentarbereich lediglich dem Administrator vorbehalten bleiben soll oder auch Besucher dieser Komfort geboten wird.

Meiner Meinung nach reichen im Grunde Attribute wie fett, kursiv, “Zitat” und das Einfügen eines Links für Besucher aus. Und hier begann das Problem:
einige Plugins mit sehr umfangreichen Formatierungsmöglichkeiten funktionierten zwar einwandfrei, können allerdings nur vom Admin verwendet werden.
Andere – die mir optimal für Besucher erschienen – funktionierten anfangs nicht auf meinen Blogs

Besucher -Editoren

Die ersten Versuche habe ich mit Basic Comment Quicktags und MarcTV Comment Quicktags gestartet. Aber entweder wurden diese Buttons nicht richtig oder erst gar nicht über dem Kommentarfeld angezeigt.

Admin-Editoren

TinyMCEComments gefällt mir zwischenzeitlich schon einmal recht gut, bot etliche Formatierungsarten an und vor allem funktioniert es auch, allerdings modelt dieses Plugin das komplette Kommentarfeld um. Und leider deaktivierte es dann auch noch die nachträgliche Editierfunktion des Plugins Simple Comment Editing.

Dann stieß ich auf CLEditor for WordPress. Er wirkt optisch sehr ansprechend auf mich, aber irgendwie vermisse ich darin einen “Zitat”-Button. Gut, man könnte diese Formatierung über die html-Ausgabe per <blockquote>…</blockquote> darstellen. Aber warum ist diese Funktion nicht ebenfalls integriert?

Das Textfeld lässt sich zwar nicht von Haus aus größer ziehen, aber ich denke, das lässt sich im Plugin selber ändern. Immerhin beeinträchtigt es nicht Simple Comment Editing.
Und dann bemerkte ich es, als ich mich ausloggte: Es handelte sich bei den vorgenannten Plugins ebenfalls um ein reines Admin-Tool.

Also setzte ich meine Recherchen und Tests fort. Als weiterer Proband durfte sich dann noch RTE Comments einreihen, da es während der Recherche auch einen sehr positiven Eindruck auf mich machte. Aber leider wurde auch diese Buttonleiste nicht in meinem Blog angezeigt.


And the winner is …

Letztendlich habe ich mich dann doch für das äußerst schlanke Plugin MarcTV Quicktags entschieden. Die Toolbar wurde zwar wie bei dem ebenfalls sehr einfach gehaltenen Basic Comment Quicktags anfangs gar nicht angezeigt, diesen Bug konnte ich aber ausmerzen, indem ich einige Code-Zeilen in der footer.php meines Themes umverteilt habe.
Die kleineren Darstellungsfehler habe ich durch einen Eingriff in die CSS-Dateien des Plugins bereinigt.

Als ich bemerkte, dass der Aufbau in der footer.php dafür verantwortlich war, so dass diese beiden Plugins erst gar nicht angezeigt wurden, aktivierte ich vorsichtshalber noch einmal Comment Form Quicktags – aber keine Chance.

Warum fiel diese Entscheidung?

  • Es handelt sich um ein superschlankes Plugin.
  • Es handelt sich um einen reinen Besucher-Editor,
  • der als Einziger in meinen Blogs funktioniert.
  • Basic Comment Quicktags hat sich dadurch disqualifiziert, weil es damit nicht klarkam, dass ich JavaScripte im Footer lade.
  • Kleinere Anpassungen sind problemlos möglich.

Den letzten Punkt lasse ich natürlich nicht einfach so stehen und möchte meine Änderungen kurz dokumentieren.

Funktionale Anpassung – Ergänzung von Tag-Buttons

Ich habe noch einen Code– und Durchstreich-Button hinzugefügt, was gar nicht schwierig war. Ergänzt habe ich folgenden Code in der  Datei marctv_quicktags.js im Pluginverzeichnis, der nun so aussieht:

(function ($) {
  $(document).ready(function($) {
    new QTags({
      id: "comment",
      buttons: "link,em,strong,del,code"
    });
    QTags.addButton('Zitat','Zitat','<blockquote>','</blockquote>','Zitat');

  });
})(jQuery);

Optische Anpassung

Die Buttons wirkten abgeschnitten und nicht optimal positioniert. Außerdem war der Toolbarhintergrund viel zu lang und wirkte farblich etwas plump.  Somit habe ich die Datei marctv_quicktags.css im Pluginverzeichnis ebenfalls ergänzt bzw. abgeändert:

#commentform .quicktags-toolbar {
    background-color: #F4F4F4;
    background-image: -ms-linear-gradient(bottom,#EDECE8,#F4F4F4);
    background-image: -moz-linear-gradient(bottom,#EDECE8,#F4F4F4);
    background-image: -o-linear-gradient(bottom,#EDECE8,#F4F4F4);
    background-image: -webkit-linear-gradient(bottom,#EDECE8,#F4F4F4);
	background-image: linear-gradient(bottom,#EDECE8,#F4F4F4);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    min-height: 37px;
    padding: 2px 8px 0;
	width:467px;}

#commentform .quicktags-toolbar input {
  width: 4em;
  padding: 0.2em 1em;
  display: block;
  float: left;
  font-size: 14px;
  height:auto;
}

Mittlerweile habe ich es verschmerzt, dass Comment Form Quicktags nicht mehr einsatzfähig ist, auch wenn ich darin (zumindest bis vor einer Weile) das Hinzufügen weiterer Buttons bequem im Backend vornehmen konnte. Zuletzt war allerdings auch bei ihm für Anpassungen ein Eingriff in der php-Datei des Plugins erforderlich.

Die Autorin:

Sylvi

Meine Beiträge beinhalten eigene Erfahrungen über Soft- und Hardware, Social Media und die ich als WordPress-Bloggerin und Joomlanerin gesammelt habe. Zudem widme ich mich dem schönen Hobby "Fotografie".

8 Kommentare

    • Hallo Benjamin,

      danke für Dein nettes Feedback. Mittlerweile habe ich noch ein wenig an den CSS-Werten der Buttons gefeilt. Falls jemand Interesse hat, kann ich diese auch gerne noch nachreichen.

      Gruß Sylvi

  • …und ich wollte einfach mal ein paar Grüße da lassen… ;-) Hab jetzt dein anderes Blog nicht gefunden?

    Kann noch ergänzen, schön. Feedly mag mich nicht, zeigt im Blog deiner bunten Welt keine Artikel an. Und gestern ging er gar nicht. Doof. Aber wer suchet, der findet…

    • Hej Miki,

      ganz lieben Dank. :mrgreen:.
      Och falls du die bunte Blogwelt meinst, die habe ich in meiner “Über mich-Seite” verlinkt. ;-)

      Gruß Sylvi

  • Klasse Anleitung, Silvy! :-) Auch wenn ich selbst immer versuche, möglichst ohne zusätzliche Plugins auszukommen.

    Kannst Du denn auch irgendwie nachhalten, ob und wie intensiv die Funktionen nun von Deinen Kommentatoren genutzt werden?

    LG

    • Danke schön “inpros” ;-).

      Ich kann es natürlich nicht mit Zahlen belegen. Mein persönlicher Eindruck ist, dass die Zitat-Formatierung schon sehr häufig verwendet wird. Die anderen kommen eher sporadisch zum Einsatz.

      Allerdings bin ich ja auch selber Besucher von Webseiten. Ich finde es daher schön, wenn ich einem Satz mehr Ausdruck verleihen kann, indem ich Wörter, die mir wichtig erscheinen, hervorheben kann.

      Gruß Sylvi

  • Oh man bzw. Frau, das ist ja mal ein ordentlicher Artikel. Das Plugin ist ja wirklich klasse. Ich werds mal ausprobieren. Man sieht, es lohnt sich immer wieder auf guten Blogs vorbei zu schauen.