WordPress Login-Screen individualisieren

wordpress-logo-login

Wenn ihr WordPress für Kundenprojekte einsetzt, macht es Sinn den Administrationsbereich optisch an das bestehende Corporate Design des Kunden anzupassen. Dieser sieht nämlich in der Regel das eigene Logo lieber als das von WordPress, und eine individualisierte Installation wirkt natürlich auch technisch hochwertiger.
Der erste Kontaktpunkt zwischen Anwender und WordPress-Backend ist der Login-Bereich. Mit wenigen Zeilen Code tauscht ihr hier das WordPress-Logo gegen das des Kunden aus. Ein Snippet das unbedingt in die Theme-Vorlage wandern sollte.

Web Design mit Sass

Eine Einführung in moderne Stylesheets.

In unserem Shop kaufen
ePub, Mobi + PDF

Bei Amazon kaufen
Kindle-Version

Logografik erstellen

Das Standard-WordPress-Logo hat die Abmessungen 326 x 67 Pixel. Am einfachsten ist es daher, wenn ihr euer Logo ebenfalls im Rahmen dieser Abmessungen anlegt.
Das nachfolgende Snippet sucht innerhalb des Theme-Ordners (../wp-content/themes/name-des-themes/img/logo-login.png) nach der Grafik. Achtet also darauf, dass ihr das Bild auch an der richtigen Stelle ablegt.

wordpress-login-screen-brading

functions.php

Kopiert folgenden Code in die functions.php des Themes oder verwendet ein seitenspezifisches Plugin. Es werden drei Elemente des Login-Screens verändert.
Zunächst wird das Logo gegen die von euch erstellte Grafik ausgetauscht. Anschließend wird die Verlinkung des Logos von wordpress.com auf die Startseite eurer Website umgeschrieben get_bloginfo( 'blogname' ) und der Titel durch den Namen eures Blogs get_option('blogname') ersetzt.

/* ----------------------- */
/* customized login-screen */
/* ----------------------- */

// logo
function kb_custom_login_logo() { ?>
    <style type="text/css">
        body.login div#login h1 a {
            background-image: url(<?php echo get_bloginfo( 'template_directory' ) ?>/img/logo-login.png);
            padding-bottom: 30px;
        }
    </style>
<?php }

add_action( 'login_enqueue_scripts', 'kb_custom_login_logo' );

// link
function kb_custom_login_logo_url() {
    return get_bloginfo( 'url' );
}

add_filter( 'login_headerurl', 'kb_custom_login_logo_url' );

// title
function kb_custom_login_logo_url_title() {
    return get_bloginfo( 'blogname' );
}

add_filter( 'login_headertitle', 'kb_custom_login_logo_url_title' );

Update 1

Ich habe den Code oben angepasst, da spätestens ab WordPress 3.4 die URL unerwünschter Weise im Layout aufgetaucht ist. Nun funktioniert wieder alles einwandfrei.

Links zum Thema

Auch im WordPress-Codex findet man mittlerweile Infos zu diesem Thema: