WordPress 2.5 und Theme-definiertes Login

Anzeige

Auch in älteren Versionen von WordPress war die Beeinflussung des Login-Design möglich, via Plugin oder auch per Theme. Ebenso kann man per Hook das Login ansprechen und erweitern. Dazu der Verweis auf das Plugin WP-Disclaimer, welches beispielhaft die Möglichkeiten zeigt, von Ralf Hortt.

In diesem Artikel soll es aber auf den Einfluss des Login-Design gehen, ohne Plugin und in Abhängigkeit des verwendeten Themes. Außerdem gehe ich auf die aktuelle WordPress-Version 2.5 ein, da sich das Markup entscheidend geändert hat.

Damit soll der Versuch unternommen werden, dass WordPress Themes in Zukunft nicht nur das Frontend des Blog oder der Webseite entsprechend gestallten, sondern, dass ebenso Login- und Backend-Design an die jeweiligen Kunden angepasst werden.
Um das Backend anzupassen, hat WordPress ab Version 2.5 eine neue Möglichkeit geschaffen und diese habe ich einigen Schritten in einem vorhergehenden Artikel erläutert.

Login-Design ansprechen

Um das Design des Logins zu ändern, genügt es eine CSS-Datei mit den nötigen Stylesheets zu erstellen und an der entsprechenden Stelle, dem Login in WP, zu laden.

Dazu wird der folgenden Syntax in der functions.php des Themes hinterlegt. Sollte die Datei nicht vorhanden sein, einfach anlegen, im Theme speichern und um den Rest kümmert sich WordPress.

Die Funktion fb_custom_login() bringt den Link zum Stylesheet, den ich in diesem Beispiel im Ordern des Themes ablege, im Unterordner custom-login und die Datei heißt custom-login.css.
Der Hook login_head sorgt dafür, dass das Stylesheet auch nur im Login-Screen geladen wird und ansonsten keine unnötige Ladezeit verursacht.

// custom login for theme
// folder themes/theme_name/custom-login/
function fb_custom_login() {
	echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/custom-login/custom-login.css" />';
}

add_action('login_head', 'fb_custom_login');

Das Stylesheet

Nun muss aber das Design mittels CSS erstellt werden. Im Anschluss eine Beispieldatei, die alle nötigen IDs und class enthält. Damit sollte das Anpassen an die eigenen Bedürfnisse schnell möglich sein.

Ansonsten sollte die Add-ons Web Developer und Firebug für den Firefox-Browser jede erdenkliche Hilfe geben.

h1 a {
background: none;
color: #009900;
text-decoration: none;
text-align: center;
width: 99%;
height: 99%;
text-indent: 0;
}

.login {
border-top-width: 0;
}

#login {
width: 292px;
margin: 7em auto;
}

#loginform, #lostpasswordform  {
background-color: #fff;
color: #009900;
}

#loginform .input, #lostpasswordform .input {
}

#loginform #wp-submit, #lostpasswordform #wp-submit {
background-color: #fff !important;
color: #009900;
border: 1px solid #ebe9ed;
-moz-border-radius: 0;
-khtml-border-radius: 0;
-webkit-border-radius: 0;
}

#loginform #wp-submit:hover, #lostpasswordform #wp-submit:hover {
color: #910005;
border-color: #009900;
}

#user_login, #user_pass, #user_email {
font-size: 20px;
width: 97%;
padding: 3px;
margin-right: 6px;
border-width: 1px;
border-style: solid;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}

.forgotmenot {}

#rememberme {}

#nav {
margin: 0 0 0 8px;
padding: 16px;
}

#backtoblog {
text-align: center;
}

#backtoblog a {
position: relative;
text-decoration: none;
color: #777 !important;
}

#backtoblog a:hover {
position: relative;
text-decoration: none;
color: #009900 !important;
}

#login_error, .message {
margin: 0 0 16px 8px;
border-width: 1px solid #009900;
padding: 12px;
}

Anmerkung

Die vielen und kleinen Bereicherungen, die mir bei der Arbeit unterkommen, werden nach und nach in mein Basis-Theme übernommen und werden dort eine Readme erhalten. Derzeit arbeite ich aber an einer ganzen Reihe von Aufgaben, so dass es ein wenig stockt und die Nutzer mit der aktuellen Version auskommen müssen.