WordPress 2.5 und ein userabhängiges Admindesign

Die neue Version bringt viele Neuerungen und Veränderungen. Dazu zählt unter anderem das Design und die Strukturierung des Backends. Auf die Funktion des Farbwählers zum Profil geht Olaf in wenigen Sätzen ein und beschreibt im übrigen weitere Neuerungen der Version 2.5. WordPress lagert die Farbwahl gleich ich eine Funktion aus und spendiert einen Hook, so dass man via Plugin oder functions.php im Theme einfach auf diese Farbwahl eingehen kann. Damit kann man das komplette Backend, nicht nur die Farben, in ein anderes Design tauschen, userabhängig und einfach per Klick. Im folgenden zeige ich wie man das macht. Dazu stelle mal exemplarisch zwei Farbschemas zur Verfügung. Ein Farbschema habe ich der Seite von Gerrit van Aaken entnommen, der sich mit seiner klarem Design sehr gut dafür geeignet hat. WP 2.5 User-Farbwähler Diese Möglichkeit bietet sich vor allem dafür an, wenn das Backend dem Frontend in Farbwahl angepasst werden soll, was ich nicht für übertrieben halte. Gerade im Businessbereich kommt es kompletter und schick rüber, wenn das backend des CMS den Farben des Unternehmens angepasst ist. Warum auch immer - es ist ein jedem Fall möglich.

Tipp:

Dieser Artikel ist Teil einer kleinen Serie, die zeigen soll, dass WordPress an Flexibilität gewinnt und dass man Backend, Frontend und Login gestallten kann.

Die neue Version bringt viele Neuerungen und Veränderungen. Dazu zählt unter anderem das Design und die Strukturierung des Backends. Auf die Funktion des Farbwählers zum Profil geht Olaf in wenigen Sätzen ein und beschreibt im übrigen weitere Neuerungen der Version 2.5.
WordPress lagert die Farbwahl gleich ich eine Funktion aus und spendiert einen Hook, so dass man via Plugin oder functions.php im Theme einfach auf diese Farbwahl eingehen kann. Damit kann man das komplette Backend, nicht nur die Farben, in ein anderes Design tauschen, userabhängig und einfach per Klick.

Im folgenden zeige ich wie man das macht. Dazu stelle mal exemplarisch zwei Farbschemas zur Verfügung. Ein Farbschema habe ich der Seite von Gerrit van Aaken entnommen, der sich mit seiner klarem Design sehr gut dafür geeignet hat.

WP 2.5 User-Farbwähler

Diese Möglichkeit bietet sich vor allem dafür an, wenn das Backend dem Frontend in Farbwahl angepasst werden soll, was ich nicht für übertrieben halte. Gerade im Businessbereich kommt es kompletter und schick rüber, wenn das backend des CMS den Farben des Unternehmens angepasst ist. Aus welchem Grund auch immer man das Backend an die eigenen Bedürfnisse an passen will - es ist ein jedem Fall möglich und nun auch auf den einzelnen User konfigurierbar.

Die Funktion

Seit der Version 2.5 von WordPress gibt es nun also die Funktion wp_admin_css_color, zu finden in der wp-includes/general-template.php. Mit dieser Funktion kann man vier (4) Parameter übergeben, wobei der letztere ein Array ist.


wp_admin_css_color($key, $name, $url, $colors = array())

Die Parameter sind in ihren Namen schon recht aussagefähig, trotzdem nun nochmal die Erläuterung.

  • $key = Schlüssel, ID
  • $name = Name des Farbschemas, zur Darstellung im Admin
  • $url = URL zum Stylesheet (.css)
  • $colors = Farben, in einem Array übergeben

Mit diesem Wissen kann man dann die Funktion bestücken und die Werte übergeben. Im folgenden ein Beispiel.
Dabei wird die ID praegnanz, der Name Praegnanz.de vergeben. Die Funktion __() sorgt dafür, dass der Name der Mehrsprachigkeit zugeordnet werden kann und gegebenenfalls übersetzt werden kann.
Im weiteren kommt die Adresse zum Stylesheet praegnanz.css, wobei ich den Pfad mittels einer Variable übergebe, die sich aus Optionen und Konstanten von WordPress ergibt.
Danach kommt ein Array mit vier Farbwerten, welches das Design darstellen soll und so leichter zuordnen lässt. Dabei kann man hier natürlich mehr als vier Werte übergeben und alle bekannten Syntax von CSS nutzen. Im Download-Beispiel habe ich dazu mehr hinterlegt.


