WordPress 2.7 steht vor der Tür und es gibt ein Update des Backend-Designs. Das sollte sich sicher rumgesprochen haben und hinzu kommt ein neuer Login-Bereich. Es wurde nur wenig geändert, aber der Anblick entspricht dem Design des neuen Backends.
Schon in der Vergangenheit habe ich beispielsweise im Artikel „WordPress 2.5 und Theme-definiertes Login“ für das Anpassen des Design an das Theme gesprochen. Aus meiner Sicht gehört es einfach zu einem Rundumpaket eines definierten Themes – ganz im Sinne eines Corporate Designs.
Ab der Version 2.7 ist damit das CSS ein wenig anders und wer den Login-Bereich ebenso anpassen möchte, dem zeige ich hier kurz wie es geht und hinterlege das CSS für ein Beispiel.
Stylesheet laden
Um das erstellte CSS für den Login-Bereich zu laden nutze ich eine kleine Funktion, die ich in der functions.php des jeweiligen Themes ablege und via Hook login_head im Login-Head integriere. So kann ich speziell für das Theme den Login definieren und beim Umschalten eines anderen Themes wird dann das andere Login-Design gezogen.
// 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');
Die Stylesheet-Datei heißt dabei custom-login.css und liegt innerhalb des Ordner custom-login im Ordner des Themes.
Das Stylesheet
Wie schon angesprochen ein kleines Beispiel, was aber die Klassen und IDs des Login-Bereich enthält und so das Anpassen ein wenig erleichtert.
html {
background-color: #fff;
}
#login form {
padding-top: 100px;
}
#login form .submit input {
border-color: #bcb38f !important;
color: #777 !important;
}
#login form .submit input:hover {
border-color: #bcb38f !important;
color: #bcb38f !important;
}
#login h1 {
display: none;
}
.login #nav a {
color: #777 !important;
}
.login #nav a:hover {
color: #bcb38f !important;
}
#wphead img, #wphead h1 {
display: none;
}
#wphead {
height: 100px;
}
#wphead-info {
padding-top: 27px;
}
#footer {
display: none;
}
#footer_custom {
clear: both;
text-align: center;
width: 500px;
margin: auto;
height: 100px;
}
#footer_custom .docs {
padding-top: 0px;
line-height: 100%;
}
#footer_image {
border:none;
}
Soweit zum Beispiel, welches nur eine Möglichkeit der Anpassung darstellt. Hierbei sind den Künsten in der Anwendung von CSS keine Grenzen gesetzt.
Aus meiner Sicht in die Nutzung der Firebug Erweiterung für die Analyse unerlässlich und es empfiehlt sich damit zu arbeiten, wenn man diese noch nicht nutzt.
Eine weitere Möglichkeit das Login-Formular zu verwenden, ist den Login auf der Startseite anzubieten. Dies ist sehr nützlich wenn ein Blog z.B. Kommentare nur für registrierte Nutzer geöffnet hat. Dadurch entfällt das leidige hin- und her gehopse zwischen Blog und Login-Seite. WordPress merkt sich nämlich leider nicht von welcher Seite aus man den Login aufruft. In der Regel landet man nach dem Login im Benutzer-Profil bzw. Backend.
Möchte man nun seinen Besuchern einen Login auf der Startseite anbieten, muss man sich nur die entsprechenden Zeilen aus wp-login.php kopieren und eine Zeile anpassen.
In WP V2.6 sind dies die Zeilen 456-476. In älteren Versionen findet man die entsprechende Stelle indem man nach
form name="loginform"sucht. Alles zwischen[form...]und[/form]kopiert man sich einfach und packt es am besten in eine eigene Datei (z.B. frontpagelogin.php). Diese Datei kann man dann in seinem Theme einfach includieren. Oder man bastelt sich ein Widget daraus*In den Zeilen muss man nun noch eine kleine Änderung vornehmen. Und zwar gibt es ein verstecktes Input-Feld (
input type="hidden" name="redirect_to"). Dieses gibt an wohin nach dem Login umgeleitet werden soll. Ist der Wert$redirect_tonicht gesetzt, wird auf das Backend/Profil umgeleitet.Also setzen wir dort bei
value="..."das ein, wohin der Besucher umgeleitet werden soll. Zum Beispiel die Startseite mit<?PHP bloginfo('home'); ?>. Oder richtig luxuriös zu der Seite, von der aus der Login durchgeführt wurde:<?PHP echo get_bloginfo('url').$_SERVER['REQUEST_URI']; ?>Loggt sich nun ein Besucher von der Startseite ein, wird er auch direkt dorthin zurück befördert. Bei der zweiten Variante wird er sogar ggf. zu einen aufgerufenen Artikel zurück umgeleitet. Natürlich lassen sich so auch die Klassen und IDs ändern und an das Theme anpassen.
Dieses Mini-Login hat allerdings auch nur zwei Eingabefelder! Benutzername und Passwort. Dazu noch halt die RememberMe-Checkbox. Möchte man noch den Link für ein vergessenes Passwort hinzufügen, ergänzt man diesen durch
<a href="<?PHP bloginfo('home');?>/wp-login.php?action=lostpassword">...</a>. Dann wird der Besucher halt wieder zum "normalen" Login-Formular umgeleitet (ohne Redirect). Aber Schusseligkeit muss halt bestraft werden* Wenn ich jetzt noch raus bekomme wie man ein Widget schreibt, dann packe ich das alles mal in ein Widget und stelle es zum Download bereit
PS: Sind meine Kommentare eigentlich zu lang?
@Ralf: nein, sind sie nicht. Dafür haben sie ja viel Inhalt. Den "Rahmen" für ein Widget gibt es hier im Blog, einfach kopieren und eigenen Code reinbauen. Alternativ das Plugin von Andrew. Ich nutze in der Regel die Funktion
wp_redirect()um den Nutzer weiter zu leiten.Danke
Wenn die Vollversion draußen ist, mach ich mir ein Anmeldebereich 
Gute Erklärung zum neuen Loginbereich. Jetzt muss ich nur noch mein kleines Tutorial anpassen.
Zum Glück hat sich nicht extrem viel geändert.
Super, besten Dank für das Tutorial.
Endlich konnte ich auch diesen Schönheitsfehler abstellen.
Das alles ist noch ein wenig unverständlich für den, der CSS noch nicht gewachsen ist. Dadurch weiß dieser nicht, was für was steht, und was was ändert. Deswegen hilft dieses Tutorial nicht wirklich, wenn man keine Ahnung von CSS hat. Mir zum Beispiel hat es nicht wirklich geholfen, obwohl ich CSS einigermaßen verstehe.
Klar, ohne Kenntnisse in CSS ist da nix zu holen. Das Tutorial erklärt auch nur, wie man bei WP einhaken kann. Um Design via CSS muss man sich dann selbst kümmern oder ein Plugin nutzen.
@Leon
Also wenn du wirklich ein wenig von CSS verstehst, dann müsstest du eigentlich wissen was zu tun ist
und selbst wenn nicht, probieren geht über studieren. Zu anfang kann Farben austauschen und merkt schnell was wo passiert.
Und wer wirklich nix von CSS versteht, der sollte die Finger vom Login-Design lassen
dafür gibt es nämlich zig Plugins, deren Installation schneller gehen.
lg
Super vielen Dank, allerdings wenn wir schon bei der Corporate Identity sprechen: Ich suche auch nach Möglichkeiten dem Backend ein eigenes Design zu verpassen.
@Jürgen: das Anpassen kann vielschichtig sein, entweder komplett anders oder nur in den Farben, wie ich es vorrangig mache. Weitere Änderungen mache ich mit meinem Plugin Adminimize. Ein Tutorial zum Backend Design habe ich aber, zumindest wie man die Vorgaben hinzufügt. Ansonsten muss natürlich das CSS laden und eventuell die "alten" CSS deaktivieren, insofern man alles neu machen will.
@Jared
Ich meine, ich weiß ja, was passiert, wenn ich die Farben austausche, und da ist es für mich ziemlich uninteressant, was passiert, wenn ich z.B. background color durch was anderes ersetze. Bis alles richtig proffesionel wirkt und auch zu meinem Blog passt, wäre ich ja schon alt und grau...
Um Link und Titel des Bildes auf der Login-Seite an Blogurl und Blogtitle anzupassen:
In die functions.php:
function custom_login_img_url() {return bloginfo('url');
}
add_filter ('login_headerurl', 'custom_login_img_url');
function custom_login_img_title() {
return bloginfo('name');
}
add_filter ('login_headertitle', 'custom_login_img_title');
Oder alternativ direckt die wp-login.php im root Verzeichniss des Blogs bearbeiten (Datei wird bei Updates überschrieben):
<a href="" title="">Thanks for this wonderful post.I am unable to understand your language but Google chrome translated it for me.
Thanks
Madav
Ich würde gerne wissen, welche Dateien editiert werden müssen, wenn man direkt im wp-admin Verzeichnis den Login anpassen möchte. Das Logo habe ich schon ausgetauscht, würde jedoch auch noch gerne den Link hinter dem Logo ändern und den Text (Powered by WordPress) entfernen bzw. austauschen. lg ubuntuxx
@ubuntuxx: Fasse nie die Core-Dateien an! - deine Wünsche gehen via Hook, schaue mal in einen neueren Beitrag dazu.
Hallo Frank!
Der Artikel ist zwar schon etwas älter, scheint aber immer noch zu funktionieren. Vielleicht eine Anmerkung, da Child-Themes ja ganz schön in Mode gekommen sind: Wenn man sein Logo inkl. CSS im Child-Theme Ordner unterbringt, greift
get_bloginfo('template_directory')nicht mehr. Da wird dann immer das Verzeichnis des Parent-Themes angesteuert. Hier muss man die Funktionget_stylesheet_directory_uri()nehmen. Diese bleibt dann im Child-Theme Ordner.@Michael: ja, im Grunde ändert WP dahingehend ja wenig, daher sollte so gut wie alles im Blog machbar sein. Für Child Themes gilt immer das Ansprechen via Stylesheet-URL