16 Jun 2016
Der Puzzle-Mann in Paris, Bild: microble.eu

Der Puzzle-Mann in Paris, Bild: microble.eu

 

Jetzt bin ich schon einige Zeit genervt, dass ich für bestimmte HTML-Elemente immer auf den Text-Editor umschalten muss. Dass muss sich doch anders lösen lassen? Mit diesem Post hat es endlich ein Ende. Ich musste einfach den WordPress-Editor mit neuen Buttons erweitern.

Und jetzt kannst auch du die Elemente code, ins und del direkt im visuellen Editor von WordPress verwenden. Und zusätzlich habe ich noch einen Knopf für den Seitenumbruch eingefügt. Ich hatte zwar schon eine Anleitung für das Erweitern des tinyMCE-Editors geschrieben, aber die muss eben ein wenig ergänzt werden, denn die Zeit bleibt nicht stehen.

Natürlich geht das nicht ohne Programmieren. Aber es ist eigentlich nicht so schwierig. Auf jeden Fall brauchst du ein Child-Theme, damit du nichts am Original veränderst und immer die Updates machen kannst. Dann fangen wir an die Datei functions.php des Child-Themes mit den folgenden Code-Blöcken am Ende zu ergänzen.

Einen PageBreak in der 1. Toolbar einfügen

Fangen wir mit dem Bonus an. Es ist nämlich viel leichter den WordPress-Editor mit neuen Buttons erweitern, welche bereits im System integriert sind. Und genau das ist dieser Knopf, der mit dem Namen wp_page eigentlich vorhanden ist aber nicht angezeigt wird.

WordPress-Editor mit neuen Buttons erweitern und den Page-Break Button einfügen

WordPress-Editor mit neuen Buttons erweitern und den Page-Break Button einfügen

In der 4. Zeile siehst du wie der Button eingefügt wird. Die 13 welche du dort siehst, sagt das er an die 13. Stelle kommt. Das ist auch so gewollt, denn dadurch steht er direkt hinter dem Weiterlesen-Knopf in der ersten Symbolleiste.
Das es die 1. Smbolleiste ist wird in der 8. Zeile mit dem Wert mce_buttons festgelegt.

Den WordPress-Editor mit neuen Buttons erweitern

Ja wirklich die Beitragsüberschrift verspricht dieses Mal zu wenig. Wir fügen gleich noch ein paar praktische Buttons in der zweiten Symbolleiste ein. Es sind Knöpfe welche ich dauernd brauche und es nervt mich. Entweder muss ich auf den reinen Text umschalten um die Buttons zu erhalten oder gleich direkt die HTML-Tags im Texteditor ergänzen. Daher mache ich mir und euch ab jetzt das Leben leichter.

Ein paar Buttons können wir einfach so hinzufügen, für ein paar andere müssen wir eine eigene Funktion ergänzen. Aber fangen wir mit dem einfachen Teil an.

Die 2. Symbolleiste im WordPress-Editor mit neuen Buttons erweitern

Die 2. Symbolleiste im WordPress-Editor mit neuen Buttons erweitern

Die Buttons für die html-Elemente einfügen

Wir fügen die neuen Buttons in die 2. Symbolleiste ein. Dies erreichen wir mit dem Wert mce_buttons_2 in der Zeile 13. Und damit wir uns das Leben leichter machen können wir den WordPress-Editor mit neuen Buttons erweitern, in dem wir diese am Ende anfügen. Wir beginnen mit einem Trennstrich in der Zeile 3 und fügen dann einen Knopf für das hoch- und tiefstellen ein.

Dann folgt wieder ein Trennstrich und drei neue Knöpfe. Zuerst verwenden wir wp_code für das code-Element. Ich brauch es immer wieder um Dateinamen oder Befehle auszuzeichnen. In den Zeilen 8 und 9 füge ich eigene Buttons ein. Der erste ergänzt das ins-Element und der zweite das del-Element. Diese werden erst später mit der passenden Funktion versehen.

Die Buttons für die html-Elemente mit Funktionen ergänzen

Da einerseits die beiden Knöpfe nicht vorhanden sind müssen wir sie „mühsam“ programmieren. Aber bei beiden HTML-Elementen ist auch noch das Attribut datetime vorgesehen. Damit wird dem Browser/der Suchmaschine mitgeteilt, wann eine Information hinzugefügt (ins) bzw. entfernt (del) wurde.

Dafür speichern wir die aktuelle Zeit in der Variablen $date in der Zeile 4. In der Folgezeile speichern wir JavaScript-Code in der Variablen $setup_function. Diese übergeben wir am Ende an den tinyMCE-Editor (so nennt sich der Editor wirklich) zum Verarbeiten.

Interessant sind für uns die Zeilen 6 und 12. Hier legen wir fest für welchen Button die Funktion gilt. wir verwenden die gleichen Bezeichnungen wie in der vorhergehenden Funktion, eben g20_ins und g20_del. Dann wird es in den Zeilen 9 und 15 wieder interessant. Hier legen wir fest welche Elemente rund um den markierten Text eingefügt werden. Und auch, dass ein Attribut hinzugefügt werden soll.

Und Du?

Ich freue mich über jeden Kommentar. Schreib ruhig wenn Du eine Frage oder einen Tipp hast. Ich habe auch eine Frage: Hat dir dieser Post genützt und war er einfach genug. Oder habe ich zu kompliziert geschrieben. Trau dich und schreib mir eine Antwort in den Kommentaren.

Tags: , , , , , ,