WordPress: So bohrst du den visuellen Editor mit eigenen Formaten auf

WordPress: Den visuellen Editor tunen und eigene Styles verwenden

Andreas Hecht

ist WordPress-Entwickler und bietet dir WordPress-Sicherheit für deine Website. Zudem entwickelt er...

Du möchtest gern eigene Formate im visuellen Schreib-Editor von WordPress nutzen? Gut, denn eigene Styles hinzuzufügen, verschafft dir viele Vorteile. Du kannst so deine eigenen Elemente verwenden, ohne in den Textmodus wechseln zu müssen. Daher zeigen wir dir in diesem Beitrag, wie du den Editor mit deinen eigenen Formaten ergänzen kannst.

WordPress: Den visuellen Editor tunen und eigene Styles verwenden

Der visuelle Editor von WordPress ist eine feine Sache. Die wichtigsten Formatierungen hast du nur einen Mausklick entfernt. Du kannst deine Artikel mit Elementen anreichern und strukturieren. Allerdings wäre es schön, wenn der Editor noch einige Funktionen mehr hätte.

Sicher gibt es viele Plugins auf dem Markt, die den Editor mit Shortcodes ergänzen. Doch brauchst du die wirklich alle? Oder reichen einige wenige Elemente, wie zum Beispiel schicke Buttons, nicht vollkommen aus? Das würde deine Website nicht unnötig verlangsamen.

Natürlich kannst du auch heute schon jederzeit in den Textmodus wechseln, um deine Formatierungen hinzuzufügen. Doch benutzerfreundlich geht anders.

WordPress: eigene Styles zum visuellen Editor ohne Plugin hinzufügen

Eigene Styles zu nutzen heißt auch, dass wir WordPress-Dateien anfassen müssen. Der zusätzliche Code, den wir gleich erstellen werden, kommt entweder in die functions.php des aktiven Themes oder in ein eigenes Plugin. Ich empfehle dir letzteres.

1 – Wir erstellen einen eigenen Menüpunkt im Editor

Der folgende Code erstellt ein zusätzliches Dropdown-Menü im visuellen Editor. Das Menü wird dir die Möglichkeit geben, deine eigenes Styles auswählen und nutzen zu können.

2 – Die Optionen erstellen, die gewählt werden können

Jetzt müssen wir noch die Optionen erstellen, die wir dem gerade erstellten Dropdown-Menü hinzufügen wollen. Danach wirst du in der Lage sein, diese Formate zu nutzen. Für dieses Tutorial wählen wir drei Buttons aus, die wir im Anschluss nutzen können.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €

E-Book Bundle von Andreas Hecht

3 – Das nötige CSS für die Buttons erstellen

Die Buttons sind bereits jetzt nutzbar. Du kannst es ausprobieren, indem du einen neuen Artikel erstellst und dann die neue Funktion nutzt. Allerdings sehen die Buttons noch nicht nach Buttons aus, dazu bedarf es noch etwas CSS.

Kopiere das CSS in dein Style.css deines Themes hinein, oder erstelle ein eigenes Stylesheet dafür.

4 – Wir brauchen noch ein CSS für den Editor

Damit wir die Buttons auch korrekt formatiert im visuellen Editor sehen können, brauchen wir ein editor-style.css.

Du findest die Datei meistens im Root-Verzeichnis deines Themes oder in einem Ordner namens CSS. Wenn noch keines vorhanden ist, dann wäre es empfehlenswert, wenn du jetzt eines anlegst. Das ist nicht weiter schwer. Erstelle einfach mit einem HTML-Editor eine leere CSS-Datei namens editor-style.css.

Kopiere nun das CSS von Punkt drei in das neue Stylesheet und speichere es ab. Verschiebe es in das Hauptverzeichnis deines Themes hinein. Nun benötigst du noch eine kleine PHP-Funktion, die das neue Stylesheet für deinen Editor aufruft.

Dr. Web: Die 9 besten kostenlosen HTML-Editoren für Webentwickler (Windows-Edition)

Das Endergebnis: unsere neuen Buttons

Die neuen Buttons sind jetzt sehr leicht zu nutzen und nur noch einen Mausklick entfernt, wenn du einen neuen Artikel schreibst.

Im Tiny MCE Editor sehen die Buttons nun hübsch formatiert aus:

Die neuen Buttons im Editor von WordPress

Innerhalb eines Artikels verwendet bietet sich uns das gleiche Bild.

buttons-im-artikel

Wie Du die neuen Buttons nutzen kannst

Da wir die Buttons mit recht einfachen Methoden erstellt haben, kannst du nicht auf einen komfortablen Generator zurückgreifen. Trotzdem geht die Nutzung der Buttons relativ einfach. Du schreibst einfach den Button-Text in den Editor, markierst den Text und gehst dann in den neuen Menüpunkt »Formate«. Such dir den Button deiner Wahl aus.

Jetzt hast du einen farbigen Button erzeugt. Für einen Link markierst du den Button-Text erneut und fügst den Link ein.

Andere Elemente hinzufügen – leicht gemacht

Du kannst jederzeit andere Elemente hinzufügen. Vielleicht nutzt Du genau wie ich den Code-Tag öfter? Oder du möchtest eine farbige Box für hervorgehobenen Text erstellen? Kein Problem, der Screenshot zeigt dir, was du im PHP-Code von Punkt zwei verändern musst.

So einfach kannst du eigene Styles hinzufügen

So einfach kannst du eigene Styles hinzufügen

Du musst nur darauf achten, dass du das komplette Array kopierst und unter ein bestehendes setzt. Ich habe dir im Screenshot markiert, wo das Array anfängt und wo es aufhört. Die grünen Klammern markieren den Bereich.

Ein Plugin für diesen Job nutzen

Natürlich kannst du auch ein Plugin nutzen, wenn du sehr viel mit eigenen Styles arbeitest. Wir hatten bereits eines der interessantesten Plugins für eigene Styles und Shortcodes vorgestellt. Auch Entwickler werden mit dieser Erweiterung sehr glücklich, denn es gibt kaum etwas, was man nicht erstellen und verwenden könnte.

Dr. Web: Post Snippets für WordPress – dieses Plugin musst Du haben!

Fazit

Mit einfachen Mitteln und ohne unser WordPress durch ein aufgeblähtes Plugin zu verlangsamen, haben wir eine tolle Möglichkeit gefunden, eigene Formate im Editor von WordPress komfortabel nutzen zu können. Schreib mir gern in die Kommentare, was Du mit meiner Methode realisiert hast.

Andreas Hecht

ist WordPress-Entwickler und bietet dir WordPress-Sicherheit für deine Website. Zudem entwickelt er WooCommerce Shops mit Ladezeiten von unter einer Sekunde. Er schreibt seit 2012 für Dr. Web. Auf seinem Blog veröffentlicht er unter anderem nützliche WordPress-Snippets.