$css_url = get_option( 'siteurl' ) . '/' . PLUGINDIR . '/' . plugin_basename( dirname(__FILE__) );

wp_admin_css_color (
	'praegnanz', __('Praegnanz.de'), $css_url . '/praegnanz.css',
	array (
		'#000', // color 1
		'#fff', // color 2
		'#009900', // color 3
		'#ccc' // color 4
	)
);

Ein Beispiel als Plugin

Im folgendem soll in einem Beispiel die Funktionalität zum Nachahmen einladen. Das Plugin steht zum Download bereit und kann gern genutzt werden. Die Stylesheets sind nur rudimentär bestückt und es ist Vorsicht geboten, es könnte in den Augen schmerzen.

Das Plugin ist einfach und übersichtlich, sollte also keine großen Schwierigkeiten darstellen. Ich habe exemplarisch zwei Designs hinterlegt und verschieden Möglichkeiten integriert.
Die jeweiligen Stylesheets, die das eigentliche Design laden, sind im Plugin-Verzeichnis hinterlegt, wobei der Pfad in der Variable $css_url übergeben wird. Diese kann natürlich ebenso im Theme liegen und somit ist es recht einfach das Design des Backends an das Frontend anzulehnen.

Tipp

Um die IDs und class zu bekommen, die WordPress nutzt, empfiehlt es sich die Erweiterungen Web Developer oder Firebug für Firefox einzusetzen.

Alternativ kann man natürlich das komplette Design umgestallten und als Vorlage die bestehenden beiden Design nutzen.

  1. wp-admin/css/colors-classic.css
  2. wp-admin/css/colors-fresh.css

Das Classis-Farbschema lade ich im übrigen in den jeweiligen Stylesheets, da ich nur wenige Veränderungen vornehme.


@import url(../../../wp-admin/css/colors-classic.css);

Nun aber der Syntax des Plugins. Nach der Aktivierung des Plugin stehen die beiden neuen Farbschemen im User-Edit-Bereich zur Verfügung.

WP 2.5 Admindesign verändert

Mit aktivem Style „Praegnanz.de“ sieht es dann wie im obigen Screenshot aus.


<?php
/*
Plugin Name: Custom Admin Design
Plugin URI: https://bueltge.de/
Description: Test: Admin Design at WP 2.5
Author: Frank Bueltge
Version: 0.1
Author URI: https://bueltge.de/
*/

function fb_custom_admin_design() {
	
	// url to stylesheet
	$css_url = get_option( 'siteurl' ) . '/' . PLUGINDIR . '/' . plugin_basename( dirname(__FILE__) );
	
	// Example Design for test
	wp_admin_css_color (
		'custom', __('Custom Test'), $css_url . '/custom_test.css',
		array (
			'#0d324f',
			'#e5f3ff',
			'#910005',
			'#fff; border-color: #333; background: #fff url(' . $css_url . '/fb.jpg) 1px 1px no-repeat',
			'#333'
		)
	);

	// Example Design for Praegnanz.de
	wp_admin_css_color (
		'praegnanz', __('Praegnanz.de'), $css_url . '/praegnanz.css',
		array (
			'#000',
			'#fff',
			'#009900',
			'#ccc'
		)
	);
	
}

// WP-Hook for activation the style in user-edit 
add_action('admin_init', 'fb_custom_admin_design');
?>

Ähnlich kann das ganze aussehen, wenn man es in die functions.php des Themes hinterlegt und so ohne ein Plugin auskommt, welches in der Plugin-Liste auftaucht. Wie auch immer, dass überlasse ich euch und eurer Phantasie. Viel Spaß beim Rundumpaket, wenn es um das Designen von WordPress-Themes geht.

