Text-Darstellung im Editor anpassen

Dieser Artikel ist ursprünglich am 13. 05. 2011 erschienen.
Das ist eine ganze Weile her. Der Inhalt ist wahrscheinlich nicht mehr aktuell.

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;
}

Kommentare, die nichts mit dem jeweiligen Artikel zu tun haben, oder die (weitgehend) inhaltslos sind und keinen Mehrwert für andere Leserinnen und Leser bieten, veröffentlichen wir nicht.

3 Kommentare zu “Text-Darstellung im Editor anpassen

  • Mahlzeit, ich bin mal so frech und poste was auf deiner Seite. Sieht schoen aus! Ich nutze seit kurzem auch WordPress diverse Sachen verstehe ich aber noch nicht. Dein Blog ist mir da immer eine willkommene Inspiration. Weitermachen!

  • Einfach mal DANKE! :)
    Diese kleine Kleinigkeit, dass mir im WordPress-Texteingabefeld das unsägliche Times New Roman entgegenlacht, hat mich echt kirre gemacht, und die Suche, dies zu ändern, führte mich immer zu Tipps zur Textdarstellung eines Eintrags *im Blog*, also zu style.css und Artverwandtem, aber eben nicht wie die Ansicht im Editor selbst geändert wird.

    Und dank dieses Eintrags kann ich endlich Blogtexte bereits beim Tippen im von mir gewünschten Font lesen, schön! :)

    • Hallo, Jan,
      das freut mich! :o)
      Ich kenne das, solche Kleininkeiten können einen zum Wahnsinn treiben.

      Schöne Grüße

      Kirsten

Die Kommentare sind geschlossen.