WordPress-Dashboard mit dem eigenen Logo versehen
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, Sketch, Adobe XD …
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.
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 →
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!
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?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
Jonas Hellwig
Verfasst am 19. Oktober 2011 um 10:22 Uhr.
@Walter Jahn: Das Snippet funktioniert genauso wie dieses hier: https://blog.kulturbanause.de/2011/10/wordpress-login-screen-individualisieren/
Prüfe einfach ob die Pfade und Dateinamen stimmen – dann muss es funktionieren.
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
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
Jonas Hellwig
Verfasst am 19. Oktober 2011 um 17:30 Uhr.
@Walter Jahn: Na logo :) https://blog.kulturbanause.de/2009/05/favicon-generator-ade-favicons-mit-photoshop/
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
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).
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