Wie lässt sich das WordPress Admin-Logo ändern

In unserem heutigen WordPress-Tutorial sprechen wir darüber, wie sich das Admin-Logo in WordPress ändern lässt. Bei jeder ersten Anmeldung auf jeweiliger Seite achtet Ihr sicherlich auf das Aussehen Eurer Account-Seite. Anpassbare Besucher-Accounts stellen eine gute Lösung dar, um Eure Marke leicht erkennbar zu machen. Daher stellen wir Euch gerne ein paar Tricks vor, die Eurer Webseite einen individuellen Stil verleihen können.

So fangen wir an, das Admin-Logo im WordPress-Adminbereich zu ändern.

Um das Logo zu ersetzen, müsst Ihr einen benutzerdefinierten Stil festlegen, weil sonst nur ein standardmäßiges Bild in WordPress-CSS zur Verfügung steht. Daher müssen wir als erstes ein benutzerdefiniertes Stylesheet namens 'style.css' erstellen. Dieses Stylesheet soll sich nicht nur auf das Frontend richten, sondern auch auf das Design des Adminbereiches. Eine kleine Codezeile soll in die Funktionsliste des Themes eingebunden werden.

Öffnet das Erscheinungsbild > Bearbeiter, um die Datei der Theme-Funktionen zu sehen. Sie lässt sich normalerweise unter 'functions.php' finden.

Bindet den folgenden Code ganz am Ende dieser Datei ein und drückt den 'Datei aktualisieren'- Button:

/**
* allows you to add custom styles for WordPress admin panel
*/

add_action( 'admin_head', 'admin_css' );
function admin_css()
{
echo '';
}

Hier soll die Zeile link-to-your-file.css über Euren CSS-Dateipfad ersetzt werden, d.h. .,//example.com/wp-content/themes/theme_name/style.css. Bitte checkt das Beispiel auf dem folgenden Screenshot:

Jetzt lässt sich Euer eigenes Logo einbinden, da die Stil-Datei schon vorbereitet ist. Ladet nun Euer Logo-Bild auf den Adminbereich hoch. Es lässt sich reibungslos auf Media > Neu hinzufügen mit Hilfe von Drag-and-Drop machen. Es macht keinen Sinn, große Dateien zu nutzen. Ein kleines PNG- oder JPG-Bild in der 35 x 35 px Auflösung wird vollkommen ausreichend.

Nachdem das Bild hochgeladen worden ist, könnt Ihr dieses in Eurer benutzerdefinierten CSS-Regel nutzen. Dabei wird das Standard-Logo durch ein neues Logo ersetzt. Öffnet Media > Bibliothek und fixiert das neu hochgeladene Icon. Klickt darauf, um Euch die Bild-Details in Pop-Up anzusehen. Danach kopiert den Bild-Pfad vom URL-Feld ganz oben rechts. Sobald es gemacht ist, seid Ihr gründlich vorbereitet, eine Regel für die Logo-Änderung hinzuzufügen.

Jetzt geht zu Erscheinungsbild >
Bearbeiter wieder und klickt auf die 'Stylesheet' (style.css)-Datei. Bindet die folgende Regel ans Ende dieser Datei ein:

#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
  color: transparent ;
  background: url('your-icon-path') no-repeat scroll 0 0 / 100% auto;
}

Schließlich müsst Ihr die Zeile your-icon-path durch die Icon-URL ersetzen, die Ihr von Media-Bibliothek kopiert habt. Beim Datei-Speichern drückt Ihr den Datei aktualisieren-Button.

Checkt das Ergebnis im Adminbereich der Seite, Euer Logo wird statt des Standard-Icons angezeigt:

Das war‘s für heute. Jetzt seid Ihr noch ein Stück näher zur erstaunlichsten Webseite. Bleibt dran!