WordPress – Design der Admin-Leiste anpassen

1

WordPress bietet seit Version 3.1 eine Admin-Leiste, die standardmäßig im Backend der Seite am oberen Fensterrand angezeigt wird. Über diese können verschiedenen Aktionen ausgeführt werden, so zum Beispiel kann man zwischen Front- und Backend hin- und herspringen, neue Inhalte erstellen, Plugins und User verwalten sowie sich abmelden und die Profileinstellungen bearbeiten. Über die Einstellung “Benutzer” -> “Dein Profil” -> “Werkzeugleiste für mich auf der Website anzeigen” kann die Admin-Leiste auch im Frontend der Webseite angezeigt werden. Je nachdem, wie der Header der Webseite gestaltet ist, sieht die Admin-Leiste im Frontend jedoch alles andere als gut aus (s. Bild unten), weshalb man ihr Design unter Umständen anpassen möchte. Wie das geht, zeige ich in diesem Artikel.

Die Admin-Leiste im Originalzustand

Das nächste Bild zeigt die angepasste Leiste, die sich wesentlich besser in das Gesamtbild einfügt. Eine funktionelle Änderung gab es nicht, lediglich das Design wurde angepasst.

An das restliche Design angepasste Admin-Leiste

Erreichen kann man diese Änderung ganz einfach, indem man ein Stylesheet erstellt, in dem die entsprechenden Eigenschaften geändert wurden. Dieses bindet man anschließend über den admin_head Hook im Admin-Bereich und über den wp_head Hook im Seitenheader ein.

Hierzu öffnen Sie zunächst die functions.php Ihres Themes und fügen folgenden Code ein.

function LB_admin_bar() {
	wp_enqueue_style('admin-bar-style', get_template_directory_uri() . '/admin-bar.css');
}
add_action( 'admin_head', 'LB_admin_bar' );
add_action( 'wp_head', 'LB_admin_bar' );

Erstellen Sie anschließend das Stylesheet admin-bar.css, das Sie in die oberste Verzeichnisebene Ihres Themes speichern (ändern Sie alternativ den Pfad zur Datei in der obigen Funtion). Nun wird das Stylesheet über die beiden Hooks sowohl im Front- als auch im Backend geladen.

Führen Sie jetzt die gewünschten Anpassungen im admin-bar-Stylesheet durch. In meinem Theme sieht das Stylesheet folgendermaßen aus. Es erzielt das Ergebnis, das Sie im zweiten Bild sehen.

#wpadminbar,
#wpadminbar .ab-top-secondary,
#wpadminbar .ab-top-menu>li:hover>.ab-item,
#wpadminbar .ab-top-menu>li.hover>.ab-item,
#wpadminbar .ab-top-menu>li>.ab-item:focus,
#wpadminbar.nojq .quicklinks .ab-top-menu>li>.ab-item:focus {
	background-image: none;
	background-color: #33363b;
	border-bottom: 1px solid #666;
}

#wpadminbar .menupop .ab-sub-wrapper,
#wpadminbar .shortlink-input {
	border-right: 1px solid #888;
	border-left: 1px solid #888;
	border-bottom: 1px solid #888;
}

#wpadminbar .quicklinks .menupop ul li {
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

#wpadminbar .quicklinks .menupop ul li:hover,
#wpadminbar .quicklinks .menupop ul li:focus {
	border-top: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
}

#wpadminbar .menupop li:hover,
#wpadminbar .menupop li.hover,
#wpadminbar .quicklinks .menupop .ab-item:focus,

#wpadminbar .quicklinks .menupop .ab-sub-secondary > li:hover, 
#wpadminbar .quicklinks .menupop .ab-sub-secondary > li.hover, 
#wpadminbar .quicklinks .menupop .ab-sub-secondary > li .ab-item:focus {
	background-color: #f0f0f0;
}

#wpadminbar .ab-top-menu>li:hover>.ab-item,
#wpadminbar .ab-top-menu>li.hover>.ab-item,
#wpadminbar .ab-top-menu>li>.ab-item:focus,
#wpadminbar.nojq .quicklinks .ab-top-menu>li>.ab-item:focus,
#wpadminbar .quicklinks .ab-top-menu .menupop .ab-item:focus {
	color: #fff;
	background-color: #484a4f;
	border-top: none;
	border-bottom: none;
}

#wpadminbar .quicklinks .ab-top-menu .menupop ul li .ab-item:focus {
	color: #3a3a3a;
	background-color: #f0f0f0;
}

#wpadminbar #wp-admin-bar-my-account.with-avatar #wp-admin-bar-user-actions > li {
	border: none;
}

#wpadminbar .quicklinks .menupop ul li a,
#wpadminbar .quicklinks .menupop ul li a strong,
#wpadminbar .quicklinks .menupop.hover ul li a,
#wpadminbar.nojs .quicklinks .menupop:hover ul li a {
	color: #3a3a3a;
}

#wpadminbar .quicklinks > ul > li > a,
#wpadminbar .quicklinks > ul > li > .ab-empty-item {
	border-right: none;
}

#wpadminbar .quicklinks .ab-top-secondary > li {
	border-left: none;
}

#wpadminbar .quicklinks > ul > li {
	border-right: 1px solid #666;
}

#wpadminbar .quicklinks .ab-top-secondary > li > a, 
#wpadminbar .quicklinks .ab-top-secondary > li > .ab-empty-item {
	border-left: 1px solid #666;
}

#wpadminbar .quicklinks .menupop ul.ab-sub-secondary {
	background-color: #fff;
}

#wpadminbar .quicklinks .menupop ul.ab-sub-secondary {
	border-top: 1px solid #aaa;
}

Alles in allem ist es recht einfach, das Design der Admin-Leiste anzupassen. Je nachdem wie gut beziehungsweise schlecht die Admin-Leiste zu ihrem Theme passt, lohnt sich die Anpassung durchaus. Über die Hooks der Funktion in der functions.php können Sie auch steuern, ob die Leiste nur im Front-, nur im Backend oder auf beiden Seiten geändert werden soll. Entfernen Sie hierzu einfach den jeweils anderen Hook.

Hinterlasse eine Antwort

Ihre Email-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert.

*

Kommentare umschalten

1 Kommentar zu "WordPress – Design der Admin-Leiste anpassen"

  • [...] zum gestrigen Artikel über das Anpassen der Admin-Leiste in WordPress möchte ich Ihnen heute zeigen, wie Sie das [...]