WordPress 2.7 Login Design anpassen

Mehr:

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.

WP 2.7 Login

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.

Artikel #846, 10. Dezember 2008 · Themes, Tipps, WordPress · 18 Kommentare
Tags: CSS, StyleSheet, Tutorial, Webdesign, WordPress, WP2.7
Kommentar-Feed zum Artikel · Kommentare und Pings sind nicht erlaubt. · Kurzlink

17 Kommentare zu „WordPress 2.7 Login Design anpassen“

1
Kommentar von Ralf
10. Dezember 2008 um 07:50
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_to nicht 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?
2
Kommentar von Frank Bültge
10. Dezember 2008 um 10:17
@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.
3
Kommentar von Ahmet Topal
10. Dezember 2008 um 18:06
Danke Wenn die Vollversion draußen ist, mach ich mir ein Anmeldebereich
4
Kommentar von Jared
13. Dezember 2008 um 14:50
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.
5
Pingback von WordPress, ein Ausblick für 2009 « WordPress Deutschland Blog
6. Januar 2009 um 20:05
6
Kommentar von Wuggi
3. Februar 2009 um 21:59
Super, besten Dank für das Tutorial.
Endlich konnte ich auch diesen Schönheitsfehler abstellen.
7
Kommentar von Leon
1. März 2009 um 17:15
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.
8
Kommentar von Frank Bültge
1. März 2009 um 21:13
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.
9
Kommentar von Jared
1. März 2009 um 21:15
@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
10
Kommentar von Jürgen Liechtenecker
3. März 2009 um 16:39
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.
11
Kommentar von Frank Bültge
3. März 2009 um 21:12
@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.
12
Kommentar von Leon
4. März 2009 um 18:28
@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...
13
Kommentar von Alexander
7. Mai 2010 um 16:16
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="">
14
Kommentar von madav
23. September 2010 um 11:36
Thanks for this wonderful post.I am unable to understand your language but Google chrome translated it for me.

Thanks
Madav
15
Kommentar von ubuntuxx
17. Oktober 2010 um 17:35
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
16
Kommentar von Frank Bültge
17. Oktober 2010 um 19:54
@ubuntuxx: Fasse nie die Core-Dateien an! - deine Wünsche gehen via Hook, schaue mal in einen neueren Beitrag dazu.
17
Kommentar von Michael
12. Juli 2011 um 11:37
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 Funktion get_stylesheet_directory_uri()nehmen. Diese bleibt dann im Child-Theme Ordner.
18
Kommentar von Frank Bültge
12. Juli 2011 um 15:36
@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