Guru 2.0 › 3.0
Der Blog für alle die Spass am Web und Design haben…

WordPress anpassen

Manchmal will man im eigenen Blog nur ein wenig Renovierungsarbeiten erledigen. Oder man will sich bei der Anmeldung einfach zu Haus fühlen. Dann braucht man einfach das eigene Logo im Login-Fenster von WordPress.

Bei mir geht es sogar ein wenig weiter. Einerseits betreue ich doch einige Blogs und wenn ich schon beim Anmeldeschrim sehe auf welchem Blog ich mich befinde ist das einfach praktisch. Aber auch Kunden welche den Blog selbst betreuen, finden es einfach besser, wenn Sie ihr eigenes Anmeldefenster haben. Daher habe ich mir dazu einmal Gedanken gemacht.

Eigener Login-Screen für WordPress

Für einen eigenen Login-Screen brauchst Du zwei png-Dateien, welche Du im aktiven Thema im Unterverzeichnis images/ ablegst. Die erste ist für das Logo am oberen Fensterrand. Sie sollte die Größe 310×70 Pixel haben. Falls Du es höher machen willst, ist das kein Problem. Du musst nur später beim Style die Werte richtig anpassen.

Die zweite Datei ist für den Knopf im Anmeldefenster. Falls Du die Farben nicht veränderst benötigst Du auch keinen neuen Verlauf. Aber bei meinem Beispiel hat das Blau einfach nicht mehr funktioniert. Daher habe ich eine neue Datei mit 5×30 Pixel erstellt und in dieser den neuen Verlauf gespeichert. So, damit sind die Vorbereitungen abgeschlossen. Jetzt geht es ans Programmieren.

Du brauchst wie immer die Datei functions.php in Deinem aktiven Thema. Falls sie nicht da ist, lege sie einfach neu an. Aber vergiss nicht, in der ersten Zeile muss <?php und in der letzt ?> stehen. Nun folgt der notwendige Code. Eigentlich ist es nur ein Stylesheet, welches Du über eine Action einbinden musst. Mit css kennst Du dich sicher soweit aus, dass der Code keiner Erklärung bedarf.

1
2
3
4
5
6
7
8
9
10
11
12
13

function guru20_BrandedLogin() {
    echo '<style type="text/css">'.
           'h1 a {background-image:url('.get_bloginfo('template_directory').'/images/loginlogo.png) !important; height:147px;}'.
           'form#loginform {background-color: #e4e297; border-color: #c2cf5b;}'.
           'form#loginform label{color:#558630;}'.
           'form#loginform input{background-color:#ecedc1; border-color: #c2cf5b;color:#697221;}'.
           'form#loginform input#wp-submit{color:#FFF;background-image:url('.get_bloginfo('template_directory').'/images/button-grad_green.png) !important;}'.
           '.login #nav a {color:#4a7085 !important;}'.
           '.login #nav a:hover {color:#558630 !important;}'.
         '</style>';
}
//Das StyleSheet mit einer Action aktivieren
add_action('login_head', 'guru20_BrandedLogin');