Wie so oft habe ich keine Ahnung wie ich darauf gestoßen bin. Vermutlich war es ein Artikel über „nützliche“ WordPress-Plugins. Jedenfalls fand ich das Plugin Admin Color Schemes, das eine nicht wirklich nützliche, aber für meinen Geschmack coole Funktion hat. Sie fügt den bestehenden acht Farbschemata in denen man in WordPress sein Dashboard einstellen kann weitere acht hinzu, die gar nicht mal schlecht aussehen. Und wie so oft, wusste ich in dem Moment in dem ich es SAH erst, dass ich es WILL. 🙂 Problem: das Plugin (und alle dutzend weiteren Plugins, die etwas ähnliches tun) ist seit einigen WordPress-Versionen nicht mehr aktualisiert oder getestet worden. De facto stand sogar im Support-Forum der Plugin-Autoren, dass es bereits in WordPress 4.6 Probleme gab. Und da wir aktuell bei 4.9.8 sind, standen die Chancen nicht so gut, dass sich daran auf magische Weise etwas geändert hat. Da sprang mein Ehrgeiz als Softwareentwicklerin an und ich dachte – pff, mach ich’s eben selber.

„An wen richtet sich der Artikel?“ Und: „Ich weiß nicht wovon du redest, welche Farbschemata???“

Wie immer die wichtigsten Fragen zuerst. Man kann in WordPress (ich glaube seit Version 3.8?) in der Administrationsoberfläche unter dem Menüpunkt Benutzer und dann Dein Profil Farbpaletten auswählen, in denen das Dashboard angezeigt wird. Die Farbpaletten haben so klingende Namen wie Mitternacht, Ektoplasma, Sonnenaufgang und äh, Hell und sind eine schöne Möglichkeit sich WordPress benutzerdefiniert zu gestalten.

Wenn man dem Ganzen jetzt handgemacht einen eigenen Anstrich verpassen will, dann kann man auf Plugins zurückgreifen – leider habe ich keins gefunden, das noch gewartet wird, keine gemeldeten Bugs hat und das mir erlaubt benutzerdefinierte Farbpaletten/Farbschemata anzulegen. Wer also dieses kleine How-To anwenden möchte, sollte ein selbst-gehostetes WordPress verwalten. (Getestet wurde dieses How-To mit der WordPress-Version 4.9.8.) Für wordpress.com-User kenne ich leider keine Möglichkeit. Man muss um dem Tutorial folgen zu können nicht wirklich des Programmierens mächtig sein. Aber eine gewisse Intuition in IT ist hilfreich. Voraussetzung ist, dass man sich mit einem FTP-Client auf seinen Server verbinden und auf die Files seiner WordPress-Installation händisch zugreifen kann.

1. Backup machen

Man sollte bevor wir richtig anfangen unbedingt ein Backup machen. Hier geht es weniger um die Beiträge, Kommentare etc – alles was in der Datenbank liegt, fassen wir nicht an. Sondern um die Verzeichnisstruktur und Files eures WordPress auf dem Server. Es reicht daher schon aus, sich mit einem FTP-Client eine lokale Kopie der Verzeichnisse zu ziehen. Genauer gesagt reicht die Datei functions.php im Verzeichnis wp-content\themes\name-deines-wordpress-theme. Normalerweise heiße ich es nicht gut in WordPress händisch rumzupfuschen, wenn man nicht weiß was man tut. Aber in diesem Fall sind die Änderungen einfach zurückzurollen und zielen auf keine sicherheitskritischen Bereiche.

2. Farbpaletten anlegen

Als erstes legen wir uns in das Verzeichnis wp-content\themes\name-deines-wordpress-theme per FTP-Client einen neuen Ordner custom-colors (oder welcher Name euch besser gefällt) um alle unsere benutzerdefinierten Paletten dort zu sammeln. Für jede Farbpalette, die später auswählbar sein soll, legen wir einen Ordner mit dem gewünschten Namen der Farbpalette an. Hier im Beispiel ist der Name fancySchemaName. Jedes Schema brauch ein funktionierendes CSS. Das denken wir uns nicht aus, sondern nehmen einfach bestehende aus WordPress. Die vordefinierten Farbschemata findet man im Verzeichnis wp-admin\css\colors jeweils in einem eigenen Ordner. Wir kopieren einfach die color.min.css beispielsweise aus dem Ordner einer der Farbschemata wie coffee (wp-admin\css\colors\coffee) und fügen sie in alle unsere benutzerdefinierten Farbschema-Ordner (bspw. wp-content\themes\name-deines-wordpress-theme\custom-colors\fancySchemaName).

3. Farbcodes ersetzen

Das CSS was wir gerade kopiert haben, enthält natürlich die Farben des Schemas aus dem wir gerade kopiert haben. Da müssen jetzt unsere benutzerdefinierten Farben rein. Im Wesentlichen gibt es dafür vier Farbwerte. Am Beispiel des Farbschematas coffee (was wir gerade kopiert haben) sind das die folgenden:

#46403c – Submenüs
#59524c – Admin-UI Hauptmenü
#c7a589 – Buttons, aktuelles Menü, Links
#9ea476 – Highlights wie die Anzeige der ausstehenden Kommentare, Aktualisierungen etc.

