WordPress – Style des Admin-Bereichs anpassen

2

Analog zum gestrigen Artikel über das Anpassen der Admin-Leiste in WordPress möchte ich Ihnen heute zeigen, wie Sie das Aussehen des gesamten Backends nach Ihren Bedürfnissen anpassen und eventuell an Ihr WordPress-Theme angleichen können.
Zunächst einmal muss man sich klarmachen, dass es hierfür zwei unterschiedliche Lösungen gibt. Einmal kann man ein Plugin schreiben, das nach seiner Aktivierung das Stylesheet des Backends durch ein eigenes Stylesheet ersetzt. Die andere Lösung, die ich in diesem Artikel betrachten möchte, sieht eine Modifikation des Themes vor. Hier wird ein zusätzliches Stylesheet erstellt, das über den entsprechenden Hook innerhalb des Admin-Bereichs geladen wird und den Standard-Style überschreibt.

1) Vorschau auf das fertige Admin-Theme

Im Originalzustand sieht das Backend einer WordPress-basierten Webseite ähnlich wie auf dem folgenden Bild aus.

Admin-Bereich im Originalzustand

Das LB-Projects Theme bietet ein optionales Stylesheet an (s. Code weiter unten), sodass das Design des Admin-Bereichs besser zum Design des Frontends passt. Das nächste Bild zeigt das Backend von LB-Projects mit angepasstem Design.

Der modifizierte Admin-Bereich, passend zum LB-Projects Theme

2) Erstellen eines Admin-Themes

Um ein entsprechendes Stylesheet im Header des Admin-Bereichs einzubinden, wird der Hook admin_head in Kombination mit der Stylesheet-Enqueuing-Funktion von WordPress genutzt. Kopieren Sie den folgenden Code in die functions.php Ihres Themes

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

Erstellen Sie nun die Datei admin.css, die Sie in das Hauptverzeichnis Ihres Themes speichern. Falls Sie die Datei in ein Unterverzeichnis speichern wollen, passen Sie bitte den Pfad zum Stylesheet in der Funktion an.

Nun können Sie beliebige Anpassungen am Design des Admin-Panels vornehmen. Für mein Admin-Theme, das Sie auf dem zweiten Bild sehen, sieht das Stylesheet folgendermaßen aus.

::selection { background-color: #d54e21; color: #fff; }
::-moz-selection { background-color: #d54e21; color: #fff; }
::-webkit-selection { background-color: #d54e21; color: #fff; }

body,
#wpbody,
#adminmenu a,
.form-table .pre,
#adminmenu a:hover,
.ui-autocomplete li a,
#adminmenu li.menu-top > a:focus {
	color: #3a3a3a;
}

.row-title {
	color: #d54e21;
}

a,
.ui-tabs-nav a,
.plugins a.delete, 
#media-items a.delete,
#media-upload a.del-link,
#the-comment-list p.comment-author strong a {
	color: #666;
}

#adminmenu li li a,
#adminmenu .wp-submenu a,
.folded #adminmenu .wp-not-current-submenu li a {
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

#adminmenu .wp-submenu a:hover, 
#adminmenu .wp-submenu a:focus {
	border-top: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
	background-color: #f0f0f0;
	color: #3a3a3a;
}
 
#adminmenuback,
#adminmenushadow {
	background-image: none;
}

#adminmenu .wp-menu-arrow,
#adminmenu .wp-menu-arrow div,
#adminmenu li.current a.menu-top,
.folded #adminmenu li.current.menu-top,
.folded #adminmenu li.wp-has-current-submenu, 
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head {
	background-image: none;
	background-color: #33363b;
	border-top-color: #33363b;
	border-bottom-color: #33363b;
}

#adminmenu a.menu-top {
	padding: 6px 5px;
	border: none;
	border-bottom: 1px solid #ccc;
}

#adminmenu div.separator,
#adminmenu li.wp-menu-open,
#adminmenu li.wp-not-current-submenu .wp-menu-arrow {
	border: none;
}

#adminmenu li.wp-menu-separator {
	border-top: none;
	border-color: #ccc;
}

#adminmenu li .wp-submenu-wrap {
	border-color: #888;
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	-o-border-radius: 0;
	-ms-border-radius: 0;
}

#adminmenu li.wp-menu-open .wp-submenu-wrap {
	border-bottom: 1px solid #ccc;
}

Im Prinzip habe ich nur die Schriftfarbe, die Farbe der Links und einige Hintergrundfarben in der Seitenleiste geändert. Außerdem wurden die Dropdown-Menüs an die Farbgebung der Dropdowns im Frontend von LB-Projects angepasst.

3) Fazit

Wie Sie sehen, können Sie das Aussehen Ihres WordPress-Backends verhältnismäßig einfach anpassen. Dies ist vor allem auf Blogs und Webseiten mit mehreren Autoren interessant oder auf Webseiten, die das Backend ihren Nutzern zur Anmeldung, Profilverwaltung, etc. zugänglich machen. Hier lohnt es sich, ein paar Minuten zu investieren, um das Design des Frontends auch in den Admin-Bereich zu übernehmen. Dies können Sie schon durch ein paar einfache farbliche Anpassungen erreichen.

Hinterlasse eine Antwort

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

*

Kommentare umschalten

2 Kommentare zu "WordPress – Style des Admin-Bereichs anpassen"

  • Marc sagt:

    Unglaublich nützlicher Artikel. Ich hab mir vorher mal die css-Dateien vom Admin-Bereich angeschaut und hab schon damit gerechnet Tage zuzubringen, nur um hier und da eine Farbe besser an die Seite anzupassen.
    Danke dafür!