Schon lange ärgere ich mich über die Times-New-Roman-Schrift im WordPress-Editor TinyMCE. Auf meinem 17-Zoll Laptop mit 1920×1200 Auflösung ist nicht immer zu erkennen, ob sich zwischen zwei Worten eines, keines oder gar zwei Leerzeichen befinden. Also ab in den Quellcode von WordPress und auf Arial umstellen.
In der Folge erlebte ich wieder einmal die wahren „Freuden” eines Webworkers.
Das entsprechende CSS-Stylesheet war dank Firebug schnell lokalisiert, zuständig ist die Datei wordpress.css im Ordner / wp-includes / js /tinymce/ . In der Klasse .mceContentBody fand ich den Übeltäter bei der entsprechenden CSS-Anweisung „font:”. Also auf Arial umgestellt und ab damit auf den Webserver…
So einfach stellt sich der kleine (Webworker-)Maxi seine Arbeit vor. Nach -zig Versuchen musste ich verzweifelt das Handtuch werfen. Offensichtlich spielte mir der Javascript-Code von TinyMCE einen bösen Streich. Was immer ich auch an der wordpress.css änderte, der Editor in WordPress behielt strikt alle ursprünglichen Style-Einstellungen bei, alle Modifikationen blieben ohne Erfolg. Selbst die Anzeige der wordpress.css im Firefox-Browser zeigte immer noch ihren ursprünglichen Zustand. Rechteänderung am Webserver, Cache im Firefox gelöscht und schließlich sogar im Erzfeind aller Webworker, dem Internet Explorer probiert: Alles blieb wie es war, stets strahlte mir Times New Roman in ihrer schönen Leeraum-verschleiernden Pracht entgegen.
Ein Blick auf die Uhr lies mich schließlich zur Radikal-Tour greifen: Ich änderte die zuständige CSS-Klasse „mceContentBody” in der style.css meines Themes. Angeblich wird die ja auch beim TinyMCE geladen, also griff ich zum schrecklichsten Mittel aller Webdesigner: !important.
Finale Lösung des Problems
Um es kurz zu machen, auch das funktionierte nicht, zumindest nicht sofort. Erst eine weitere Verzweiflungstat sicherte mir einen geruhsamen Schlaf nach diesem Arbeitstag: Das Plugin TinyMCE Advanced, welches mir durch seine Funktion zur Anzeige der WordPress-generierten Paragraph-Tags in der HTML-Ansicht des Tiny-Editors schon lange wertvolle Dienste leistete. Zusätzlich bietet dieses Plugin die Möglichkeit, das vorhandene Theme-CSS-Stylesheet für die WYSIWYG-Anzeige zu laden.
Also fügte ich in meine style.css folgenden Code ein:
1 2 3 | body.mceContentBody { font-family: Arial; } |
Schließlich habe ich noch die Option „Import the current theme CSS classes” im Administrations-Menü von TinyMCE Advanced aktiviert und sah nun endlich meine gewünschte Arial-Schrift im WordPress-Editor. Um meine aufgewühlte Webworker-Seele endgültig zu beruhigen, beendete ich diese Tat mit der Hoffnung, dass meine Problemlösung auch das nächste WordPress-Update ohne notwendige Änderungen im Quellcode von TinyMCE überlebt – hoffentlich.
