Code Styling Project

Der Editor von Moxiecode Systems AB TinyMCE, der als visueller Editor in WordPress verwendet wird, kann weit mehr, als standardmäßig eingeschaltet ist. Viele Erweiterungen lassen sich bereits durch Advanced TinyMCE Plugin freischalten, jedoch wird nicht immer das eigene, zum Theme passended Stylesheet im visuellen Editor verwendet. Wenn man ein WordPress als Auftragsarbeit für jemanden anderes einrichtet und betreut, der dann nur schreiben soll, kann man keine Kenntnisse in CSS und/oder HTML voraussetzen.

Deshalb ist es sinnvoll, wenn man ein wenig mehr Komfort bereitstellt und die Auswahl an Formatierungsmöglichkeiten für den Benutzer erweitert und vereinfacht. Ich habe ein Theme aktiv, das mir diese Möglichkeit frei Haus liefert, weil es eingebaut wurde. Ich habe nun dieses Feature als kleines Plugin herausgenommen und stelle das hier mal zu Download zur Verfügung.

Feature Demonstration

Im nebenstehenden Beispiel Screenshot ist exemplarisch gezeigt, was man dann im Editor erwarten kann. Der Editor bekommt eine neue Dropdown Liste, in der sich alle Klassen Stile der entsprechenden Datei befinden, die darin definiert wurden. Auf die Beschriftung hat man nur in sofern Einfluss, als das man die Klassennamen in der CSS Datei dann deutsch angeben muß, wenn man für deutsche Benutzer das bereitstellen will. Es wird immer 1:1 der Klassenname angezeigt, da hat man keinen Einfluß drauf, ist so im Editor codiert. Wie bekomme ich aber nun mein Stylesheet da rein ?

Voraussetzungen

Das Plugin ist mit WordPress 2.5.x getestet und wird auch erst ab dieser Version sauber funktionieren. Für ältere WordPress Versionen kann ich keine Garantie geben und befürchte, dass dieses Interface dort noch nicht (oder anders) bereitgestellt ist.

Weiterhin benötigt man eine neue Stylesheet Datei im aktuellen Theme Ordner, die in den visuellen Editor integriert werden soll. Der Dateiname wurde im Plugin als Konstante definiert und lautet: tinymce_blog_themed.css Wer das gern ändern möchte, kann das machen, ist aber sowieso nur für das Backend. In dieser Stylesheet Datei wird all das definiert, was man im Editor als Formatierungen haben möchte. Klassen werden in die Dropdown Liste aufgenommen und die Element Styles sorgen dafür, dass man auch korrekt Voransichten von z.B.: Bildern (Rahmen, Abstände etc.) bekommt. Man kann sich da frei entfalten.
Diese Datei ist nur für den visuellen Editor nötig. Es sollten also nur die wichtigen Styles enthalten sein, die ein Autor brauchen kann, einen Background oder Seitenstyle empfiehlt sich daher nicht. Diese Datei braucht man dann also nicht im Blog mit anzugeben. Wer allerdings sein style.css um einen Import erweitert: @import “tinymce_blog_themed.css”; kann das natürlich dann nur einmal definieren und im Theme Styleheet referenzieren.

Installation

Das Downloadpaket enthält 3 Dateien:

1. tinymce-blog-themed-stylesheet.php (Plugin)
2. tinymce_blog_themed.css (Style Demo wie im Screenshot)
3. Demonstrations - Screenshot

Das Plugin (PHP Datei) bitte direkt in den Plugin Ordner uploaden (/wp-content/plugins/) und die Stylesheet Datei in den Ordner des aktuellen Themes. Man kann auch gleich mit eigener Stylesheet Datei beginnen, dann braucht man nur das Plugin.
Im Adminbereich kann man dann das Plugin einfach aktivieren, und es steht zur Verfügung. Es gibt keine weitere Konfiguration oder Administrationsseite, funktioniert sofort. Das Plugin prüft aber sicherheitshalber die Existenz der zu integrierenden Stylesheet Datei beim Aufruf des Editors. Sollte diese nicht vorhanden sein, wird auch keine Dropdown Liste bereitgestellt.

WP 2.5+ Plugin: blog-theme-stylesheet-v1.0.0.0.zip

Hinweis

Falls es Probleme gibt, dass der Editor entweder verschwindet oder aber die Dropdown Liste nicht erscheint, liegt das möglicherweise am Cache des Editors und ggf. des Browsers. Den Editor Cache kann du auf deiner Domain löschen, in dem du im Order wp-content\uploads\js_cache alle Dateien löschst. Dann stellt TinyMCE den Cache neu her beim nächsten Aufruf. Und wie man den Browsercache löscht, sollte jeder wissen, wie es geht. Diese beiden Aktionen sind nicht immer nötig, meist sollte das auch so gehen. Nur im Falle, es versagt, bitte erst dies hier ausprobieren.