kulturbanause Blog

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

WordPress-Dashboard mit dem eigenen Logo versehen

WordPress Dashboard-Logo austauschen

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.

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

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

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

12 Kommentare

  1. Michael

    Verfasst am 15. Oktober 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!

  2. Walter Jahn

    Verfasst am 19. Oktober 2011 um 8: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

    • Jonas Hellwig

      Verfasst am 19. Oktober 2011 um 8:37 Uhr.

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

  3. Walter Jahn

    Verfasst am 19. Oktober 2011 um 9: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

  4. Walter Jahn

    Verfasst am 19. Oktober 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

  5. Walter Jahn

    Verfasst am 19. Oktober 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

  6. Walter Jahn

    Verfasst am 19. Oktober 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

  7. Walter Jahn

    Verfasst am 20. Oktober 2011 um 8:18 Uhr.

    Hallo Jonas,

    hiermit klappt es auch in FF 7 und 8:

    http://www.tipps.1st-tec.de/wordpress/39-wordpress/96-favicon-erstellen-und-in-wordpress-einfuegen.html

    Danke.

    Walter

    • Jonas Hellwig

      Verfasst am 20. Oktober 2011 um 8: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).

  8. krafit

    Verfasst am 10. April 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

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.