Eigene Buttons im WordPress-Editor

Werbung

Heute möchte ich ein paar praktische Helferlein vorstellen, die ich schon seit langem in meinen WordPress-Blogs nutze und mir gute Dienste leisten.

Die Rede ist von neuen Buttons im WordPress-Editor.

Warum zusätzliche Buttons Sinn machen und wie man diese einfach und schnell erstellen kann, erfahrt ihr in diesem Artikel.

Machen zusätzliche Buttons Sinn?

In meinen Augen machen diese auf jeden Fall Sinn.

Wenn man nicht nur hin und wieder bloggt, sondern regelmäßig, dann entwickelt man irgendwann gewisse Routinen. Das kann ein bestimmter Aufbau eines Artikels sein, der Einbau von bestimmten Grafiken oder auch von verschiedenen Banner-Codes usw.

Ich starte jedenfalls nur ungern mit einem leeren Editorfenster, sondern habe mir einen grundsätzlichen Artikelaufbau vorbereitet, den ich per Button einfach einfüge. Für bestimmte regelmäßige Sonder-Artikel habe ich zudem andere Vorlagen, die zum Teil auch schon bestimmte Texte enthalten, die ich z.B. in Gastartikeln immer einbaue.

Normalerweise müsste ich einen vorherigen Artikel erst eimal raus suchen und mir dann den entsprechenden Code kopieren und in den neuen Artikel einfügen. Und da bin ich ehrlich gesagt zu faul und versuche so viel wie möglich zu automatisieren. :-)

Und hier kommen die zusätzlichen Buttons im WordPress-Editor zum Zuge.

Den HTML-Editor um neue Buttons erweitern

Eigene Buttons im WordPress-EditorIch bin bekennender HTML-Editor Nutzer, da ich mit WYSIWYG-Editoren einfach nicht so klar komme. Natürlich sind letztere für Einsteiger besser, da man sich nicht mit HTML-Code beschäftigen muss und der Editor grundsätzlich so wie Word funktioniert.

Ich habe aber lieber mehr Kontrolle über das endgültige Aussehen und traue dem WYSIWYG-Editor nicht wirklich. ;-)

Deshalb setze ich das Plugin AddQuicktag von Frank Bueltge

Damit kann man ganz einfach neue Buttons definieren und denen auch einen Anfangs- und einen Endcode geben. Auf diese Weise kann man Textteile markieren und der Anfangscode wird davor und der Endcode dahinter eingefügt.

Will man einfach nur etwas an einer Stelle einfügen, dann trägt man dieses nur im Anfangscode ein.

Insgesamt eine einfache, aber sehr elegante Lösung, die bei mir sehr gut funktioniert und den Workflow etwas vereinfacht.

Den WYSIWYG-Editor um neue Buttons erweitern

Eigene Buttons im WordPress-EditorKommen wir zum WYSIWYG-Editor.

Da ich diesen, wie schon gesagt, nicht nutze, sind die folgenden beiden Lösung von mir nur kurz angetestet worden, aber finden nicht im Alltag Verwendung. Aber was ich gelesen und gehört habe, funktionieren diese gut.

Zum einen kann man das eben vorgestellte Plugin “AddQuicktag” mit einem weiteren Plugin so erweitern, dass die angelegten Buttons auch im WYSIWYG-Editor erscheinen.

Das hat natürlich den charmanten Vorteil, dass die einmal angelegten neuen Buttons in beiden Editoren vorhanden sind.

Eine andere Lösung ist das Plugin “Post Snippets“. Dieses ermöglicht auch das Anlegen von Code-Schnipseln, die dann per Button in den Editor eingefügt werden können.

Das geniale daran ist, dass man auch Variablen anlegen kann. Beim Klick auf den Button öffnet sich dann ähnlich wie bei dem WordPress eigenen Link-Button ein kleines Fenster und man kann Werte für die Variablen eingeben. Der eingefügte Code enthält dann diese Eingaben an den gewünschten Stellen.

Seit einer Weile funktioniert Post Snippets übrigens auch im HTML-Editor. Einziger Nachteile in meinen Augen ist, dass im Editor generell nur 1 Button mit dem Namen Post Snippets erscheint und man dann in dem aufpoppenden Fenster die verschiedenen angelegten Buttons als Reiter auswählen kann. Die angelegten Buttons hätte ich doch lieber direkt als einzelne Buttons gehabt. Aber ansonsten eine schöne Alternative zu AddQuicktag.

