Den WYSIWYG-Editor von WordPress anpassen - Guru 2.0
Den WYSIWYG-Editor von WordPress anpassen

Den WYSIWYG-Editor von WordPress anpassen

Brunnen vor dem Pariser Rathaus, Foto: microble.eu

Brunnen vor dem Pariser Rathaus, Bild: microble.eu

Bei uns in Österreich ist ja heute Feiertag, daher habe ich mir gedacht es gibt heute einen längeren Trick für WordPress. Ihr habt doch Zeit?
Es hat mich immer genervt, dass ich beim Erstellen eines Posts immer die besonderen Formatierungen im Editor über den HTML-Modus eingeben muss. Denn der Editor beherrscht ja nur Blockformatierungen. Daher bin ich ein wenig in den Tiefen des Blogsystems abgetaucht und schon sind folgende Anpassungen möglich geworden.
Ich möchte InLine-Stile direkt im Editor auswählen und auf markierten Text anwenden können. Zusätzlich wäre es noch super, wenn ich diese Stile auch gleich richtig formatiert sehen könnte, denn es heißt ja What-You-See-Is-What-You-Get.

Dieser Tweak teilt sich in mehrere Bereiche auf. Wir benötigen Stile und Anpassungen an WordPress selbst.

Die Stile anpassen

Legen wir zuerst mit den Stilen los. Ich benötige immer wieder Dateinamen und Code-Befehle innerhalb eines Textes. Diese zeichne ich normalerweise als span-Element aus und habe dafür bereits in meiner Datei style.css des aktiven Themas die beiden entsprechenden Klassen angelegt.

Diese können wir auch für den tinyMCE-Editor (so nennt sich der Editor in WordPress wirklich) verwenden. Wir legen dazu im Verzeichnis des aktiven Themas eine Datei EditorStyle.css an und fügen diese beiden Klassen mit Copy-And-Paste ein. Danach fügen wir die Klasse .post vor dem span-Element ein. Es sollte dann so span.HighFilename { und so span.HighCommand { aussehen.

Die Auswahlliste hinzufügen

Damit ich eine Unterscheidung zu den originalen Einstellungen des Editors habe, verwende ich die 3. Zeile für die Knöpfe um meine Stile anzuzeigen. Dazu benötigen wir die Datei functions.php im aktiven Thema um die sogenannten themenbezogenen Funktionen zu erstellen. Falls die Datei nicht vorhanden ist, kannst Du sie ganz einfach als Textdatei anlegen. In der ersten Zeile schreibst Du <?php und in der Zeile darunter ?>. Der folgende Code kommt genau zwischen die beiden Zeilen.

Zuerst fügen wir dei Funktion für das definieren des Knopfes ein.

benutzerdefinierte Stile im Editor

benutzerdefinierte Stile im Editor

Nun haben wir die Liste eingefügt. Wenn wir mit diesem Tweak komplett fertig sind, muss es so wie hier links gezeigt aussehen. Um jetzt einen Stil anzuwenden, brauchst Du nur den Text innerhalb des Editorfensters markieren und danach auf den Stil in der Liste klicken. Das war’s dann auch schon.

Die visuelle Darstellung aktivieren

Jetzt definieren wir gleich noch eine Funktion. Diese aktiviert die visuelle Darstellung der neuen Stile, welche wir bereits oben definiert haben.

Diese Funktion macht nicht anderes, als eine zusätzliche Klasse mit dem Namen post zum Editorfenster hinzuzufügen. Diese haben wir ja bereits oben, in der neuen css-Datei verwendet.

Die Hooks anwenden

Als nächstes folgt eine sogenannte Wrapper-Funktion. Diese ruft die beiden neuen Funktionen auf und definiert die passenden Hooks (in diesem Fall: Filter) um WordPress richtig anzupassen.

 

tinyMCE mit durchgeführten Anpassungen

tinyMCE mit durchgeführten Anpassungen

So damit haben wir wirklich alles erledigt. Die Auswahlliste steht in der dritten Symbolleiste und auch die beiden Stile werden im Editor richtig angezeigt.
Jetzt hast Du wieder ein wenig mehr Komfort beim Erstellen der Posts in WordPress. Es gibt also keinen Grund mehr nicht zu schreiben, oder doch?

Du willst noch weiter lesen?

Bei bueltge gibt es einen Post und die passenden Kommentare dazu, dieser liegt in ähnlicher Form auch bei WPEngineer.com [EN] vor. Zu den Hooks findest Du natürlich beim WordPress-Codex [EN] die passenden Infos und die Anpassungen der Buttons von tinyMCE sind auch dort beschrieben [EN].

Es wurde ein Kommentar zu diesem Beitrag geschrieben.

Blogheim.at Logo
Diese Website verwendet Cookies - nähere Informationen dazu finden Sie in unserer „Datenschutzerklärung“. Klicken Sie auf „Ich stimme zu“, um Cookies zu akzeptieren und unsere Webseite zu besuchen, oder klicken Sie auf „Cookie-Einstellungen“, um Ihre Cookies selbst zu verwalten.