WordPress Login-Screen individualisieren

Von: Jonas

Ein angepasster Login-Screen macht einen guten Eindruck, wenn Personen sich in die WordPress-Installation einloggen. In den meisten Fällen wird lediglich das Logo ausgetauscht, doch auch farbliche Anpassungen sind möglich.

Aktualisiert von 2011 – 2015 14 Kommentare

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.

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.

functions.php anpassen

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' );

Geschrieben von:

Jonas Hellwig

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing