WordPress & Webwork

WordPress: Schrift im HTML-Editor ändern

WordPress-Logo In WordPress 3.2 wurde die Schrift geändert: Arial/Helvetica waren ab da Standardschrift im Backend. Dies ist nicht bei allen Nutzern auf Sympathien gestoßen und so wurde mit dem Update auf 3.2.1 in dem Admin-CSS lediglich die generische Schriftfamilie sans-serif angegeben.

Trotz des Updates auf die neue WordPress-Version sind aber die Schriften Consolas (Windows) bzw. Monaco (Mac) in der HTML-Ansicht bzw. dem HTML-Editor geblieben. Bei den beiden Schriften handelt es sich um nichtproportionale (monospace) Schriften.

Solche Schriften – ich persönlich bevorzuge Courier New – eignen sich hervorragend in einem richtigen Code-Editor. Aber die HTML-Ansicht in WordPress nutze ich auch um "normalen" Text einzufügen und dafür sind meiner Meinung nach die nichtproportionalen Schriften nicht wirklich geeignet.

Die functions.php

Wer dies ändern möchte, dem stehen zwei Lösungswege zur Verfügung. Zum einen kann man folgendes in die functions.php seines WordPress-Themes einfügen:

<?php
// Vorherige Anweisungen
// Ändert die Schrift im HTML-Editor
add_action( 'admin_head-post.php', 'devpress_fix_html_editor_font' );
add_action( 'admin_head-post-new.php', 'devpress_fix_html_editor_font' );
function devpress_fix_html_editor_font() { ?>
<style type="text/css">#editorcontainer #content, #wp_mce_fullscreen {font: 13px/1.45 verdana, sans-serif;}</style>
<?php }
// Anweisungen die später hinzugefügt werden
?>

Ich habe extra für weniger erfahrene Nutzer durch die Beiden PHP-Kommentare gekennzeichnet, wie man das Code-Fragment in die schon bestehende functions.php einfügt. Die CSS-Regel deckt sowohl die HTML-Ansicht im "normalen" Modus (#editorcontainer #content) wie auch im Vollbildmodus (#wp_mce_fullscreen). Ob jetzt unbedingt Verdana und auch noch mit 13 Pixel zum Einsatz kommen sollte, soll jeder für sich selbst entscheiden. Nach dem Schrägstrich ist der Wert für die Zeilenhöhe (line-height).

Den Code habe ich auf devpress.com gefunden.

[adrotate group="6"]

Lösung im Browser: Stylish für Firefox

Wer aber seine WordPress-Installation möglich schlank halten möchte und/oder mehrere Projekte auf Basis von WordPress hat, für den könnte es interessanter sein eine browserbasierte Lösung in Betracht zu ziehen, da man diese nur einmal vornehmen muss. Eine solche Lösung bietet das Firefox-Addon Stylish welches ich bereits im Artikel WordPress 3.2: Arial im Backend ersetzen vorgestellt habe.

Firefox: mit Stylish neue Schrift für HTML-Editor im WordPress fetslegen

Einfach in Stylish eine neuen Stil erstellen und zum Beispiel folgende CSS-Regel eingeben:

#editorcontainer #content, #wp_mce_fullscreen {font: 13px/1.45 verdana, sans-serif !important;} 

Wichtig ist das man hier !important hinzufügt, da du nicht eine Regel ersetzt, wie im ersten Beispiel, sondern eine aktive CSS-Regel überschreibst.

12 Reaktion(en)

  1. zonebattler

    Hmpf, ich bemerke soeben, daß sich die Schriftarten-Umstellung im HTML-Editor nur auf das Verfassen und Editieren von Artikeln auswirkt, nicht jedoch auf das nachträgliche Überarbeiten von Kommentaren. Sehr unschön, das. Gibt es da vielleicht eine Möglichkeit zum schnellen und schmerzlosen Angleichen des Systemverhaltens?!

    1. Perun

      @zonebattler,

      also bei mir deckt der Selektor #editorcontainer #content auch das Bearbeiten der Kommentare im Backend ab. Ich nutze allerdings Stylish.

  2. zonebattler

    Was ist denn »Stylish« (nach einem häufig vorkommenden Adjektiv läßt sich schlecht googeln)? Ein Theme? Ein Plugin? Ich habe leider in allen von mir verwendeten Themes den gleichen Effekt: Artikel-Editor Topp, Kommentar-Editor Flopp. Obwohl das Ding ja hier wie da das Gleiche ist…

  3. zonebattler

    Oh je, wie peinlich. Da steht es in der Tat ja schon in der Überschrift und weiß Gott Groß genug! Hatte ich wohl schon im Eingabe-Puffer meines Sehnerves wieder verworfen, weil ich als begeisterter Opera-teur mit dem Feuerfuchs noch nie was am Hut hatte. Danke für die Klarstellung! ;-)

  4. Sebastian Pertsch

    Mich würde darüber hinaus interessieren, wie ich für den Editor eine externe Schrift einbette. In meiner normalen theme-style-css binde ich via @font-face eine andere Schriftart ein, wie kriege ich das für das Editor-Formular im Backend hin?

  5. Pingback: Google Reader: grausam kommt von grau | WordPress & Webwork

  6. Pingback: WordPress: Schrift im Backend und HTML-Editor anpassen (update) | WordPress & Webwork

Die Kommentare in diesem Beitrag sind geschlossen.