WordPress: Farben im Editor

Beim Entwerfen einer Website spielt die Auswahl der geeigneten Farben eine sehr wichtige Rolle. Nur wenn alle Farben aufeinander abgestimmt sind, wirkt die Website auch harmonisch. Dazu gibt es auch hilfreiche Tools wie den Color Scheme Designer. Wenn man nun seine Farbcodes ausgewählt hat, sollte man auch nur noch diese verwenden und schreibt diese dann auch in seine eigene CSS-Datei – idealerweise dann auch gleich als Variablen in Sass oder SCSS.

Das funktioniert soweit ganz gut – bis die Redakteure Farben verwenden wollen. Ich kann zwar über CSS definieren, dass z.B. ein <strong> die Farbe Rot haben soll, sobald es aber ein grüner fetter Text sein soll, wird es etwas komplizierter. In WordPress wird der TinyMCE-Editor verwendet. Über die zusätzliche Werkzeugleiste kann ich auch die Textfarbe ändern. Dort stehen 40 Farben zur Auswahl. Allerdings sind meine zuvor definierten Farben nicht dort zu finden. Das muss ich ändern.

Farben im WordPress Editor
Farben im WordPress Editor

Ich habe zwar einige Beispielscodes im Internet gefunden, diese funktionieren jedoch nicht, da sie sich nicht auf die tinyMCE Version 4.0 (wurde in WordPress 3.9 verwendet) beziehen. Nach ein wenig rumprobieren habe ich dann doch eine Lösung gefunden.

Die Farben im tinyMCE sind im Plugin Textcolor zu finden. Sie lassen sich aber auch überschreiben. Die entsprechende Editor-Einstellung dazu heißt „textcolor_map“. Diese muss also nur noch über einen WordPress-Hook gesetzt werden. Hier ein Beispiel für die functions.php im Theme:

function spitzohr_change_mce_colors( $settings ) {
	$settings['textcolor_map'] = '["009933", "Green","ff0000", "Red"]';
	return $settings;
}
add_filter('tiny_mce_before_init', 'spitzohr_change_mce_colors');

Über den Filter tiny_mce_before_init kann ich die Editor-Settings verändern. Bei $settings handelt es sich um ein Array. Ich füge oder überschreibe einfach die Eigenschaft „textcolor_map“ mit meinen Werten. Bei den Werten handelt es sich um ein JavaScript-Array, welches ich als String übergebe. Im JavaScript-Array werden pro Farbe immer zwei Werte eingetragen: der Farbcode (ohne #) und der Name (für den Tooltip).

Nur meine eigenen Farben
Nur meine eigenen Farben

Somit kann ich nun auch die Farben in meinem Editor steuern und die Seite bleibt weiterhin harmonisch.

Neben dieser einfachen Methode die für eigene Themes gut geeignet ist, gibt es natürlich noch zahlreiche Plugins um den eingebauten Editor zu erweitern. Ich persönlich bevorzuge den schlanken Standard-Editor und ergänze ihn bei Bedarf einfach um weitere Funktionen.

P.S. Wer eine ältere WordPress-Version (also vor 3.9) einsetzt, der kann hier nachlesen, wie sich die Farben ändern lassen. Ich empfehle jedoch immer auf die aktuelle Version zu gehen bzw. eine Version zu verwenden, für die es noch Sicherheitsupdates gibt. Welche Versionen noch unterstützt werden, könnt ihr bei Wikipedia nachschauen.


Kommentare

7 Antworten zu „WordPress: Farben im Editor“

  1. Hi Florian,

    danke für deinen Beitrag.

    Ich möchte mein tinyMCE Farbfeld auch gerne anpassen.
    Leider klappt es mit dem Überschreiben nicht, und die Einträge im Plugin finde ich auch nicht.

    Kannst du mir helfen?

    Beste Grüße

  2. Hallo Lars,

    ich habe dir meinen Code als Plugin per E-Mail geschickt. Damit müsste es gehen. Dort einfach die Farbliste anpassen.

    Falls es nicht klappt, kann dies meiner Meinung nach nur zwei Ursachen haben:
    – Ein Plugin (oder Funktionen im Theme) überschreibt die Farben nochmal
    – Es handelt sich um eine WordPress Version 3.8 oder älter (in 3.9 wurde auf tinyMCE 4.0 umgestellt, wodurch sich auch die textcolor_map geändert hatte)

    Viel Erfolg und schöne Grüße,
    Florian

  3. Hallo Lars,
    vielen Dank für diesen Beitrag. Er hat mich dazu inspiriert, meine Farbcodes direkt in den Dateien
    ../wp-includes/js/tinymce/plugins/textcolor/plugin.js

    ../wp-includes/js/tinymce/plugins/textcolor/plugin.min.js

    einzutragen, indem ich vorhandene Farben einfach ersetzt habe. Das erschien mir einfacher und hat den Vorteil, dass die Palette im Übrigen bestehen bleibt.

    Viele Grüße, Marco

    1. @Marco: Danke für den Kommentar!

  4. Hallo Florian,

    ich würde auch gerne die Farben anpassen, jedoch klappt es bei mir ebenfalls nicht mit dem Überschreiben.
    Könntest du mir bitte auch den Code als Plugin schicken?
    Vielen Dank für deine Mühe und Beste Grüße, Günter

  5. Hallo Flo,

    irgendwie hakt es auch bei mir… Der Text muss in die functions.php des Themes (/wp-content/themes/%theme%/functions.php) richtig? Sonst nichts weiter?

  6. Danke für diesen Beitrag.

    ich musste zusätzlich noch folgende Zeile einfügen, damit es funktioniert:
    $settings[‚plugins‘] = „textcolor“;