Somit steht ab WordPress Version 2.5 dem kundenorientiertem Design nichts mehr im Wege. Die Anpassung von Frontend, Backend und Login-Bereich sind möglich. Der Login-Bereich konnte auch schon in älteren Versionen angesprochen werden; allerdings hat sich in diesem Punkt einiges geändert. Daher werde ich eventuell in einem der nächsten Artikel darauf eingehen, so dass dann alle drei Themen kurz erläutert werden und das Designpaket rundum perfekt werden kann.

Download:










Ist die Arbeit nicht 1 Euro wert?
Jede Spende wird dankbar angenommen und ermöglicht das weitere Arbeiten an freier Software.
Möchtest du mehr oder anders spenden, so besuche meine Wunschliste.

Download als zip-Datei: custom_admin_design.zip - 2 kByte

 

Update

Das erste Plugin mit dieser Funktion ist da und gibt dem Backend die gewohnte Farbgebung: JP Admin - Stylish Blue.

Erstelle und Tausche dein Design

Das Zusammenstellen der Farben und den passenden Download kann mit dem AdminThemes erstellen. Sehr einfach in der Bedienung und viele Vorschläge stehen zum Download bereit. Eine Vorschau macht die Arbeit und Kreation zum Kinderspiel.

23 Comments

  1. Hallo Frank,

    wieder mal ein klasse Artikel in verständlicher sprache.
    Ich werd noch ein wenig warten mit dem Spielen an WordPress 2.5... erst wenn die Version aus dem RC herrauss ist, werd ich micht damit genauer beschäftigen.

    Die Sache mit der Backend Anpassung find ich klasse und werd dies auch sicherlich tun... ich denke aber eher über die functions.php als über ein Plugin...

  2. Ja stimmt wohl... mittels Plugin ist das spielen und experimentieren sicher einfacher und sicher auch sinnvoller als das direkt im Theme mit einzubinden...

    Ich denke aber im laufenden Einsatz und vorallen bei Kunden Projekten ist es dann unter anderen vll. Sinnvoller die Funktion mit in den Theme einzubinden...

  3. Ich habe das Plugin mal installiert, aber scheinbar Funktioniert es nicht. Normalerweise müsste es wie in dem Screenshot unter "mein Profil" einstellbar sein?

  4. "Warum auch immer - es ist ein jedem Fall möglich."
    für mich ergibt dieser Satz keinen Sinn...
    dennoch, sehr guter Beitrag,Daumen hoch 🙂

  5. Plugin eingebaut, aktiviert, geht. Sehr fein!
    Dein Custom-Test-CSS etwas abgewandelt und ergänzt, und schon hatte ich ein Schema, das in etwa, ganz grob, meinem Blog-Theme entspricht.

    Das wollte ich dann doch etwas perfekter machen und wirklich ein stimmiges Farbschema aufbauen. Dazu erschien es mir sinnvoll, das in deinem Custom-CSS eingebundene originale Classic-Schema zur Grundlage zu nehmen.

    Dazu holt man sich ja gewöhnlich die verwendeten Farben per Pipette ins Grafikprogramm, extrahiert also Schritt für Schritt das Farbschema, um im nächsten Schritt mit Ton für Ton passenden und entsprechenden Farben das neue Schema aufzubauen.

    Bei einem überlegt konzipierten Farbschema ist das gar kein Problem ...

    Also nahm ich mir das Classic-Schema vor ... und habe bei knapp dreißig (30!) Farben und mehr als fünfzehn Grautönen aufgehört zu zählen und aufgegeben.

    Erkenntnis? Das ganze originale WP-Classic-Farbschema ist ein schier undurchdringlicher und wirrer Wust an Farben, der nur auf völlig mangelhafte Farbabstimmung bei der Entwicklung schließen lässt. Unmöglich.

    Das erinnert mich an das wild zusammen gehauene Original-Stylesheet des "Kubrick"-Themes.

    Jetzt schaue ich mir mal das neue "Fresh"-Farbschema an ... bekanntlich stirbt ja die Hoffnung zuletzt.

Comments are closed.