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

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

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:

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 13 Kommentare

  1. 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
  2. Marcos
    schrieb am 18.02.2013 um 21:51 Uhr:

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

    Antworten
  3. 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
  4. 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 (Autor)
      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 (Autor)
      schrieb am 24.09.2012 um 11:53 Uhr:

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

      Antworten
  5. 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
  6. 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
  7. Walter Jahn
    schrieb am 19.10.2011 um 09:21 Uhr:

    Hallo Jonas,

    das klappt super…
    siehe hier:

    uschiundwalter.de

    Danke.
    Walter

    Antworten
  8. 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
  9. 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
  10. 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 (Autor)
      schrieb am 12.10.2011 um 18:55 Uhr:

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

      Antworten

Schreibe einen Kommentar zu Ursula Antworten abbrechen

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 →