Schweizer WordPress Magazin

Anleitungen

WordPress Login Gestaltung

Die normale Login Seite von WordPress sieht langweilig aus und vielleicht will man den Kunden-Websites einen gewissen Grad an Persönlichkeit geben. Um aber alle gestalterischen Aspekte auszuschöpfen, kann man mit einer eigenen CSS Datei und definierten Klassen und IDs den Style personalisieren. Ich zeige euch heute, wie das geht.

Ein Plugin und zwei Bilder für ein Halleluja

Binary Moon, ein erfolgreiches Blog aus Grossbritannien, veröffentlichte im letzten Jahr ein Plugin, genauer gesagt das Binary Moon Custom Login Plugin. Es erfüllt voll und ganz seinen Zweck, aber leider nur mit Hilfe zweier Bilder, die durch das aktive Plugin eingefügt werden. Die Lösungen weiter unten gehen da anders vor. Aber es ist vielversprechend:

Logo und Hintergrund manuell ändern (login.css)

Die bekannteste und wohl erste Lösung gibt es bei Just Creative Design, einem populären Blog von Jacob Cass. Die folgende Liste ist eine vereinfachte und übersetzte Anleitung von Jacob.

Das Logo ändern

1. Suche via FTP in Ihrem Admin-Ordner die Datei login.css, was dann etwa so aussieht: wp-admin/css/login.css. Öffne jetzt diese Datei
2. In der login.css Datei suche die Zeile:
   background: url(../images/logo-login.gif) no-repeat;
   ändere es um, damit dein Logo eingebunden wird: background: url(../images/DEINLOGO.gif) no-repeat;
   Das Logo sollte eine Breite von ca. 290 Pixel nicht überschreiten
3. Für fortgeschrittene Benutzer ist das die Datei, wo man auch sonst das Loginformular verändern kann. Man muss nur ein bisschen CSS können ;)

Die Farbe ändern (Hintergrund)

1. Öffne die colors-fresh.css Datei welche sich auch im wp-admin/css/ Ordner befindet.
2. Finden die ZWEI #eaf3fa Farbwerte in dieser CSS Datei und ersetze sie durch eine beliebige Farbe. Eine etwas ausgewaschene oder neutrale Farbe ist empfehlenswert. Du kannst es ja mal mit #EAEAEA (grau) als Farbe ausprobieren.
3. Höre noch nicht auf, du kannst deine Login-Seite so stark verändern wie du willst. Das oben war nur ein Beispiel.

Diese Anleitung ist für WordPress 2.5+ - ältere Versionen kommen hier auf ihre Kosten.

Mein Tipp: Eine ähnliche Anleitung gibt es bei Frank Bültge. Er bearbeitet darin eine PHP Datei, wodurch die Loginseite vom aktiven Theme abhängig ist und die Style-Angaben aus einer Datei im Theme-Ordner geholt werden.

Custom Admin Branding und Branded Admin

Ok, dieses Wortwirrwarr kann man nicht ganz entschlüsseln, doch so heissen zwei Plugins, die uns bei der Aufgabe Login Gestaltung behilflich sein wollen. Kommen wir zum ersten Plugin, Custom Admin Branding. Es ändert nicht nur die Loginseite sondern gleich die Gestaltung des Adminbereichs, genauer gesagt Kopf- & Fusszeile. Ausserdem funktioniert es auch genau gleich wie Frank Bültges Lösung, ändert aber auch den Adminbereich und ist vom Plugin und nicht vom Theme abhängig. Der Inhalt liest sich in etwa so:

• Color Scheme Stylesheet
• PSD Dateien
• Die Bilder, die mit Hilfe der PSD Dateien erstellt wurden

Kommen wir nun zum Branded Admin Plugin von Kerry Webster. Es modifiziert ganz einfach und ohne viele Anpassungen Kopf- & Fusszeile, jedoch nicht die Loginseite. Ausserdem entfernt es unnötige WordPress-Links die z.B. bei Kundenwebsites eher stören, da diese damit nichts anfangen können. Auf ein Bild verzichte ich hier, da es eigentlich genau so aussieht wie das obige Plugin auch.