perun.net – WordPress & Webwork



WordPress: Schrift im HTML-Editor ändern

Von am 24. 07. 2011 um 17:50 – Aktualisiert am 01. 08. 2013 um 04:02

In diesem Artikel werden zwei Lösungen vorgestellt, wie man in WordPress die Standard-Schrift für den HTML-Editor ersetzen bzw. ergänzen kann.

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.

Diesen Artikel weiterempfehlen:

Premium WordPress Themes

Verwandte Artikel:

 — 


12 Kommentare

  1. 1.zonebattler

    Kommentar vom 24.07.2011 um 23:43

    Sehr praktisch, sehr hilfreich. Dankeschön!

  2. 2.Perun

    Kommentar vom 25.07.2011 um 02:21

    @zonebattler,

    bitteschön. :-)

  3. 3.zonebattler

    Kommentar vom 25.07.2011 um 10:57

    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?!

  4. 4.Perun

    Kommentar vom 25.07.2011 um 11:39

    @zonebattler,

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

  5. 5.zonebattler

    Kommentar vom 25.07.2011 um 16:57

    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…

  6. 6.Perun

    Kommentar vom 25.07.2011 um 18:51

    @zonebattler,

    Was ist denn »Stylish«

    ich zitiere mich mal selber aus diesem Artikel:

    Eine solche Lösung bietet das Firefox-Addon Stylish welches ich bereits im Artikel WordPress 3.2: Arial im Backend ersetzen vorgestellt habe.

  7. 7.zonebattler

    Kommentar vom 25.07.2011 um 22:15

    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! ;-)

  8. 8.Dürrbi

    Kommentar vom 28.07.2011 um 11:41

    Danke für den Tipp…. endlich sieht der Editor wieder "normal" aus :-)

  9. 9.Sebastian Pertsch

    Kommentar vom 02.08.2011 um 11:47

    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?

  10. 10.Perun

    Kommentar vom 05.08.2011 um 23:18

    @wenn du du das Addon Stylish nutzt, dann kommt dort die gleiche Regel rein, wie wenn du das CSS in die Website einbinden würdest.

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

    Pingback vom 01.11.2011 um 14:52

    [...] mich morgen auf die Suche nach Alternativen machen. Als erstes werde ich schauen ob man mit der Firefox-Erweiterung Stylish den Reader farblich aufpeppen [...]

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

    Pingback vom 17.05.2012 um 00:10

    [...] Schrift im HTML-Editor ändern [...]

Tut mir Leid, aber die Kommentar-Funktion ist momentan deaktiviert.



Weblog der perun.net webwork gmbh mit Artikeln zum Thema WordPress, Webwork, und Internet.