Wer 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.
1 2 3 4 5 |
add_action( 'init', 'add_theme_editor_styles' ); function add_theme_editor_styles() { add_editor_style( get_stylesheet_uri() ); } |
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.
1 2 3 4 5 |
add_action( 'init', 'add_theme_editor_styles' ); function add_theme_editor_styles() { add_editor_style( '/css/custom_stylesheet.css' ); } |