Custom CSS im WordPress-EditorWer den normalen WordPress-Editor zum schreiben seiner Artikel nutzt, wird das Problem kennen. Im Editor (also im WordPress-Backend) sieht der verfasste Content immer anders aus, als nach der Veröffentlichung des Artikels im Blog.

Hier hilft es nur, regelmäßig den „Vorschau“-Button zu klicken und dann im Editor den Artikel solange zu überarbeiten, bis der Content am Ende im Frontend/Blog so aussieht, wie er aussehen soll.

Tatsächlich geht es jedoch viel einfacher. Mittels folgendem Trick, lässt sich das WordPress Frontend-Stylesheet (also jenes, welches im öffentlichen Bereich eures Blogs ausgeliefert wird) auch im WordPress-Backend einbinden.

WordPress-Stylesheet im Backend einbinden

Um das Frontend-Stylesheet des jeweiligen Themes im Backend/Editor einzubinden, ist folgender Code nötig. Dieser kann direkt in der functions.php des verwendeten WordPress-Themes eingebunden werden.

Mittels der add_editor_style()-Funktion kann ein weiteres Stylesheet in das Editor-View geladen werden. Mittels der get_stylesheet_uri()-Funktion rufen wir die URL des Stylesheets ab, welche mit dem verwendeten Theme mitgeliefert wird.

Beliebiges Stylesheet im WordPress-Editor

Um nun ein beliebiges Stylesheet in der WordPress-Editor-Ansicht mitzuladen, muss das obige Beispiel nur in einer Zeile angepasst werden. Genauer gesagt, muss die get_stylesheet_uri()-Funktion durch einen String mit der Pfadangabe des Themes ersetzt werden. Hierbei ist darauf zu achten, dass der Pfad relativ zum Pfad der functions.php-Datei angegeben wird.