WordPress 2.5 und ein userabhängiges Admindesign

Anzeige

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.

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.

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.

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

<?php
/*
Plugin Name: Custom Admin Design
Plugin URI: http://bueltge.de/
Description: Test: Admin Design at WP 2.5
Author: Frank Bueltge
Version: 0.1
Author URI: http://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.