WordPress: Quicktags in den Kommentaren

26 Kommentare

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.

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienst­leistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.

Verwandte Beiträge:

Über Vladimir

Vladimir Simović arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse Fachbücher und Fachartikel publiziert.

Schlagwörter: ,

26 Kommentare

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

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

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

    1. @,

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

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

  8. (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*

  9. @ 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 🙂

  11. if( !is_admin() ) wp_deregister_style("cfq");

    Dann sollte das CSS im Frontend nicht geladen werden, im Backend aber weiterhin verfügbar sein.

  12. […] meiner Meinung nach eher überflüssig als im Frontend). Danke an Vladimir Simovic aka Vlad Perun für seinen Blogeintrag über dieses Plugin, nachdem ich ihn gestern auf Twitter danach fragte. 🙂 TweetÄhnliche Artikel:Blogger aufgepasst: […]

  13. [MARKED AS SPAM BY ANTISPAM BEE | Server IP]
    […] dieses WordPress-Plugin Comment Form Quicktags umgestellt (siehe hierzu seinen Blogartikel “WordPress: Quicktags in den Kommentaren“). Besonders praktisch ist der dortige Hinweis wie man dafür Sorge trägt, dass keine […]

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

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

  17. 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? 😉

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

  20. @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.

  21. 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? 🙄

Kommentare sind geschlossen.