Den visuellen Editor von WordPress verbessern

What-you-see-is-what-you-get (WYSIWYG) fällt einem nicht als erstes ein, wenn man mit dem visuellen Editor von WordPress arbeitet. Sicher ist das etwas besser als die HTML-Ansicht, die beschönigend mit Text bezeichnet wird. Dabei ist es für ein sauberes Layout unerlässlich, dass der Editor zumindest annähernd das Design der Webseite korrekt darstellt. Die Technik gibt es schon lange. Sie wird aber zu wenig angewendet, obwohl heute Editor Plugins oder viele Themes diese Option bereits haben. Sie verbirgt sich hinter der Bezeichnung editor-style.css.

Zusammenfassung: Um den visuellen Editor zu verbessern, sollte dafür ein eigenes CSS Stylesheet (editor-style.css) angelegt oder aktiviert werden. Diese Funktion ist in vielen Themes und Editor Plugins bereits enthalten. Bei richtiger Konfiguration bildet der Editor dann das Layout der Webseite exakt ab. Die editor-style.css liegt im gleichen Ordner wie die style.css.   

Das ist nichts weiter als ein CSS Stylesheet, das speziell für den Editor geladen wird. Wenn es im Theme noch nicht vorhanden ist, wird diese Stylesheet in dem Ordner erstellt, wo die style.css liegt. In der Regel ist das der Theme Ordner. Damit das ordentlich funktioniert, sind ein paar Details zu beachten. Das Stylesheet der Seite bezieht sich auf Elemente, die der Editor nicht kennt. Das sind vor allem die übergeordneten <DIV> Tags. Diese Elemente müssen  wir entfernen, damit das Stylesheet funktionieren kann.

#content .entry-content p {font-size:1.2rem;}

Diese Anweisung wird vom Editor ignoriert, weil #content und .entry-content erst später hinzugefügt werden. Für den Editor ist erst das <P> Tag wichtig. Deshalb muss es korrekt heißen:

p {font-size:1.2rem;}

Besonders sinnvoll ist es, wenn die verfügbare Breite begrenzt wird. Sonst bekommen wir keine realistische Darstellung des Zeilenumbruchs und können unschöne Lücken im Flattersatz nur schwer vermeiden. Am besten setzt man die Breite auf die Standardgröße der Hauptspalte.

html .mceContentBody {max-width:772px;}

In den folgenden Screenshots sieht man schön, dass der Editor nun ein recht gutes Bild der Webseite zeigt.

Manchmal muss das Stylesheet in der functions.php des Theme registriert werden. Das ist keine große Sache. Wir fügen einfach den folgenden Code hinzu.

<?php 
 function my_theme_add_editor_styles() { 
 add_editor_style( 'custom-editor-style.css' ); 
 } 
 add_action( 'init', 'my_theme_add_editor_styles' ); 
 ?>

Ein Stylesheet für den Editor sollte immer eingerichtet werden. Es hat für diejenigen Vorteile, die am liebsten im Quellcode arbeiten. Unschöne Stellen im Flattersatz lassen sich in der HTML Ansicht z.B. nicht erkennen. Ebenso ist es für die Beurteilung von Größe und Position der Bilder unerlässlich, eine gute visuelle Ansicht zu haben.