Ich habe im vorausgegangenen Beitrag das Snippet zum Austausch des Login-Screen-Logos vorgestellt, nun möchte ich euch zeigen wie ihr das Logo innerhalb des WordPress-Dashboards ersetzen könnt.
Diese kleine Anpassung kann ebenfalls dazu beitragen, dass sich ein Kunde in WordPress wohler fühlt und das Gesamtprojekt (noch) positiver wahrnimmt. Auch dieses Snippet ist daher fester Bestandteil meines Basis-Themes das ich für alle WordPress-Projekte als technische Grundlage nutze und ständig weiterentwickle.

Logografik

Das Icon im WordPress-Dashboard hat die Abmessungen 16 x 16 Pixel. Erstellt also ein eigenes Logo mit diesen Abmessungen und speichert es im Theme-Ordner (../wp-content/themes/name-des-themes/img/logo-dashboard.png) ab. Ihr könnt auch einen anderen Speicherort wählen, das folgende Snippet sucht jedoch im oben genannten Ordner nach der Grafik.

WordPress Dashboard-Logo austauschen

functions.php

Kopiert folgendes Snippet in die functions.php eures Themes und passt ggf. den Pfad zum Bild an.


// replace dashboard logo
function kb_dashboard_logo() {
	echo '<style type="text/css">#header-logo { background-image: url('.get_bloginfo('template_directory').'/img/logo-dashboard.png) !important; }</style>';
}

add_action('admin_head', 'kb_dashboard_logo');

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 – 12 Kommentare

  1. krafit
    schrieb am 10.04.2012 um 16:54 Uhr:

    Ich wärme diesen Artikel eigentlich nur ungern auf, aber hast du eine Idee, wie man den gleichen Effekt im Backend von WP 3.3.X umsetzen kann?

    Mit der Umstellung ist das Logo ja in die Adminbar gerutscht (und bietet ein weiteres Menü, das anzupassen auch interessant wäre). Mit der alten Lösung bin ich bis jetzt nicht weit gekommen und eine neue konnte ich auch nicht finden. Vielleicht hast du ja eine Idee.

    Danke,
    krafit

    Antworten
  2. Walter Jahn
    schrieb am 20.10.2011 um 08:18 Uhr:
    • Jonas Hellwig
      schrieb am 20.10.2011 um 08:31 Uhr:

      @Walter Jahn: Das sollte auch mit dem kurzen Snippet klappen. Gerade Favicons brauchen eine manchmal eine ganze Weile bis der Browser merkt, dass sie da sind (oder geändert wurden).

      Antworten
  3. Walter Jahn
    schrieb am 19.10.2011 um 21:39 Uhr:

    Hallo Jonas,

    danke, es klappt bei: Chrome und Opera…

    Bei Safari wird links neben der Url eine kleine blaue Weltkugel angezeigt.

    Aber nicht bei FF 7 bzw. 8… da wird nach wie vor noch ein Quadrat in Form einer gestrichelten Linie angezeigt…

    Danke. Walter

    Antworten
  4. Walter Jahn
    schrieb am 19.10.2011 um 15:27 Uhr:

    Hallo Jonas,

    jetzt klappt es!!! Ich habe nochmals alles kontrolliert….

    Dank.

    Hast du noch einen Tipp, wie ich im Browserfenster, links neben der URL, das Bildchen ebenfalls anpassen kann? Danke.

    Walter

    Antworten
  5. Walter Jahn
    schrieb am 19.10.2011 um 11:04 Uhr:

    Hallo Jonas,

    es muss funktionieren… aber es funktioniert nicht!!!

    Ich habe diese Zeilen am Ende von der funktions.php eingefügt:

    // replace dashboard logo
    function kb_dashboard_logo() {
    echo ‚#header-logo { background-image: url(‚.get_bloginfo(‚template_directory‘).’/img/logo-dashboard.png) !important; }‘;
    }

    add_action(‚admin_head‘, ‚kb_dashboard_logo‘);

    Ich habe auch den Pfad mal schrittweise erweitert, bis hin zu kompletten url. Und das kleine Bildchen habe ich logo-dashboard.png genannt. Leider kann ich dir hier kein Bildschirmfoto anhängen…

    Danke.
    Walter

    Antworten
  6. Walter Jahn
    schrieb am 19.10.2011 um 09:19 Uhr:

    Hallo Jonas,

    ich habe mir die functions.php noch mal neu reinkopiert und dann deine Zeilen an den Schluss gesetzt. Nun gibt es keine Fehlermeldung mehr. Aber:
    das kleine Logo erscheint oben immer noch nicht.

    Ich habe mit Photo-Shop ein 16×16 Bildchen als log-dashboard.png abgespeichert und in
    themes
    twentyeleven
    img

    reinkopiert.

    Weil es den img-ordner nicht gab, habe ich ihn angelegt.

    Was kann ich noch machen? Danke.

    Walter

    Antworten
  7. Walter Jahn
    schrieb am 19.10.2011 um 08:23 Uhr:

    Guten Morgen,

    wenn ich folgendes in die „functions.php“ einfüge, bekomme ich eine Fehlermeldung:

    // replace dashboard logo
    function kb_dashboard_logo() {
    echo ‚#header-logo { background-image: url(‚.get_bloginfo(‚template_directory‘).’/img/logo-dashboard.png) !important; }‘;
    }

    add_action(‚admin_head‘, ‚kb_dashboard_logo‘);

    Was mache ich falsch? Ich habe WP 3.2.1 Standart-Theme 2011. Die vorgenannten Zeilen habe ich mit dem Editor an das Ende gesetzt.

    Danke. Walter

    Antworten
    • Jonas Hellwig
      schrieb am 19.10.2011 um 08:37 Uhr:

      @Walter Jahn: Der Link zum Bild stimmt und der PHP-Tag ?> wird auch nach dem Snippet geschlossen?

      Antworten
  8. Michael
    schrieb am 15.10.2011 um 15:24 Uhr:

    Hi, vielen Dank für den Code-Schnipsel. Ist zwar nur eine kleine Designtechnische Anpassung für das Backend, aber trotzdem hab ich schon länger danach gesucht. Dankeschön!

    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 →