Tipp:
Dieser Artikel ist Teil einer kleinen Serie, die zeigen soll, dass WordPress an Flexibilität gewinnt und dass man Backend, Frontend und Login gestallten kann.
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.
Es gibt ein Problem mit extend.WordPress, dort wird nicht die aktuellste Version angezeigt.
Also für alle die sich für das Plugin interessieren die neuste Version ist v1.2.1 die gibts auf meinem Blog. Horttcore : WP-Disclaimer
In der Regel dauert es einige Minuten, kann das sein?
Sind inzwischen eher Wochen, normal sind 15-45min.