WordPress Login - Logo und Link anpassen

Auch die Login-Seite einer WordPress Installation lässt sich mittels einiger Filter relativ schnell und komfortabel anpassen. Mit folgenden Snippets können sowohl das Logo als auch der Link, der hinter dem Logo/Header liegt angepasst werden.

Der Code kann entweder in der functions.php eines Themes oder noch besser im Rahmen eines eigenen Plugins eingefügt werden. Die Plugin-Variante hat den Vorteil, dass die Änderungen an der Login-Seite bestehen bleiben, auch wenn das Theme gewechselt wird.

WordPress Login – Logo austauschen

Um ein eigenes Logo auf der WordPress Login-Seite zu setzen, dient folgendes Snippet:

add_action( 'login_head', 'namespace_login_style' );
function namespace_login_style() {
    echo '<style>.login h1 a { background-image: url( ';
    echo get_template_directory_uri() . '/images/logo.png';
    echo ' ) !important; }</style>';
}

add_action( 'login_head', 'namespace_login_style' );

function namespace_login_style() {

echo '<style>.login h1 a { background-image: url( ';

echo get_template_directory_uri() . '/images/logo.png';

echo ' ) !important; }</style>';

}

In der vierten Zeile des Snippets steht der Pfad zur Logo-Datei. Hier kann natürlich auch eine komplett URL angegeben werden statt den Pfad zusammenzusetzen. Das könnte dann wie folgt aussehen:

add_action( 'login_head', 'namespace_login_style' );
function namespace_login_style() {
    echo '<style>.login h1 a { background-image: url( ';
    echo 'http://wp-guru.net/wp-content/uploads/2014/08/wp-guru-login-logo1.png';
    echo ' ) !important; }</style>';
}

add_action( 'login_head', 'namespace_login_style' );

function namespace_login_style() {

echo '<style>.login h1 a { background-image: url( ';

echo 'http://wp-guru.net/wp-content/uploads/2014/08/wp-guru-login-logo1.png';

echo ' ) !important; }</style>';

}

WordPress Login – Link und Title ändern

Um den Link sowie das Title-Attribut zu ändern, das hinter dem Logo auf WordPress Login-Seite liegt, dienen folgende beide WordPress Filter. Der erste Filter passt den Link bzw. die Url an, der zweite das Title-Attribute des Logos.

add_filter( 'login_headerurl', 'namespace_login_headerurl' );
function namespace_login_headerurl( $url ) {
    $url = home_url( '/' );
    return $url;
}

add_filter( 'login_headerurl', 'namespace_login_headerurl' );

function namespace_login_headerurl( $url ) {

$url = home_url( '/' );

return $url;

}

Statt home_url(‚/‘) zum Auslesen der Blog-URL in Zeile 3 kann auch jede beliebige andere URL angegeben werden.

add_filter( 'login_headertitle', 'namespace_login_headertitle' );
function namespace_login_headertitle( $title ) {
    $title = get_bloginfo( 'name' );
    return $title;
}

add_filter( 'login_headertitle', 'namespace_login_headertitle' );

function namespace_login_headertitle( $title ) {

$title = get_bloginfo( 'name' );

return $title;

}

Anstelle von get_bloginfo( ’name‘ ) in Zeile 3 kann auch ein beliebiger String ausgegeben werden.

Login-Logo mit Seiten-Logo ersetzen

Wenn der Blog ein eigenes Header-Bild besitzt, dann kann dieses auch automatisch für die Login-Seite verwendet werden. Hierzu ist die Funktion namespaceloginstyle() aus oben stehendem Beispiel durch folgende Funktion zu ersetzen:

function namespace_login_style() {
    if( function_exists('get_custom_header') ){
        $width = get_custom_header()->width;
        $height = get_custom_header()->height;
    } else {
        $width = HEADER_IMAGE_WIDTH;
        $height = HEADER_IMAGE_HEIGHT;
    }
    echo '<style>'.PHP_EOL;
    echo '.login h1 a {'.PHP_EOL; 
    echo '  background-image: url( '; header_image(); echo ' ) !important; '.PHP_EOL;
    echo '  width: '.$width.'px !important;'.PHP_EOL;
    echo '  height: '.$height.'px !important;'.PHP_EOL;
    echo '  background-size: '.$width.'px '.$height.'px !important;'.PHP_EOL;
    echo '}'.PHP_EOL;
    echo '</style>'.PHP_EOL;
}

function namespace_login_style() {

if( function_exists('get_custom_header') ){

$width = get_custom_header()->width;

$height = get_custom_header()->height;

} else {

$width = HEADER_IMAGE_WIDTH;

$height = HEADER_IMAGE_HEIGHT;

}

echo '<style>'.PHP_EOL;

echo '.login h1 a {'.PHP_EOL;

echo ' background-image: url( '; header_image(); echo ' ) !important; '.PHP_EOL;

echo ' width: '.$width.'px !important;'.PHP_EOL;

echo ' height: '.$height.'px !important;'.PHP_EOL;

echo ' background-size: '.$width.'px '.$height.'px !important;'.PHP_EOL;

echo '}'.PHP_EOL;

echo '</style>'.PHP_EOL;

}

WordPress Snippets vom Guru.

Über Raffael

40 Kommentare

Schreibe einen Kommentar Antworten abbrechen