WordPress-Editor TinyMCE um Styles erweitern

Beim Schreiben von Artikeln, muss man sich auch immer wieder auf andere Artikel und Nachrichten beziehen und diese im Text zitieren. Da die Namen von Zeitungen Eigennamen sind wie zum Beispiel Spiegel, setze ich diese zur Hervorhebung gerne in Kapitälchen (small-caps). Das bewirkt, dass alle Buchstaben als Großbuchstaben dargestellt werden.

Das Problem ist nun, dass der TinyMCE Editor, welcher zum Bearbeiten bei WordPress mitgeliefert wird, sehr viel mehr Funktionalität bietet, als in WordPress standardmäßig aktiviert. Um entsprechend mehr Knöpfe zur Formatierung beim Schreiben verfügbar zu haben, empfehle ich die WordPress Erweiterung TinyMCE Advanced.

Nach dem entpacken, hochladen und aktivieren des PlugIns in WordPress können in den Einstellungen im Admin-Bereich mehrere neue Buttons zum Editor hinzugefügt werden. Damit diese Sichtbar werden am besten sich ausloggen, den Browser-Cache leeren und neu einloggen. Alternativ F5 drücken und dann die Seite (via Link) neu laden (da sonst die Buttons nicht angezeigt werden).

Hat man das geschafft, kann man sich nun daran machen einen neuen CSS-Stil hinzuzufügen. Dabei sind zwei Dinge zu beachten:

1. der neue Stil wird als CSS-Klasse eingebunden mit einem Span-Tag. Also so: <span class=”smallcaps”>der normale Text</span>
2. Damit diese Klasse  dann auch im Frontend (das ja wesentlich vom gewählten WordPress Theme abhängt) verfügbar ist, muss die Klasse mit ihrer Formatierung im WordPress-Theme angegeben werden. Dafür musst Du in deinem Design die entsprechende CSS-Datei suchen (meist über den Admin-Bereich zu editieren) und diese mit der unten angegebenen CSS-Klasse erweitern.

Zur Durchführung geht man in den Adminbereich von WordPress und erweitert den Wysiwyg-Editor über die TinyMCE-Advanced-Einstellungen um den Button “Stylesheets”. Dann wie folgt vorgehen:

1. die Datei wp-content\plugins\tinymce-advanced\css\tadv-mce.css öffnen und dort den unten angefügten CSS-Stil hinzufügen. Man könnte hier den Körper der Klasse auch leer lassen, da es nur darum geht, den entsprechenden Klassennamen im TinyMCE verfügbar zu machen. Damit der Stil jedoch auch beim Schreiben im Editor bereits sichtbar wird, füllen wir ihn ebenfalls mit der unten aufgeführten CSS-Klasse .smallcaps. Die Datei danach abspeichern.
2. dann die entsprechende CSS-Datei des eigenen WordPress-Themes editieren. Tut man dies im WordPress-Admin-Bereich muss dafür das Schreiben auf dem Server für das entsprechende Verzeichnis aktiviert sein. Ansonsten die Datei (beim K2 Theme ist es die wp-content\themes\k2\style.css) z. Bsp. mit einem Editor um die entsprechende CSS-Klasse erweitern.
3. Datei abspeichern und ggf. via FTP hochladen (und evtl. wieder den browser-cache löschen)

Nun ist der neue Stil im TinyMCE und ebenfalls im WordPress Theme, das heißt im Frontend für den User verfügbar und damit sichtbar. Ich habe folgenden CSS-Code eingefügt, um die Kapitälchen via “small-caps” CSS-Stil verfügbar zu haben:

.smallcaps {

    font-variant: small-caps;

}

Der neue Stil ist dann unter dem Namen “smallcaps” verfügbar. Der Name ist frei wählbar, muss jedoch in der TinyMCE-Datei und in der WordPress-Theme-Datei übereinstimmen, damit die Klasse auch gefunden werden kann.

Weiterführende Links

Ausführlicher Artikel zur Erweiterung des Editors, vor allem in älteren WordPress Versionen
Übersicht aller TinyMCE Default-Buttons und Plugins die zur Erweiterung zur Verfügung stehen

Verwandte Beiträge:

1. Installation of the WordPress Plugin MyCaptcha
2. What is to do by updating WordPress theme K2 to 1.0 RC8
3. WordPress Plugin Stats trackt User und sammelt Daten für Werbedienstleister
4. Problem with Comodo Firewall Update under Vista
5. Seinen Blog bekannter machen