Das heutige Thema ist wieder eines, was ich mit gemischten Gefühlen schreibe. Ich habe schon sehr häufig folgende Frage gehört: Wie kann ich meine Styles aus dem Frontend im visuellen Editor nutzen? Die Antwort auf diese Frage ist relativ einfach und ich möchte sie hier auch kurz beantworten. Am Ende des Artikels versuche ich aber noch zu erklären, was die Gefahr dabei ist.

Eine eigene CSS-Datei einbinden

Die Lösung für die Frage ist ziemlich einfach. Es gibt genau für diesen Zweck eine Funktion, die die Einbindung einer solchen CSS-Datei ermöglicht. Die Funktion heißt add_editor_style() und wird die folgt eingesetzt:

function my_theme_add_editor_styles() {
    add_editor_style();
}
add_action( 'admin_init', 'my_theme_add_editor_styles' );

Das ist schon alles. Wird kein Parameter angegeben, bindet WordPress mit dieser Funktion die Datei editor-style.css (relativ zum Theme-Verzeichnis) ein. Den Code schreibt ihr dabei am besten in die functions.php Datei eures (Child-)Themes. In dieser neuen CSS-Datei könnt ihr nun beliebige Regeln definieren und das Styling verändern.

Theme-CSS importieren

Ihr könntet in der editor-style.css auch einen @import auf die CSS-Datei eures Themes machen und alle Styles importieren. Eine bessere Möglichkeit ist aber nie Nutzung eines Parameters beim Funktionsaufruf:

add_editor_style( get_stylesheet_uri() );

Die Funktion get_stylesheet_uri() gibt den Pfad zur CSS-Datei eures (Child-)Themes zurück (einen String). Wie sieht es aber auch, wenn ihr eine Google Web Font verwendet, die ihr über den optimalen Weg, den ich vorgestern beschrieben habe, eingebunden habt? Dann würde diese CSS-Datei ja fehlen. Auch hier ist die Lösung recht einfach. Die Funktion akzeptiert auch ein Array von Strings zu mehreren CSS-Dateien. Die Lösung sieht für eine Google Web Font dann in etwa wie folgt aus:

function my_theme_add_editor_styles() {
	$google_font_url = str_replace( ',', '%2C', 'https://fonts.googleapis.com/css?family=Cherry+Swash:400,700' );
	add_editor_style( array( get_stylesheet_uri(), $google_font_url) );
}
add_action( 'admin_init', 'my_theme_add_editor_styles' );

Da eine URL zu einer Google Web Font ein Komma enthalten kann und dieses zu einem Fehler führt, wird es vorher „url encoded“, also durch „%2C“ ersetzt. Anschließend wird das Array mit dem Pfad zur style.css und dem zur Google Font verwendet. Nun ist auch die Google Font im Editor nutzbar.

Gefahren bei der Verwendung von eigenem CSS im visuellen Editor

Wieso ist es nun, wie zu Beginn erwähnt, nicht immer ratsam, die Styles im Editor zu überschreiben. Das möchte ich euch an zwei einfachen Beispielen zweigen.

1. Größe des Editors wird beeinflusst

Gerade, wenn man den gesamten CSS-Code des Themes importiert, kann es zu sehr unschönen Ergebnissen kommen. Betrachten wir einfach mal folgenden sehr einfachen Code:

body {
	margin: 0 auto;
	width: 1000px;
}

So eine Angabe sieht man sehr oft, wenn das Layout zentriert werden soll und eine feste Breite hat. Das Problem ist nun aber, dass der visuelle Editor selbst ein iframe mit einer HTML-Seite hat. Diese Angabe wirkt sich nun also auch auf dem Body aus und damit wird der Editor zu breit, so dass man horizontal scrollen muss:

2. Editor ist nicht gleicht Frontend

Als das erste Mal eine ehemalige Kollegin mit der oben genannten Frage an mich herangetreten ist wollte sie damit folgendes erreichen: Sie wollte sehen, wo genau eine Zeile umbricht. Jeder, der ein responsive Theme hat wird wissen, dass ein solcher Wunsch nicht wirklich viel Sinn macht. Man könnte damit (vielleicht) den Umbruch auf einer Desktop-Auflösung abschätzen, nicht aber auf Tablets und Smartphones. Man wird auch innerhalb des visuellen Editors niemals die Ansicht wie im Frontend erreichen, denn es fehlen hier dann z.B. Slider, durch JavaScript generierte Elemente, die Ausgabe der Shortcodes und ähnliches.

Je mehr man aber versucht, das Aussehen so weit es eben geht an das Frontend anzupassen, desto mehr könnten die Redakteure der Seite auch davon ausgehen, dass die Ansicht nachher die gleiche ist. Für mich sind Inhalt und Darstellung im Frontend zwei Paar Schuhe. Da ich fast immer im Textmodus schreibe ist mir die spätere Ansicht ohnehin egal und soll mich auch nicht beim Schreiben ablenken.

Fazit

Ihr habt gesehen, wie einfach mal CSS-Styles in den visuellen Editor einfügen kann. Wenn man dies aber macht, dann sollte man eine eigene CSS-Datei dafür bereitstellen, die nur genau so viele CSS-Regeln enthält, wie unbedingt notwendig sind. Die WordPress Default-Themes liefern meistens eine solche CSS-Datei bereits mit und binden sie auch in der functions.php Datei mit der oben beschriebenen Funktion ein. Im Fall von TwentySixteen hat die editor-style.css Datei nur etwa ein Viertel der Größe der normalen style.css Datei. Also denkt bitte daran, eure Datei nicht zu groß werden zu lassen und importiert/kopiert nicht einfach alles 🙂