Text-Darstellung im Editor anpassen

Im Backend-Editor werden alle Texte in einer Standard-Darstellung angezeigt. In der Regel sieht man alles in Times New Roman. Auf der Website erscheinen die Formatierungen dann natürlich so, wie in der style.css angegeben.

Mich irritiert die unterschiedliche Darstellung beim Schreiben, ich sehe meine Texte gern so, wie sie am Ende auch gezeigt werden.

Ich lege mir deshalb bei jedem Theme eine CSS-Datei für den Editor an. Dort trage ich alle Formatierungen ein, die ich im „Original“ sehen will.
Das sind beispielsweise alle Headlines, das Format von Zitaten und die Codeschnipsel.

1. Editor-Styles aktivieren

Dazu müsst Ihr zuerst folgenden Code in die functions.php eintragen:

add_editor_style('editor.css');

In der Klammer steht der Name der CSS-Datei, in die der Editor gucken soll. In diesem Fall heißt die Datei editor-css.
(Gänsefüßchen nicht vergessen.)

2 Styles-Datei anlegen und hochladen

Danach erzeugt Ihr eine leere Datei mit dem Namen editor.css. Hier trag Ihr alle Styles ein, die Ihr in der Originaldarstellung sehen wollt. Die Datei ladet Ihr dann ins Theme-Verzeichnis hoch. Sie steht auf derselben Ebene wie die styles.css.

In diesem Beispiel habe ich die Headlines, die Zitale (Tag: blockquote) und die Codeschnipsel (Tag: pre) formatiert:

h1, h2, h3, h4, h5{
font-weight:normal}

pre{
font-family: "Courier New", Courier, mono;
color: #70b5db;
border: 1px solid #ccc;
display: block;
}

blockquote{
margin-left: 20px;
border-left: 1px solid #ccc;
padding-left:10px;
color: #9a9a9a;
}