Zusätzliche Buttons in der Symbolleiste des Editors von WordPress einfügen - Guru 2.0
Zusätzliche Buttons in der Symbolleiste des Editors von WordPress einfügen

Zusätzliche Buttons in der Symbolleiste des Editors von WordPress einfügen

Heute ist Samstag und wir haben ein wenig mehr Zeit uns mit unserem Blog zu beschäftigen. Daher habe ich mir gedacht wir bohren den Editor ein wenig auf und passen ihn so an, dass wir auch wirklich schnell und effektiv damit arbeiten können.

Wie du eigene Stile in der dritten (!) Symbolleiste hinzufügst und auch im Editor des DashBoards siehst, habe ich bereits im Post zu Den WYSIWYG-Editor anpassen beschrieben. Heute werden wir uns darum kümmern, einerseits Standardknöpfe in der 1. Symbolleiste hinzuzufügen und andererseits eine Art Textbaustein zu programmieren.

Stanardknöpfe zum Editor hinzufügen

Neue Knöpfe im WYSIWYG-Editor von WordPress

Neue Knöpfe im WYSIWYG-Editor von WordPress

Fangen wir mit den Standardknöpfen an. Dies ist relativ einfach, da Du dazu die bekannte functions.php im aktiven Thema brauchst. Falls diese bei Dir nicht existiert, kannst Du sie einfach anlegen. Vergiss aber nicht in der ersten Zeile <?php und in der letzten Zeile ?> einzufügen. Jetzt kannst Du untenstehende Funktion einfügen und hast die zusätzlichen Knöpfe am Ende der ersten Symbolleiste. Wenn Die eine eigene Sortierung in der Symbolleiste haben willst, musst Du nur alle Knöpfe der Reihe nach aufführen und in die leeren eckigen Klammern der buttons-Elemente eine Index-Zahl schreiben. Der Index ist fortlaufend numeriert und beginnt bei 0 für den ersten Knopf.

Nun stellt sich mir die Frage: Welche Knöpfe kann ich hinzufügen? Ganz einfach, hier ist die Liste aller möglichen Befehle, ohne dass Du ein zusätzliches PlugIn installieren musst.

  • bold
  • italic
  • underline
  • strikethrough
  • justifyleft
  • justifycenter
  • justifyright
  • justifyfull
  • bullist
  • numlist
  • outdent
  • indent
  • cut
  • copy
  • paste
  • undo
  • redo
  • link
  • unlink
  • image
  • cleanup
  • help
  • code
  • hr
  • removeformat
  • formatselect
  • fontselect
  • fontsizeselect
  • styleselect
  • sub
  • sup
  • forecolor
  • backcolor
  • forecolorpicker
  • backcolorpicker
  • charmap
  • visualaid
  • anchor
  • newdocument
  • blockquote
  • separator
    oder |-Zeichen

Textbausteine für WordPress

Textbaustein für WordPress

Textbaustein für WordPress

Auch damit lässt sich der Editor verbessern. Gerade beim Schreiben von Posts, kommen immer wieder Standardformulierungen vor. Die einen speichern sie in irgendeinem Editor, die nächste verwenden ein Editorfenster, welches alle Texte enthält und löschen die nicht benötigten und die dritten schreiben die Texte jedesmal neu. Aber das muss ab jetzt nicht mehr sein, wir können uns nämlich Textbausteine in den Editor einfügen.

Da dieses Beispiel bereits aufwendig ist, habe ich auf ein extra Menü für mehrere Bausteine verzichtet. Aber wir bekommen zumindest einen Knopf der einen vorgegebenen Text an die Stelle des Cursors im Editor einfügt. Zuerst erweitern wir die functions.php um folgende Funktionen. Dies sind einige Zeilen an SourceCode welche erstellt werden müssen. Die Erklärungen für die wichtigsten Befehle findet ihr, wie immer in den Bemerkungen zum Code.

Nun legen wir im aktiven Thema ein Verzeichnis js/ an und dort die neue Datei guru20_AutoText.js. Diese enthält die gesamte Funktionalität des neuen Knopfes. Auch hier ist der gesamte SourceCode für die JavaScript-Datei mit den Erklärungen als Bemkerung direkt im Code.

Ich denke der Post bringt euch wieder ein wenig mehr zur effektiven Arbeit mit eurem Blog. Wenn Du absolut keine Ahnung vom Programmieren hast. Kannst Du den Code wie wer ist in die erwähnten Dateien einfügen. Die einzigen Anpassungen, welche notwendig sind, findest Du in der Datei guru20_AutoText.js in der Zeile #18. Hier musst Du den Pfad und Dateinamen für die Grafik deines Knopfes anpassen. Und in der Zeile #24. Hier gibst Du in den Klammern den Text an, welcher eingefügt werden soll.

Es wurde ein Kommentar zu diesem Beitrag geschrieben.

  • neustadtleben

    Hey,
    Danke für die saubere Lösung. Es funktioniert hervorragend.
    Da ich sie für Buddypress mit einem Childtheme nutze musste ich allerdings die get_bloginfo(‘template_url’) Funktion durch get_stylesheet_directory_uri() ersetzen.
    Damit geht es dann einwandfrei.
    Deine Seite kommt bei mir zu den Favoriten 🙂

Blogheim.at Logo
Diese Website verwendet Cookies - nähere Informationen dazu finden Sie in unserer „Datenschutzerklärung“. Klicken Sie auf „Ich stimme zu“, um Cookies zu akzeptieren und unsere Webseite zu besuchen, oder klicken Sie auf „Cookie-Einstellungen“, um Ihre Cookies selbst zu verwalten.