Direkt im Code?

Sollte man Änderungen direkt im Code vornehmen und auf diese Weise Buttons einfügen?

Nein, da beim nächsten Update die Core-Dateien überschrieben werden.

Man kann allerdings in der functions.php des eigenen Themes entsprechende Änderungen einbauen und auf diese Weise den WYSIWYG-Editor verändern. Aber das finde ich weder besonders komfortabel noch notwendig.

Wer trotzdem wissen will wie das geht, schaut sich den Artikel auf catswhocode.com an.

weitere Alternativen

Perun stellt in seinem Blog zudem einen Möglichkeit vor, wie man mit einem Firefox-Plugin die Einfüge-Funktion umsetzen kann.

Eigene Buttons im WordPress-Editor

Die Plugins BBCode und BBCodeXtra scheinen gut zu funktionieren.

Ich werde das wohl nicht nutzen, da ich gerade bei meinen Firefox-Plugins aufräume, damit der Browser schneller läuft. :-)

Auf wordpress-buch.de findet sich zudem ein sehr interessanter Artikel über den CKEditor.

Dieses Plugin ersetzt den WordPress eigenen WYSIWYG-Editor und bietet deutlich mehr Buttons und Funktionen. Werde ich bei Gelegenheit mal testen.

Eigene Buttons im WordPress-Editor

Eine Demo von diesem Editor gibt es auch.

Fazit

Es gibt einige Möglichkeit die beiden Editoren von WordPress zu erweitern und damit einen besseren Workflow zu erreichen.

Für welche Variante man sich entscheidet muss aber jeder durch eigene Tests selbst herausfinden.


Kommentare

  1. 1

    meint

    CKEditor ist für User die mit HTML nichts am Hut haben sicherlich eine gute Lösung. Allerdings unterstützt er nicht die neue “Interne Verlinkung”. Da ist meiner Ansicht nach TinyMCE der bessere Weg.

  2. 2

    meint

    Hallo!

    Schade das der CKEditor die Interne Verlinkung nicht unterstützt! Aber die Videoplattformen im Editor sind ein Hammer!

    Leider möchte ich auf die Interne Verlinkung nicht verzichten und so werde ich das Plugin TinyMCE, von Frank Viehmann erwähnt, mal testen…

    Danke für die Infos an Euch beide!

    MfG

    Csaba Nagy

  3. 3

    meint

    Hallo,
    @Csaba also TinyMCE unterstützt auch keine interne Verlinkung, zumindest war es nach dem 3.1er Update so – hatte es verwendet und mich gewundert wo die neue Funktion ist – erst nach der Deinstallation des Plugins war diese verfügbar.

    Der Tipp mit den Buttons für Artikel-Vorlagen ist natürlich interessant, muss ich dann gleich mal testen.

    Kurze Frage an Peer – du hast die Bilder schön in Unterordnern verwaltet – hatte dies auch mal probiert, aus dem WordPress-Backend zu lösen, hat bislang aber nicht funktioniert (bspw. Bilder/xy und Bilder/ab…) -> lädst du die Bilder manuell via FTP hoch oder über die Mediathek? Wäre mal interessant :)

    Danke und Gruß,

    Heiko

  4. 6

    meint

    Kleine Ergänzung zum Verwalten von wiederverwendbaren Code – oder Inhalten: mein Plugin Snippet löst dies via Custom Post Type und hat daher ein sehr gutes handling und kann in allen Bereichen von WP einfach integriert werden, via Shortcode oder php-Code.

  5. 7

    meint

    @ Frank
    Danke für den Tipp. Allerdings stellt sich die Frage, ob es sich lohnt, dafür Geld auszugeben, wenn es doch auch viele kostenlose Alternativen gibt.

    Schaue ich mir aber auf jeden Fall genauer an.

  6. 8

    meint

    @Peer: ja, dies ist immer die Frage; es gibt auch eine freie Alternative, wenn ich richtig bin; ich habe einfach viel Wert auf den Code gelegt und wollte eine sehr saubere Lösung, inkl. Berechtigungsobjekte etc.

Trackbacks/ Pingbacks