WordPress Login-Seite anpassen #3

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 zwei 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.

Die Zeiten ändern sich.

Dieser Beitrag scheint älter als 6 Jahre zu sein – eine lange Zeit im Internet. Der Inhalt ist vielleicht veraltet.

Mehr:

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.

Comments are closed.