Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

WordPress Login-Screen individualisieren

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.

wordpress-login-screen-brading

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

Benutzerbild

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

Feedback & Ergänzungen – 14 Kommentare

  1. Stefan
    schrieb am 17.01.2024 um 13:16 Uhr:

    Es funktioniert auch in 2024 immer noch! Danke :)

    Antworten
  2. Marcel
    schrieb am 03.05.2013 um 09: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.

    Antworten
  3. Marcos
    schrieb am 18.02.2013 um 21:51 Uhr:

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

    Antworten
  4. Johannes
    schrieb am 26.06.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!

    Antworten
  5. Johannes
    schrieb am 23.06.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

    Antworten
    • Jonas Hellwig
      schrieb am 25.06.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?

      Antworten
    • Jonas Hellwig
      schrieb am 24.09.2012 um 11:53 Uhr:

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

      Antworten
  6. Mr.Mase
    schrieb am 18.05.2012 um 20:09 Uhr:

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

    Antworten
  7. Ursula
    schrieb am 15.01.2012 um 16:58 Uhr:

    Hallo Jonas,

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

    Antworten
  8. Walter Jahn
    schrieb am 19.10.2011 um 09:21 Uhr:

    Hallo Jonas,

    das klappt super…
    siehe hier:

    uschiundwalter.de

    Danke.
    Walter

    Antworten
  9. Anja Kretzer
    schrieb am 17.10.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!

    Antworten
  10. Links 43 » WoWa-Webdesign Friedrichshafen, Bodensee
    schrieb am 17.10.2011 um 09:30 Uhr:

    […] Wenn ihr WordPress für Kundenprojekte einsetzt, macht es Sinn den Administrationsbereich optisch an das bestehende Corporate Design des Kunden anzupassen. » Artikel lesen […]

    Antworten
  11. Tanja Handl
    schrieb am 12.10.2011 um 09:43 Uhr:

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

    Antworten
    • Jonas Hellwig
      schrieb am 12.10.2011 um 18:55 Uhr:

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

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

WordPress-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir setzen WordPress seit über 10 Jahren erfolgreich ein und realisieren maßgeschneiderte Websites auf Basis dieses großartigen CMS.

WordPress-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →