Jeder WordPress-User kennt sie: Die Standard-Login-Seite wp-login.php von WordPress (hier dargestellt mit einem zusätzlichen Abfragefeld für den Google Authenticator).

Dieser Beitrag erläutert, wie sich das Design der Login-Seite mit einigen Zeilen PHP-Code in der functions.php des Child-Themes und einigen CSS-Anweisungen individualisieren lässt.

Das PHP-Snippet für die Layoutanpassung der WordPress-Login-Seite

<?php
function mein_login_logo() {
    echo '<style type="text/css">
    </style>';
	}
add_action('login_head', 'mein_login_logo');
?>

CSS-Klassen, die auf der Anmeldeseite häufig angepasst werden, sind:

h1 a { background-image:url('') !important; }
.message { border-color:#777 !important; }
#loginform { background-color:#DDD; }
#loginform label { color:#777; }
#loginform .button-primary { }
.privacy-policy-link { color:#DDD; }

Bei Anweisungen, die (zunächst) nicht funktionieren, ist es stets einen Versuch wert, diese mit !important zu deklarieren, damit nicht nachfolgende, identische Anweisungen den gewünschten Wert wieder überschreiben.

Das Logo wird von WordPress als Hintergrundgrafik einer <h1>-Überschrift dargestellt. Die Standardgröße für das Logo beträgt 84×84 Pixel.

Das PHP-Snippet zum Anpassen des Logo-Links

Außerdem ist es möglich, den Hyperlink des Logos anzupassen (Für den Hinweis vielen Dank an Sascha von Fjordkommission Flensburg). Hier entsteht beispielhaft ein Link zur Startseite:

<?php
function mein_login_headerlogo_url() { return "/"; } 
add_filter('login_headerurl', 'mein_login_headerlogo_url'); 
 
function mein_login_headerlogo_title() { return "Zur Startseite"; } 
add_filter('login_headertitle', 'mein_login_headerlogo_title');
?>

Eine Meldung auf der WordPress-Loginseite ausgeben

Ein weiteres Snippet in der functions.php von WordPress lässt uns eine Meldung auf der Login-Seite ausgeben:

<?php
function sub_add_login_message($message){
	return $message.'<h2 style="text-align:center;">Wir l&ouml;sen Technik-Probleme.</h2>';
	}
add_filter('login_message', 'sub_add_login_message');
?>

Das Ergebnis: Eine individuell angepasste WordPress-Login-Seite

Bei der hier dargestellten, neuen Anmeldeseite wurden nur die Kernelemente leicht verändert, damit der ursprüngliche Charakter der Seite noch erhalten bleibt und der User sich schnell zurechtfindet.