#1 Vorgehensweise
Ihr arbeitet bestimmt mit einem Child-Theme bzw. habt davon sicher schonmal gehört. Auch für die Umgestaltung des Backend-Logins empfiehlt sich ein solches zu haben. Ich werde bald einen Artikel schreiben und Euch erklären wie Ihr ein Child Theme anlegt, solltet Ihr noch keines eingerichtet haben.
Ich zeige euch wie ihr für das neue Login einen eigenen Ordner in eurem Child-Theme erstellt in dem alles Wichtige enthalten ist. Somit könnt ihr relativ einfach die umgestaltete Login Seite auf andere WordPress Installationen übertragen.
#2 Ordnerstruktur
Loggt euch über FTP oder das Webinterface eures Hosters auf euren Server bzw. auf die WordPress Installation ein, die ihr umstylen wollt. In meinem Beispiel arbeite ich im Child-Theme Ordner des BeThemes für meine eigene Seite. Wenn ihr kein Child-Theme habt könnt ihr natürlich die nächsten Schritte im normalen Theme Ordner durchführen. Ich würde euch aber ein Child-Theme zu Herzen legen.
Der Ordnerpfad sieht in meinem Beispiel dann so aus: „/wp-content/themes/betheme-child“
Erstellt dort dann einen Ordner mit dem Namen „login“.
Klickt euch in den neuen Ordner und erstellt dort dann einen mit dem Namen „images“.
#3 Dateien vorbereiten
Um das Backend-Login schön zu gestalten habe ich mir die Lumelab CI Farben rausgesucht sowie das Logo und einen Hintergrund. Das Logo könnt ihr von der Größe beliebig nehmen und im CSS dann später anpassen. Ich habe eine .svg Datei unseres Logos verwendet. Das Hintergrundbild sollte am besten 1920 x 1080 Pixel haben, um auf allen Geräten schön dargestellt zu werden.
Speichert beide Dateien in den vorher erstellen „images“ Ordner und merkt euch die Dateinamen.
Erstellt noch im „login“ Ordner eine neue CSS Datei und merkt euch den Namen. In meinem Beispiel heißt diese Datei „login-style.css“.
#4 Verknüpfung zur neuen Style-Datei
Damit die Änderungen die wir im nächsten Schritt im „login-style.css“ vornehmen, auch angezeigt werden, müssen wir WordPress noch bescheid geben wo die Datei zu finden ist. Hierfür brauchen wir die „functions.php“ die entweder im Child-Theme oder im Parent-Theme liegt.
Öffnet nun die „functions.php“ und ergänzt folgendes Code Snippet:
function personal_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/login/login-style.css" />';
}
add_action('login_head', 'personal_login');
Achtung: Beachtet hier, dass ihr den richtigen Dateipfad und den richtigen Dateinamen eurer CSS Datei angebt. In meinem Beispiel sieht der Pfad so aus: „/login/login-style.css“
#5 Das Stylen kann beginnen
Nach erfolgreichen verknüpfen zur richtigen CSS Datei können wir diese nun öffnen und zu stylen beginnen.
Ich zeige euch hier die wichtigsten Änderungen die ich auch in dem Beispiel vorgenommen habe. Natürlich sind hier keine Grenzen gesetzt und Ihr könnt im CSS herumspielen und alles so nach euren Wünschen abändern, dass es für Euch am Ende passt. Aber gut, fangen wir mit den wichtigsten Sachen an:
#6 Die wichtigsten CSS Stile
Grundsätzlich ist noch zu beachten dass bei einigen CSS Werten das „!important;“ dabeisteht. Löscht es nicht raus, da sonst passieren kann, dass Eure Änderungen nicht vorgenommen werden.
Logo
Mit dem folgenden Snippet könnt ihr das WordPress Logo gegen euer eigenes tauschen.
Wichtig ist hier wieder der korrekte Dateipfad zum vorher abgespeicherten Logo. Spielt euch dann mit den Werten von „background-size“, „height“ und „width“ um die passende Größe Eures Logos zu finden.
/* -- Mein Login Logo -- */
.login h1 a {
background-image: url('../login/images/Lumelab.svg');
background-size: 300px !important;
height: 80px !important;
width: 300px !important;
}
Hintergund
Folgendes Snippet ändert den Hintergrund in ein Bild. Wie immer ist hier auch wieder der Link zum Bild wichtig. Sollte das Bild einmal nicht geladen werden können, solltet Ihr eine schöne CI Farbe hinter dem Bild laden lassen. Das könnt ihr über „background-color“ machen. Fügt einfach euren Farbcode ein.
/* -- Mein Hintergrund -- */
body.login {
background-color: #40c0e6;
background-image: url('../login/images/WordPress-Agentur-Lumelab.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
Runde Ecken und Schatten
Wollt ihr auch abgerundete Ecken für das kleine Login Fenster dann nutzt folgenden Code.
Ich habe zusätzlich noch einen Schatten hinzugefügt der das ganze Fenster noch plastischer wirken lässt.
/* -- runde Ecken -- */
#loginform {
border-radius:10px;
box-shadow: 0 0 12px #767676;
}
Login Button
Wollt ihr noch die Farbe des Login Buttons ändern, dann nutzt folgendes Snippet und tauscht die Farbe.
/* -- Login Button -- */
.wp-core-ui .button-primary {
background: #478ac6;
}
Passwort vergessen Button
Um den Passwort vergessen Link wie einen Button aussehen zu lassen nutzt folgendes Snippet.
Natürlich hat der Button auch einen Hover Effekt. Tauscht einfach die Farbcodes zu den von Euch gewünschten Farben aus.
/* -- Passwort vergessen -- */
#nav {
margin-bottom: 2em !important;
}
#nav a {
background-color: #478ac6;
border-radius: 3px;
color: #fff !important;
padding: 10px 15px;
}
#nav a:hover {
background-color: #68b337;
}
Zurück zum Blog Button
Selbiges wie beim oberen Link, einfach die Farbcodes austauschen.
/* -- Zurück zum Blog -- */
#backtoblog a {
background-color: #478ac6;
border-radius: 3px;
color: #fff !important;
padding: 10px 15px;
}
#backtoblog a:hover {
background-color: #68b337;
}
#7 Schlusswort
Wenn man weiß wie es geht, dann ist es relativ einfach den Login Screen schön zu gestalten bzw. zu „Branden“, und das sogar ohne Plugin. Ich hoffe ich habe alles verständlich erklärt und ihr könnt alles so einfach umsetzen. Solltet Ihr Fragen haben, schreibt mir gern ein Email oder nutzt die Kommentarfunktion des Blogartikels. Ich freue mich auch wenn Ihr den Artikel auf Facebook teilt, sollte er euch geholfen haben.
– Stefan
p.s.: Hier seht Ihr den personalisierten Login Screen von Lumelab.
#8 Update
Kleiner Nachtrag: Ich habe den Loginscreen für eine Website benutzt bei der die URL relativ lange ist. Dabei ist passiert, dass der „Zurück zum Blog“ Button leider umbricht, und das sieht dämlich aus.
Ihr könnt diesen Fehler vermeiden, in dem Ihr die gesamte Login Box einfach breiter macht. Nutzt einfach folgendes Code Snippet und ändert den Pixel-Wert so ab, dass der Button in einer Zeile angezeigt wird.
/* Login Fenst breiter */
#login {
width: 390px;
}
#9 Update 2
Eine weiter Ergänzung zum Artikel: Um das neu hinzugefügte Logo auch auf die korrekte Website zu verlinken benötigt ihr im Child Theme die „functions.php“ Datei.
Fügt folgendes Code Snippet am Ende der PHP-Datei ein und ändert den Link auf die gewünschte Seite um. Voilà!
add_filter( 'login_headerurl', 'my_custom_login_url' );
function my_custom_login_url($url) {
return 'https://www.lumelab.at';
}
2 Kommentare zu „WordPress Login Screen umgestalten ohne Plugin“
Super Anleitung, vielen Dank.
Allerdings leitet das Logo (nun das unsrige) auf die WordPress Seite um- Es soll ja auf unsere Startseite umleiten. Kannst Du das noch ergänzen in Deiner Anleitung, wie das Logo auf die eigene Seite umleitet?
Vielen Dank.
Vielen Dank für deinen netten Kommentar. Freut mich, dass ich helfen konnte.
Ich habe die Info bzgl. Verlinkung mittlerweile auch hinzugefügt.
Schöne Grüße
Stefan