Text-Darstellung im Editor anpassen

Dieser Artikel ist ursprünglich am 13. 05. 2011 erschienen.
Das ist eine ganze Weile her. Der Inhalt ist womöglich nicht mehr ganz 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.

Hinweise zum Datenschutz
Wenn du einen Kommentar schreibst, wird dieser inklusive Metadaten zeitlich unbegrenzt gespeichert. Auf diese Art können wir Folgekommentare automatisch erkennen und freigeben, anstelle sie in einer Moderations-Warteschlange festzuhalten.
Wenn Besucher Kommentare auf der Website schreiben, sammeln wir die Daten, die im Kommentar-Formular angezeigt werden, außerdem die IP-Adresse des Besuchers und den User-Agent-String (damit wird der Browser identifiziert), um die Erkennung von Spam zu unterstützen. Aus deiner E-Mail-Adresse kann eine anonymisierte Zeichenfolge erstellt (auch Hash genannt) und dem Gravatar-Dienst übergeben werden, um zu prüfen, ob du diesen benutzt.
Die Datenschutzerklärung des Gravatar-Dienstes findest du hier.
Nachdem dein Kommentar freigegeben wurde, ist dein Profilbild öffentlich im Kontext deines Kommentars sichtbar.