WordPress: Eigene Styles über den Editor

Mein konkreter Anwendungsfall ist der: Ich möchte in diverse Blogartikel Warnboxen einfügen, die den Leser in vier Kategorien auf besonders wichtige Punkte aufmerksam machen sollen. Dabei soll der Text im WordPress-Editor für Beiträge (basierend auf TinyMCE) geschrieben werden und über ein Dropdown-Menü direkt aus dem Editor formatiert werden.

Erstellen der Vorlagen in CSS

Als erstes muss man die Formatierung in CSS definieren. Dazu muss man sich erstmal festlegen, wie das in HTML umgesetzt werden soll. Ich habe mir das so vorgestellt (die denkbar einfachste Lösung): <div class="warning">Hier seht die Warnung</div> Die vier angesprochenen Kategorien (rot, gelb, grün, blau) werden über die Klasse ausgewählt. Mein CSS-Code sieht dabei folgendermaßen aus (er ist stark an diesen hier angelehnt): Dieser CSS-Code muss in 2 Dateien eingefügt werden. Zuerst in der style.css des Themes. Diese kann man über den Design-Editor im Backend bearbeiten. Optional, aber sehr zu empfehlen, ist noch eine zweite CSS-Datei. Diese sorgt dafür, dass die Formatierung auch schon in TinyMCE korrekt angezeigt wird. Die Datei liegt auch im Theme-Ordner und nennt sich editor-style.css (kann notfalls dort angelegt werden).

TinyMCE aufstocken

Style-Einträge hinzufügen

Jetzt müssen die vier neuen Formatvorlagen auch in TinyMCE eingebunden werden, damit man sie ohne Bearbeitung des HTML-Codes anwenden kann. Dazu bearbeitet man die Datei /wp-includes/class-wp-editor.php und fügt folgenden Text hinzu Der folgende Text kann ebenfalls mit dem Theme-Editor in die Datei functions.php eingefügt werden. [Danke Chris für den Hinweis] Jedes der oben angegebenen Arrays ist dann ein neuer Eintrag in der Styles-Liste. "block" sorgt für die div-Box um unseren Text herum, "classes" legt die CSS-Klasse fest und "wrapper" sorgt dafür, dass es nicht als „Absatz“ behandelt wird. Es gibt noch etliche weitere Konfigurationsmöglichkeiten, die ihr bei Codex nachlesen könnt.

Style-Einträge im Editor anzeigen

Der größte Teil ist schon geschafft. Ab jetzt kommt die Hilfe eines Plugins zum Tragen: TinyMCE Advanced. Damit kann man das Dropdown-Feld Styles in die Bearbeitungsseite holen. Wenn ihr das gemacht habt, sieht euer Editor so aus:
Die neu erstellten Formatvorlagen sind jetzt über eine Dropdown-Liste aufrufbar

Die neu erstellten Formatvorlagen sind jetzt über eine Dropdown-Liste auswählbar

Das Ergebnis

Die vier neu erstellten Boxen sehen so aus: warnboxen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.