Je nachdem, was ihr euch hier an Farben wünscht, nehmt ihr einfach einen Texteditor eurer Wahl (ich empfehle immer Notepad++) und sucht und ersetzt die Codes mit euren gewünschten. Achtet darauf, dass es keine zu grellen Farben sind und dass der Kontrast gut ist, sonst wird es auf die Dauer sehr anstrengend für die Augen. Nicht vergessen die CSS-Dateien per FTP-Client hochzuladen.

4. Farbpaletten laden

Zu guter letzt müssen wir noch dafür sorgen, dass diese CSS und Farbschemata auch in dem Admin-Bereich als auswählbar angezeigt werden. Dazu fügen wir ein Code Snippet der functions.php in wp-content\themes\name-deines-wordpress-theme hinzu. Am besten einfach an das Ende des Files stellen um Konflikte zu vermeiden. Ihr könnt auf die functions.php entweder im Code-Editor eurer WordPress-Admin-Oberfläche zugreifen oder eben runterladen, bearbeiten und per FTP-Client in den Zielordner hochladen.


function add_custom_colors() {
$directory = get_template_directory_uri();
wp_admin_css_color( 'fancySchemaName', __( 'FancySchemaName' ),
$directory . '/custom-colors/fancySchemaName/colors.min.css',
array( '#46403c', '#59524c', '#c7a589', '#9ea476' )
);
}
add_action('admin_init', 'add_custom_colors');

Die neue Funktion add_custom_colors wird per einer Art Hook an admin_init gehangen und zur Initialisierung der Admin-Sicht von WordPress ausgeführt. Unser Snippet ruft die WordPress-Standard-Funktion wp_admin_css_color auf, die der entsprechenden Admin-Seite automatisch eine Farbpalette hinzufügt. Als Übergabeparameter brauch sie einen Key (fancySchemaName), den Namen der im Adminbereich angezeigt werden soll (FancySchemaName), den Pfad zur CSS und das Farbarray, das im Adminbereich angezeigt werden soll. Im Beispiel habe ich die von coffee stehen lassen, hier müssen aber die benutzerdefinierten rein.

5. Refresh …

Wenn alles am Bestimmungsort ist, müsst ihr eigentlich nur noch F5 drücken und dann solltet ihr die ergänzten Farbpaletten (FancySchemaName) in euer Admin-Oberfläche sehen und könnt jetzt eure benutzerdefinierten Paletten in ganzer Pracht bewundern. Das sieht dann ungefähr so aus, wenn man sich austobt und ein paar mehr hinzugefügt hat:

Mir haben die Paletten des Plugins Admin Color Schemes (z.B. Flat, Vinyard) so gut gefallen, dass ich einige übernommen habe. Ein paar eigene sind auch dabei. 🙂

Troubleshooting. Und: das böse Kleingedruckte

Falls ihr irgendwelche Probleme feststellt, tauscht einfach wieder die functions.php eures Themes mit der Sicherheitskopie ohne eure Änderungen aus, refresh und fertig. Die Ordner mit den CSS-Dateien spielen im Grunde keine Rolle. Falls ihr bei der Auswahl der Farbpaletten im Dashboard immer die falsche Palette eingestellt bekommt, dann stimmt in euren Änderungen in der functions.php der Pfad zur CSS-Datei nicht oder ihr habt die Farbcodes in der entsprechenden CSS-Datei nicht angepasst. Manchmal hilft auch ein weiterer Refresh oder den Cache zu löschen.

Ach ja … der eine oder andere unter euch, der gut aufgepasst hat, fragt sich jetzt vielleicht, ob es so sinnvoll ist das ganze in der functions.php des Themes zu machen. Sagen wir es mal so: ich kenne im Core-Wordpress einfach keinen anderen Einstiegspunkt und ich bin kein PHP-Profi. Themes sehe ich aber als relativ unkritisch an und jedes Theme hat eine solche functions.php als Einstiegspunkt. Dadurch entsteht natürlich (wie generell beim manuellen Editieren von Files in WordPress) der unschöne Effekt, dass eure Änderungen weg sind, sobald ihr euer Theme aktualisiert. (Nehme ich mal ganz stark an, hatte noch keine Gelegenheit es auszuprobieren.) Also macht am besten nach getaner Arbeit eine Sicherheitskopie des kleinen Mods. Alternativ kann man Plugins wie Code Snippets benutzen, um sich custom code snippets anzulegen und ausführen zu lassen. Bevor das funktioniert, müsste man aber evtl den Code oben noch anpassen.

Es gibt übrigens einige Anleitungen da draußen im www, die das ähnlich machen oder sogar besser machen, weil sie es nicht an das Theme binden. Die sind aber meistens leider unvollständig. Hilft euch das How-To weiter? Habt ihr es ausprobiert? Oder gar Tipps für mich, wie man das besser machen kann? Oder kennt ihr ein lauffähiges Plugin, das genau das tut und mit dem ich mir in Zukunft die Arbeit sparen kann Files von a nach b zu kopieren? XD Dann her damit 😉 In welchen Farbpaletten glänzt euer Dashboard gerade? BTW … während ich mich oben über die Anzeige des Code Snippets ärgere, kennt ihr ein gutes Plugin, das Code Snippets mit Zeileneinrückung, Syntax Highlighting und Zeilennummern anzeigen kann? 🙂

Netzgeflüster ist eine Kategorie meines Blogs in der ich mich immer zwischen dem 10. und 15. eines jedes Monats Themen rund um IT, Forschung, Netzwelt, Internet und eben auch Gerüchten widme. 🙂