kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

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:

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei WordPress-Projekten

Unsere WordPress Agentur ist auf die Entwicklung maßgeschneiderter WordPress-Themes und -Websites spezialisiert. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung eines Projekts benötigst, helfen wir gerne weiter.
WordPress-Leistungsangebot →

Das könnte dich auch interessieren

13 Kommentare

  1. Tanja Handl

    Verfasst am 12. Oktober 2011 um 9:43 Uhr.

    Eine echt gelungene Schritt-für-Schritt-Erklärung. Man merkt an deinem Blog wirklich, dass du einiges an Trainererfahrung mitbringst.

    • Jonas Hellwig

      Verfasst am 12. Oktober 2011 um 18:55 Uhr.

      @Tanja: Danke! Es freut mich wenn es dir gefällt :)

  2. Anja Kretzer

    Verfasst am 17. Oktober 2011 um 15:06 Uhr.

    Hallo Jonas,
    vielen Dank für die tollen Artikel und das tolle Blog, aus dem ich stetig neue Anregungen und Tipps beziehe!
    Super! Weiter so!

  3. Walter Jahn

    Verfasst am 19. Oktober 2011 um 9:21 Uhr.

    Hallo Jonas,

    das klappt super…
    siehe hier:

    uschiundwalter.de

    Danke.
    Walter

  4. Ursula

    Verfasst am 15. Januar 2012 um 16:58 Uhr.

    Hallo Jonas,

    Dankeschön für die Anleitung; hat super geklappt und sieht gleich viel besser aus :-)

  5. Mr.Mase

    Verfasst am 18. Mai 2012 um 20:09 Uhr.

    Bei mir funktioniert es leider nicht, mir wird nun kein Bild mehr angezeigt

  6. Johannes

    Verfasst am 23. Juni 2012 um 20:13 Uhr.

    Moin Jonas,

    danke für das Snippet! Bis vor einiger Zeit tat es brav seinen Dienst, größtenteils tut es das bis heute auch nach wie vor, allerdings wird mir auf dem Login-Screen oben links einfach der Name der Seite und deren URL angezeigt. Ich kann mir leider nicht erklären, woher das kommt. Es tritt auch nur auf, wenn ich das Snippet eingebaut habe.

    Viele Grüße
    Johannes

    • Jonas Hellwig

      Verfasst am 25. Juni 2012 um 17:25 Uhr.

      Hallo Johannes,
      das Snippet tauscht ja drei Elemente aus. Das Bild, den Link zur Startseite und den Namen des Blogs. Warum bei deiner Seite der Namen und die URL plötzlich oben Links im body auch noch einmal auftauchen kann ich dir leider nicht sagen. Hast du noch weitere Anpassungen an der Login-Datei gemacht?

    • Jonas Hellwig

      Verfasst am 24. September 2012 um 11:53 Uhr.

      Halloo Johannes. Das Snippet habe ich aktualisiert. Es funktioniert jetzt wieder wie gewohnt.

  7. Johannes

    Verfasst am 26. Juni 2012 um 14:32 Uhr.

    Moin Jonas,
    ansonsten habe ich keine Anpassungen vorgenommen, deswegen wundert mich das auch ein wenig. Dann muss man das wohl so hinnehmen, oder die Funktion rauslassen. Danke für deine Antwort!

  8. Marcos

    Verfasst am 18. Februar 2013 um 21:51 Uhr.

    Man kann vor der Tag „style“ der Code für Favicons schreiben? ;)

  9. Marcel

    Verfasst am 3. Mai 2013 um 9:24 Uhr.

    Bei mir kommt in WordPress 3.5 (Chrome) immer ein

    HTTP-Fehler 500 (Internal Server Error): Beim Versuch des Servers, die Anforderung zu verarbeiten, ist eine unerwartete Bedingung aufgetreten.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.