WordPress & Webwork

WordPress: Quicktags in den Kommentaren

Im folgenden wird erklärt, wie man Quicktags im Kommentarformular einrichtet und so den Kommentatoren ermöglicht, komfortabel Textformatierungen einzufügen.

WordPress: Kommentar-Quicktags Quicktags sind in WordPress die Buttons im HTML-Editor mit deren Hilfe man einfacher verlinkt, Bilder einfügt, Zitate auszeichnet und einiges mehr. Diese Editor-Buttons kann man auch im Formular für die Kommentare einbinden um den Kommentatoren das Verfassen der Texte zu erleichtern. Gestern bekam ich über die Twitter die Frage, wie ich das hier auf perun.net löse.

Bis heute habe ich ein altes Plugin benutzt, was nicht mehr gepflegt wird. Nun war es an der Zeit sich auf die Recherche zu begeben und so entdeckte ich Comment Form Quicktags.

WordPress: Kommentar-Quicktags anpassen

Kommentar-Quicktags anpassen

Die WordPress-Erweiterung verfügt über Einstellungen in denen man (siehe zweite Abbildung) Buttons löschen, bearbeiten und neue erstellen kann. Das hat mir bei dem alten Plugin gefehlt. Das alles musste man vorher in der Plugin-Datei machen.

Wen es stört, dass das Plugin im Kopfbereich eine zusätzliche CSS-Datei einbindet, der trägt einfach folgendes vor dem schließenden ?> in die functions.php ein:

if (!is_admin()) {wp_deregister_style("cfq");}

Vorteil ist das man sich einen zusätzlichen http-Aufruf spart. Je weniger Aufrufe um so performanter ist die Seite. Allerdings ist dadurch die CSS-Datei auch in den Einstellungen des Plugins im Backend nicht verfügbar. Daher sollte man den Code in die functions.php eintragen, nach dem man die Einstellungen vorgenommen hat.

Anschließend muss man in der eigenen CSS-Datei noch die CSS-Regeln für die Buttons einfügen. Glücklicherweise war der Selektor aus der alten Erweiterung identisch mit dem Selektor im neuen Plugin: #ed_toolbar.

Und so sehen bei mir die CSS-Regeln aus:

#commentform input  {-moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
                     border: 1px solid #BBC0A2; padding: 3px; background: #fff; color: #333; font: 1em verdana, sans-serif;}
#ed_toolbar input   {margin-right: 1px;}
#ed_link            {text-decoration: underline !important; color: #00f !important;}
#ed_del             {text-decoration: line-through !important;}
#ed_em              {font-style: italic !important;}
#ed_strong          {font-weight: bold !important;}

Die erste Zeile ist zuständig für die abgerundeten Ecken. Die letzten vier CSS-Regeln, dienen dazu die visuelle Erscheinung der jeweiligen Text-Auszeichnung zu simulieren, damit auch weniger erfahrene Kommentatoren wissen wofür die einzelnen Buttons gut sind.

26 Reaktion(en)

  1. Pascal

    Danke für den Beitrag. So etwas habe ich gesucht. Hatte mal ein ähnliches Plugin das aber außer Ärger nichts gebracht hat. Das hier werde ich nun mal antesten.

  2. JUICEDaniel

    So kommst du also zu neuen Themen 🙂 Coole Sache, danke dir für den Hinweis auf das Plugin. Hab’s gleich installiert.

    Und das mit CSS mache ich dann beim geplanten Relaunch Ende September, dann wird eh alles neu aussehen.

    Das Plugin jedenfalls ist genau das, was ich mir schon immer gewünscht habe und standardmäßig bei WordPress dabei sein sollte. Echt top!

    (Eine Sache finde ich aber schade: Ich hätte gerne statt "del" einfach "abc" durchgestrichen wie in Word. Leider wird hier nichts durchgestrichen angezeigt, richtig? Kann man das ändern?

    Und: Wie kann ich manuell "Unterstrichen" hinzufügen?)

  3. JUICEDaniel

    PS: Die Bezeichnungen hier finde ich irritierend. Kursiv ist für mich nicht "wichtig", sondern meist Gedanken oder wörtliche Rede, wenn ich auf Anführungszeichen verzichten möchte. Oder aber als dritte Option ein (langer) Eigenname, den ich somit deutlicher kennzeichnen / vom Rest des Satzes abheben möchte.

    Und "sehr wichtig" traut man sich dann fast nicht mehr anzuklicken. Ich habe mich jedenfalls auf "Fett", "Kursiv" etc. geeinigt.

    1. Perun

      @JUICEDaniel,

      Kursiv ist für mich nicht "wichtig", sondern meist Gedanken oder wörtliche Rede, wenn ich auf Anführungszeichen verzichten möchte.

      Das ist aber nicht richtig. Für Zitate gibt es als Block blockquote und für inline das q-Element. Das "kursive" ist das em-Element. Das kommt von emphasis -> Betonung, Gewichtung, Nachdruck, Schwerpunkt.

    1. Perun

      @,

      @ Perun: Bei ed_del steht ja schon "text-decoration: line-through" – Und im Admin-Menü wird’s auch schön brav so angezeigt. Aber nicht auf der Webseite.

      Ich war gerade auf deiner Seite und dort wird es angezeigt.

      Mag sein… aber mal ehrlich: Benutzt ihr diese Abstufung von "wichtig" und "sehr wichtig" via kursiv und fett im Alltag? Ich steh da auf Simplicity, ein "Wichtig/Fett" und ein "Rest/Kursiv" für Sonstiges 😉

      Ich versuche es 🙂 schon alleine um mich daran zu gewöhnen nicht allzu häufig "fett" zu nutzen, weil das Korrektorat, "fette" Wörter und Abschnitte im Manuskript nur im Ausnahmefällen akzeptiert.

  4. JUICEDaniel

    Mag sein… aber mal ehrlich: Benutzt ihr diese Abstufung von "wichtig" und "sehr wichtig" via kursiv und fett im Alltag? Ich steh da auf Simplicity, ein "Wichtig/Fett" und ein "Rest/Kursiv" für Sonstiges 😉

  5. tux.

    (Also manchmal.)

    … Comment Form Quicktags – sehr schön – frage mich, warum es immer noch so wenig bekannt ist. Ich nutze es auch schon eine Weile. Ist nur immer etwas Denksport, die Liste der Buttons mit den Tags abzugleichen, die man seinen Kommentatoren überhaupt erlaubt. *g*

  6. JUICEDaniel

    @ Perun: ?? Krasse Sache. Habe gerade gesehen, dass es an meinem Browser liegt. In Opera wird es bei mir NICHT durchgestrichen angezeigt. Weiß jemand, wie das entsprechende CSS für Opera heißt?

    Und: "Betonung" und "Wichtig" klingt deutlich besser/sieht deutlich besser aus 🙂

  7. Pingback: JUICEDblog: Spam, Pfeile, Kommentare und Kinokritiken

  8. Pingback: Kommentare mit HTML versehen | Dieter Welzel

  9. Luigi

    Das liebe ich so an deinen Tipps – sie funktionieren! Hatte schon öfters nach solch einem Plugin gesucht doch auf Grund meiner bescheidenen Englischkenntnisse kam ich nie zurecht mit der Konfiguration der diversen Plugins. Nun endlich kann auch ich meinen Lesern diesen Mehrwert bieten. Danke dir! :mrgreen:

  10. Oliver

    Auch von mir vielen Dank für diesen Supertipp! Ich hab das gleich mal eingebaut und noch ein wenig gestyled. Klappt wunderbar. 🙂
    Viele Grüße
    Oliver

  11. Adrian

    Hallo,
    ich nutze dieses Plugin schon länger, allerdings versagt es seit heute nach dem umstellen des Themes auf Woothemes Canvas seinen Dienst. Zumindest is es mir nicht mehr möglich, Blockquotes in den Kommentaren anzuzeigen.
    Hat zufällig jemand ne Sofortlösung parat? 😉

  12. Dürrbi

    Ich hatte bislang auch immer "Comment Quicktags" im Einsatz und fand es nicht so komfortabel, neue Buttons hinzuzufügen (Eintrag direkt in die Plugin-Datei)
    Dank deines Tipps konnte ich nun auch das Plugin durch ein neues ersetzen. Funktioniert prima.

  13. Ralf

    @Adrian: Was ist Woothemes Canvas? Wenn ich Google glauben darf, dann ein Bezahl-Theme.
    Weswegen hast du den Leuten Geld für das Theme gegeben? Doch wohl nicht wegen ihren hübschen Augen, sondern weil sie dir Support für das Theme anbieten. Gibt es keinen Support oder kommt keine Antwort auf deine Fragen, dann war das Geld wohl zum Fenster raus geworfen.

    Einen Tipp kann man dir schlecht geben wenn man nicht nachschauen kann was das Wootheme so alles macht. Und das geht nur wenn man sich das Theme kauft.

  14. Stefan

    Bei Google nach "wordpress kommentar quicktags" gesucht und schliesslich hier gelandet und gleich mal installiert.

    Nur ein Problem bleibt, nach wie vor auch mit dem alten Plugin, das dass Twenty Eleven Theme irgendwie die "Bezeichnung" für den Kommentarbereich direkt über "Kommentar Quicktags" legt und somit verdeckt, was ziemlich blöd ist.

    Weißt du da eventuell Abhilfe, Perun? 🙄

  15. Pingback: WordPress: meine Top-15-Plugins » WordPress & Webwork

Die Kommentare in diesem Beitrag sind geschlossen.

✉ WordPress-Newsletter ✉

Tipps und News als E-Mail in deinem Postfach? Dann abonniere einfach den ersten deutsch­sprachigen Word­Press-Newsletter:


Der Newsletter ist hinterher jederzeit abbestellbar.

Eintragen!