Gerade wenn man mehrere Blogs betreut kann man auf der immer gleich aussehenden Login-Seite mit dem altbekannten WordPress Logo durcheinanderkommen. Aber auch für „normale“ Besucher die sich einloggen müssen, kann eine kleine visuelle Hilfe nützlich sein.
Am einfachsten finde ich immer ein eigenes Logo – wer mag, kann natürlich auch den Rest der Seite noch per css umgestalten.
(1) Das gewünschte Logo in einer passenden Größe (die weiße Login-Box ist 320px breit) in das eigene WordPress hochladen; ob man es in die eigene Mediengalerie hochlädt oder lieber per FTP in das aktuelle Theme-Verzeichnis ist dabei vollkommen unerheblich.
(2) Folgenden Code in die functions.php einfügen (oder als sonstwie als Snippet anlegen, z.B. mit dem Plugin Code Snippets)
Zunächst die einfache Variante mit Logo im Theme-Ordner; wenn das Logo in der Mediengalerie liegt, kann man sich dort die komplette Adresse holen und für $image verwenden (siehe Zeile 3). Oder man referenziert direkt auf die Datei-ID, die man beim Hovern im URL-Parameter post= findet (Zeile 4, ID 2466 als Beispiel angenommen)
function my_custom_login_logo() {
$image = get_stylesheet_directory_uri().'/images/myloginlogo.jpg';
//$image = 'http://mysite.tld/wp-content/uploads/myloginlogo.jpg';
//$image = wp_get_attachment_url(2466);
$size = getimagesize($image);
$width = $size[0];
$height = $size[1];
echo '
<style type="text/css">
h1 a {
background-image:url('.$image.') !important;
background-size: '.$width.'px '.$height.'px !important;
width: '.$width.'px !important;
height: '.$height.'px !important;
}
</style>
';
}
add_action('login_head', 'my_custom_login_logo');
Auf einem komplett auf https umgestellten Blog hatte ich permanent einen SSL Fehler im getimagesize(); das Problem konnte ich durch Verwendung des absoluten Pfades auf dem Server lösen (bzw. umgehen) – hier sieht das Snippet jetzt so aus:
function my_custom_login_logo() {
$image = '/images/myloginlogo.jpg'; //relative path to current (child) theme
$image_abs = get_stylesheet_directory().$image;
$image_url = get_stylesheet_directory_uri().$image;
$size = getimagesize($image_abs);
$width = $size[0];
$height = $size[1];
echo '
<style type="text/css">
h1 a {
background-image:url('.$image_url.') !important;
background-size: '.$width.'px '.$height.'px !important;
width: '.$width.'px !important;
height: '.$height.'px !important;
}
</style>
';
}
add_action('login_head', 'my_custom_login_logo');
Auch das kann man natürlich mit der Mediengalerie machen, dann sieht der Anfang der Funktion so aus (ungetestet):
function my_custom_login_logo() {
$image = 2466; // use file ID
$upload_dir = wp_upload_dir();
$image_abs = $upload_dir['path'];
$image_url = wp_get_attachment_url($image);
$size = getimagesize($image_abs);
update 14. April 2015:
(3) Als Kür kann man auch noch dafür sorgen, dass ein Klick auf das Logo nicht mehr zu WordPress.org führt; Betreiber einer Multisite haben da schon automatisch einen Link zum eigenen Blog. Auch das kann man bequem in der functions.php erledigen:
if ( !is_multisite() ) {
add_filter( 'login_headerurl', 'custom_loginlogo_url' );
function custom_loginlogo_url($url) {
return get_home_url();
}
add_filter( 'login_headertitle', 'custom_loginlogo_title' );
function custom_loginlogo_title($title) {
return get_option('blogname');
}
}
Hier der vorher-nachher-Vergleich im Bild:
