Schon mehrfach habe ich über die Möglichkeiten der Anpassungen des Login zum WordPress Backend berichtet, diverse Beiträge lassen sich dazu finden. Aktuell kommen trotzdem immer wieder Fragen und so möchte ich drei einfache Möglichkeiten aufzeigen, so dass man mit wenig Aufwand das Login an die Site anpassen - ein schöner Mehrwert auch im Bezug auf Kundenprojekte, die so runder wirken, als wenn immer das WordPress Logo und der Link erscheint.
Im ersten Schritt passe ich dazu das Logo auf der Login-Seite an. Dies wurde von mir schon mal beschrieben, allerdings mehr im Hinblick auf das Ändern des kompletten Login-Screen und so hier eine einfachere Art und Weise, die schnell realisiert ist. Die Stylesheet-Anweisung soll einfach in den head geschrieben werden, im älteren Tutorial wird ein externes Stylesheet eingebunden.
Logo ändern
Im ersten Code-Beispiel binde ich das Favicon ein, ein schneller Weg ohne großen Aufwand. Alternativ kann natürlich auch ein Logo aus dem Theme eingebunden werden, dazu Code-Beispiel Nummer zwei. Jedes der folgenden Beispiele gehört in die functions.php des Themes.
function fb_custom_login_logo() {
$style = '<style type="text/css"> h1 a { background: transparent url(' . get_bloginfo('url') . '/favicon.ico) no-repeat 30px center !important; } </style>';
echo $style;
}
add_action( 'login_head', 'fb_custom_login_logo' );
function fb_custom_login_logo() {
$style = '<style type="text/css"> h1 a { background: transparent url(' . get_bloginfo('template_directory') . '/images/your-logo-image.png) no-repeat center top !important; } </style>';
echo $style;
}
add_action( 'login_head', 'fb_custom_login_logo' );
Nun haben wir zwar das Logo angepasst, aber der Name beim Hover-Effekt ist noch immer nicht der Site entsprechend. Also auch dafür eine Anpassung, wozu es einen Hook gibt.
Namen ändern
Diesen Hook sprechen wir an und geben in dem folgenden Schnippsel den Namen des Blog mit, der in der Datenbank gepflegt ist, der also über die Einstellungen erreichbar und veränderbar ist. Alternativ kann man natürlich auch statische Inhalte oder eigene Felder abfragen.
function fb_login_headertitle() {
return esc_attr( get_bloginfo( 'name', 'display' ) );
}
add_filter( 'login_headertitle', 'fb_login_headertitle' );
Link ändern
Zum Abschluss soll nun noch der Link ebenfalls angepasst werden, so dass ein Klick auf das Logo zum Frontend der Installation führt. Auch dafür hat WP einen Hook vorgesehen.
function fb_login_headerurl() {
return esc_url( home_url( '/' ) );
}
add_filter( 'login_headerurl', 'fb_login_headerurl' );
Drei kleine einfache Möglichkeiten die in fast jedes Theme gehören und so das Login zur Site entsprechend anpassen. Der Kunde wird es danken und das Produkt ist einfach ein wenig runder. Viel Freude damit.
Danke.
Hi,
wurde mein erster Kommentar verschluckt..??? Okay, das Problem ist wenn man ein individuelles Logo verwendet und es nicht die genauen Maße des Originallogos von WP hat, es leider durch das Eingabefeld teilweise verdeckt wird... Die Frage wäre jetzt, ob man der Funktion nicht Anweisungen mitgeben kann die festlegen, das das Logo immer komplett über dem Eingabefeld angezeigt wird...????
Gruß blog_micky
Du kannst das komplette CSS ändern, mache also was du magst. Dazu ist auch der ältere Beitrag sinnvoll, da dieser zeigt, wie man das Stylesheet einbindet. *Es liegt an deinem Namen des Kommentars, dass er SPAM-verdächtig ist - beachte die Kommentarregeln, dann geht es einfacher.
Hallo Frank,
okay danke! Klar, man kann das natürlich per css anpassen, wobei es eleganter wäre wenn man der Logo-Funktion gleich entsprechende Anweisungen mitgeben könnte.. Manchmal will man ja einfach nur das Logo austauschen und mehr nicht... Das mit den css-Anpassungen ergab sich nicht aus obige, tollen Beitrag. Gut jetzt ist es aber klar...
Gruß blog_micky
Hallo Frank,
vielen Dank für diese -- wieder einmal -- sehr nützlichen Tipps und Codeschnipsel.
Ich bin bisher noch gar nicht auf die Idee gekommen, die Anmeldung anpassen, dabei liegt der Gedanke nahe! Du hast natürlich Recht, das rundet die Dienstleistung positiv ab.
Viele Grüße,
MI
@Michale: vielen Dank für das Lob, freut mich sehr. Ich habe so viele Beiträge hier, die oft Themen abdecken, die noch immer aktuell sind. Ich schreibe eher ungern das gleiche Thema nochmal - fällt mir nur auf, wenn ich es auf anderen Blogs sehe und denke, hatte ich auch mal vor langer Zeit. Hier zeigt sich wieder, dass alte Beiträge nur schwer wieder hoch zu holen sind - sie sind nicht im Fokus der Leser.
Und wieder mal hat sich dieser Besuch gelohnt, vielen Dank. Das ganze gleich mal ausgedruckt und abgeheftet
Der Vollständigkeit halber sei gesagt, dass es für WP-Anfänger (oder wenn's mal ganz schnell ohne Coding gehen muss) sowas auch als Plugin gibt: erhätlich bei WordPress oder direkt beim Autor.
Vielen Dank für die Anleitung, genau danach hatte ich gesucht.
Danke schön für diesen Beitrag.
Danke für diese Anleitung, kommt wie gerufen!
Danke für die hilfreichen Tipps ... bin leider die totale Niete in solchen Sachen, da kommen mir solche Tipps immer recht gut. Mach weiter so
Ich bin zwar im Moment erst auf diese Seite gestoßen, aber ich werde dank den hilfreichen Infos und Anleitungen ein regelmäßiger Leser des Blogs werden.
Danke!
Vielen Dank für diesen Beitrag. Ich habe aktuell das Problem das ich ein child theme verwende. Wenn ich dort den php schnippsel in die functions.php eintrage wird immer der ordner des basis theme verwendet. Gibt es dafür auch eine Lösung ohne das ich hardcodet den pfad zu dem image eintragen muss?
@Moritz: nimm statt template_directory stylesheet_directory, dann sollte alles passen.
Vielen dank für die Antwort. Funktioniert wunderbar
Danke auch nochmal für die vielen hilfreichen Artikel. Ist schon toll ergänzend zu der englischen WordPress Community auch jemanden im deutschsprachigen Bereich zu haben 
Ein vernünftiges Tutorial! Danke ist auf jeden Fall brauchbar. Habe es selbst ein wenig anders gemacht. Diese Version ist aber eindeutig die schönere!