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.

Sonntag, den 27. April 2014 um 16:51

 

7 Reaktionen zu “WordPress: Farben im Editor”

  1. Lars hat am 22. August 2014 um 15:40 Uhr geschrieben:

    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. Florian hat am 22. August 2014 um 15:57 Uhr geschrieben:

    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. Marco hat am 30. Oktober 2014 um 16:33 Uhr geschrieben:

    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

  4. nano hat am 7. November 2015 um 08:06 Uhr geschrieben:

    @Marco: Danke für den Kommentar!

  5. Günter hat am 20. Januar 2015 um 13:20 Uhr geschrieben:

    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

  6. Carsten hat am 22. September 2015 um 22:40 Uhr geschrieben:

    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?

  7. Franz hat am 22. Dezember 2015 um 13:40 Uhr geschrieben:

    Danke für diesen Beitrag.

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