Die normale, von WordPress vorgesehene Login-Seite ins Backend eines Blogs ist weder besonders schön, noch besonders individuell. Man erreicht sie in der Regel, indem man /wp-login.php an die eingegebene URL anhängt. Sie erfüllt ihren Zweck, aber sie sieht standardmäßig bei jedem Blog gleich aus. Es gibt aber Gründe, aus denen man diese Seite vielleicht individualisieren möchte. Das kann man auf verschiedene Arten tun. Es gibt einige Plugins dafür, aber man kann die Login-Seite auch direkt über sein Theme verändern. Wie das funktioniert, erkläre ich heute.
Insgesamt benötigen wir folgende Schritte:
- Vorbereitung
- Der Hintergrund
- Das Logo ersetzen
- Die Message- und Error-Box
- Das Formular
- Die untere Navigation
Vorbereitung
Als erstes müssen wir dafür sorgen, dass das, was wir verändern, auch in den <head>-Bereich der Login-Seite geladen wird. Dazu gehen wir in unseren Theme-Ordner und öffnen die Datei functions.php. Dort fügen wir folgende Funktion hinzu:
function custom_login() {
echo '<link rel="stylesheet" type="text/css" href="'.get_stylesheet_directory_uri().'/login/login.css" />';
}
add_action('login_head', 'custom_login');
Diese Funktion fügt auf der Login-Seite eine CSS-Datei mit dem Namen login.css hinzu. Sie liegt im Unterordner login des aktuellen Themeordners – oder besser gesagt: sie muss dahin. Es gibt diese Datei nämlich noch nicht. Deshalb müssen wir sie nun erstellen. Noch mal der Pfad: /wp-content/themes/THEMEORDNER/login/login.css (“THEMEORDNER” ist natürlich durch den Namen des Themeordners zu ersetzen).
Die gerade erstellte login.css öffnen wir jetzt mit einem Text-Editor und führen die gewünschten Änderungen durch. Zuerst müssen wir uns klar machen, dass hier ein bereits vorhandenes Stylesheet überschrieben wird. Das bedeutet, dass wir nicht einfach nur das, was wir gerne hätten, hinzufügen können, sondern das, was schon da ist und was wir nicht brauchen, mindestens deaktivieren müssen. Es empfiehlt sich die Webkonsole von Chrome oder Firefox zu verwenden, um den Aufbau des Formulars im Detail besser nachvollziehen zu können. Ich werde im folgenden versuchen, das wichtigste zusammenzutragen:
Der Hintergrund
Abgesehen vom Hintergrund müssen diese Bestandteile der Login-Seite überschrieben werden. Als erstes kümmern wir uns um den Hintergrund. Um diesen zu verändern, brauchen wir folgenden Code:
body.login {
background: #333333;
}
Statt der Hintergrundfarbe kann natürlich auch ein Bild eingefügt werden.
Das Logo
Bevor wir damit anfangen, kehren wir noch einmal zur functions.php zurück. Standardmäßig ist das Logo nämlich ein Link zu http://wordpress.org. Auch diesen können wir überschreiben. Dazu benötigen wir folgende Funktion:
add_filter( 'login_headerurl', 'custom_login_header_url' );
function custom_login_header_url($url) {
return 'https://susanne-lueders.de/';
}
Wenn wir schon mal dabei sind, können wir den Inhalt des title-Attributs auch direkt verändern. Dieses steht ursprünglich auf “Powered by WordPress”, was dann als Fähnchen an der Maus angezeigt wird, wenn man sie über dem Link stehen lässt. Das ändern wir so:
add_filter('login_headertitle', 'custom_login_header_title');
function custom_login_header_title($title) {
return 'Susanne Lüders';
}
Vorausgesetzt, dass wir im weiteren Verlauf nicht noch Schriftarten über die functions.php in den head-Bereich der Login-Seite importieren wollen, können wir sie jetzt endgültig schließen.
Weiter geht’s in der login.css mit dem Austausch des Logos:
Für das Logo ist wichtig, alle erwähnten Befehle im CSS verwendet werden, weil die Informationen des WordPress-Logos sonst nicht korrekt überschrieben werden:
.login h1 a {
background-image: url('../images/logo.png');
background-size: 320px 71px;
width: 320px;
height: 71px;
}
Die Message- und Error-Box
Die Message-Box ist im Bild zu sehen. Sie zeigt an, wenn ein User sich erfolgreich abgemeldet hat. An gleicher Stelle wird auch die Error-Box eingeblendet, die erscheint, wenn beim Login-Vorgang ein Fehler aufgetreten ist.
Wer die Farben der Message-Box ändern will, sollte sich diesen Code anpassen:
.login .message {
font-family: Arial, sans-serif;
background: #ffffe0;
border: #e6db55;
color: #00000;
}
An die Error-Box kommt man so:
.login #login_error {
/*...*/
}
Das Formular
Im Formular selber sind einige Einzelteile anzupassen. Allgemeine Einstellungen wie den Hintergrund des Formulars nimmt man an folgender Stelle vor:
.login form {
background: #af8655;
color: #333333;
border: none;
box-shadow: none;
-webkit-box-shadow: none;
}
Die anderen Details gehen wir mal von oben nach unten durch. Als erstes die Labels für die Input-Felder:
.login label {
/*...*/
}
Die input-Felder selbst:
.login input {
/*...*/
}
Die Erinnerungs-Checkbox:
.login .forgetmenot label {
/*...*/
}
Und zu guter Letzt kommt noch der Button. Hier ist vor allem background-image von großer Bedeutung. Darüber wird der Verlauf im Hintergrund des Buttons gebildet und der muss ersetzt oder ausgeschaltet werden, sonst bleibt der Button mindestens beim Überfahren mit der Maus hübsch blau.
.login input.button-primary {
font-family: 'OpenSansRegular', Arial, sans-serif;
text-transform: uppercase;
background: #ea5b0c;
background-image: none;
border:none;
border: #cebca5 solid 1px;
-webkit-box-shadow: none;
box-shadow: none;
/*...*/
}
.login input.button-primary:hover,
.login input.button-primary:focus {
background-image: none;
border:none;
text-shadow: #000000 1px 1px 1px;
-webkit-box-shadow: none;
box-shadow: none;
/*...*/
}
Der gestalterischen Freiheit sind hier keine Grenzen gesetzt.
Die untere Navigation
Jetzt bleiben nur noch die Links unterhalb des Login-Formulars übrig. Der Link “Passwort vergessen” ist ein div mit der id #nav und der Link zurück auf den Blog hört auf die id #backtoblog.
.login #nav,
.login #backtoblog {
/*...*/
}
Insgesamt lassen sich die Details sicherlich noch ausfeilen und verfeinern. Wie bereits erwähnt ist es bestimmt nicht verkehrt, in irgendeiner Form eine Webkonsole zu benutzen, um weitere Feinheiten der Login-Seite auszuloten.
Ein letzter Hinweis zum Thema Schriftarten: Die im Theme verwendeten Schriftarten werden nicht automatisch in die Login-Seite importiert und können folglich auch nicht verwendet werden. Man kann sie aber nach dem gleichen Prinzip wie dem vom Stylesheet login.css einbinden.
Am Ende könnte das Ganze zum Beispiel so aussehen:
Links zu den entscheidenden Stellen im WordPress-Codex:
http://codex.wordpress.org/Plugin_API/Filter_Reference#Database_Reads_4
http://codex.wordpress.org/Plugin_API/Action_Reference/login_head
Ein neuer beim Header-Title: Der ist ab der WP-Version 5.2. veraltet. Hier die Fehlermeldung:
Deprecated: login_headertitle ist seit Version 5.2.0 veraltet! Benutze stattdessen login_headertext. Die Verwendung des title-Attributs für das Login-Logo wird aus Gründen der Barrierefreiheit nicht empfohlen. Verwende stattdessen den Linktext. in C:\data\www\termine.local\wp-includes\functions.php on line 5148
Vielen Dank für das tolle Tutorial! Weißt du vielleicht, wie ich im Login Bereich noch weitere Links (zum Impressum) hinzufügen kann?
Danke!
Viele Grüße
Susanne
Ich weiß nicht genau, ob es da Plugins für gibt, die das können. Aber ohne fällt mir leider keine Möglichkeit ein. Tut mir leid.
Dein Tutorial ist ausführlich und für Deine Mühe herzlichen Dank.
Ammerdings muss ich AK bestätigen, ich erziele ebenfalls kein Ergebnis was auch immer ins css geschrieben wird (WP 4.8).
Kannst Du bitte ein Statement abgeben oder vielleicht den Artikel aktualisieren?
Dafür wären wir sehr dankbar.
Gruß aus der Pfalz
Rolf
Gruß
Mario