WordPress Login Screen umgestalten ohne Plugin

Hallo zusammen! Dieser Blogartikel richtet sich an alle die erfolgreich WordPress Seiten bauen und das Backend für andere Personen zugänglich machen.

Ich zeige euch einige Codezeilen und erkläre euch Schritt für Schritt wie ihr den Login Screen von WordPress umgestaltet: das Hintergrundbild tauscht, die Farben ändert und euer Logo einbaut, und alle ganz ohne Plugin. Dann auf geht’s!

#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 Ordnerstrucktur

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;
}