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.
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.
View the code on Gist.
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.
View the code on Gist.
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.
View the code on Gist.
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)
View the code on Gist.
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:
Innerhalb eines Artikels verwendet bietet sich uns das gleiche Bild.
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.
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.