WordPress Backend anpassen: Individuell statt von der Stange

Keine Lust mehr auf das Standard-Grau? Wir zeigen Dir, wie Du den Administrationsbereich von WordPress an Deine Bedürfnisse anpasst.

Neben dem Theme (Frontend) lässt sich auch das Backend von WordPress flexibel individualisieren. So kannst Du beispielsweise Farben und Menüpunkte ändern und ein eigenes Logo einfügen. Damit beschleunigst Du nicht nur Deinen eigenen Workflow, sondern kannst als professioneller Webworker Deinen Kunden angepasste WordPress-Installationen anbieten.

Die Gestaltung das Backends ist normalerweise unabhängig vom verwendeten Theme vorgegeben. Wir definieren die Anpassungen im Child Theme, damit sie Update-sicher sind und WordPress notfalls auf die originale CSS-Datei zurückgreifen kann. Voraussetzungen für die folgenden Tipps sind ein Hosting-Paket wie STRATO PowerWeb, ein installiertes WordPress mit aktiviertem Child Theme und grundlegende PHP- und CSS-Kenntnisse.

Wichtig: Bitte vorher ein Backup aller WordPress-Dateien machen, damit die Website im Notfall wiederhergestellt werden kann! Die genannten PHP-Code-Beispiele fügst Du einfach ans Ende der functions.php des Child Themes ein.

Farben ändern

Das grau-schwarz-blaue Standard-Farbschema des WordPress-Backends ist funktional, aber auch Geschmackssache. Über Benutzer -> Dein Profil stehen zwar alternative Vorlagen zur Auswahl, mit einer eigenen CSS-Datei für das Backend bist Du aber deutlich flexibler. Diese wird mit folgenden Zeilen in das Theme eingebunden:

function admin_style() {
  wp_enqueue_style('admin-styles', get_stylesheet_directory_uri().'/admin.css');
}
add_action('admin_enqueue_scripts', 'admin_style');

In diesem Beispiel nennen wir die CSS-Datei admin.css und legen sie im Hauptverzeichnis des Child Themes ab. Mithilfe des folgenden CSS-Codes machen wir die Admin-Leiste oben und das Admin-Menü auf der rechten Seite orange:

#adminmenu, #adminmenu .wp-submenu, #adminmenuback, #adminmenuwrap {
	background-color: #ff9900 !important;
}

#adminmenu div.wp-menu-name {
	color: #ffffff;
}

So sieht das Ergebnis aus:

Menü ausblenden

Das Menü kannst Du ebenfalls anpassen. Werden bestimmte Punkte nicht benötigt, kannst Du sie nach dem Muster remove_menu_page( ‚XXX.php‘ ); einfach ausblenden. Bitte beachte, dass das Menü dabei aktiv bleibt und die Funktionen weiterhin über die URL aufrufbar sind. Um Zugriffsrechte für bestimmte Benutzer zu beschränken, solltest Du die Rollen von WordPress nutzen.

Die nächsten Code-Zeilen dienen der Übersicht, welche Funktionen Du wie ausblendest. Anhand der Kommentierung siehst Du, welche Zeile für welchen Bereich zuständig ist. Würdest Du den kompletten Code übernehmen, wäre Deine Menüleiste leer.

function strato_remove_menus(){
  remove_menu_page( 'index.php' );                  //Dashboard
  remove_menu_page( 'edit.php' );                   //Beiträge
  remove_menu_page( 'upload.php' );                 //Medien
  remove_menu_page( 'edit.php?post_type=page' );    //Seiten
  remove_menu_page( 'edit-comments.php' );          //Kommentare
  remove_menu_page( 'themes.php' );                 //Design
  remove_menu_page( 'plugins.php' );                //Plugins
  remove_menu_page( 'users.php' );                  //Benutzer
  remove_menu_page( 'tools.php' );                  //Werkzeuge
  remove_menu_page( 'options-general.php' );        //Einstellungen
}
add_action( 'admin_menu', 'strato_remove_menus' );

Möchtest Du beispielsweise Plugins und Einstellungen ausblenden, gibst Du folgenden Code ein:

function strato_remove_menus(){
  remove_menu_page( 'plugins.php' );                //Plugins
  remove_menu_page( 'options-general.php' );        //Einstellungen
}
add_action( 'admin_menu', 'strato_remove_menus' );

Menüs umbenennen

Du kannst die Menüpunkte nicht nur ausblenden, sondern auch umbenennen. Um etwa „Beiträge“ durch einen anderen Begriff zu ersetzen, gehst Du folgendermaßen vor:

function strato_post_menu_rename() {
  global $menu;
  $menu[5][0] = 'Angebote';
}
add_action( 'admin_menu', 'strato_post_menu_rename' );

In diesem Fall nennen wir das Menü „Beiträge“ in „Angebote“ um. Wichtig: WordPress ordnet jedem Menü einen Key zu, der hier angegeben werden muss. Das Menü „Beiträge“ hat den Key 5, danach folgt Key 0 für die index.php (siehe Zeile 3). Auf diese Weise kannst Du sämtliche Menüpunkte im WordPress Backend umbenennen. Eine Übersicht über die benötigten Keys findest Du hier.

Logo einfügen

Es gibt verschiedene Wege, Dein Logo oder das Deines Kunden im Backend anzuzeigen. Der einfachste besteht darin, das kleine WordPress-Logo in der Ecke oben links auszutauschen. Dazu legst Du eine 18×18 Pixel große Logo-Datei als backend-logo.png im Hauptverzeichnis Deines Child Themes ab und ergänzt die functions.php um folgende Zeilen:

function wpb_custom_logo() {
echo '
<style type="text/css">
#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
background-image: url(' . get_bloginfo('stylesheet_directory') . '/backend-logo.png) !important;
background-position: 0 0;
background-repeat: no-repeat;
color:rgba(0, 0, 0, 0);
}
#wpadminbar #wp-admin-bar-wp-logo.hover > .ab-item .ab-icon {
background-position: 0 0;
}
</style>
';
}

add_action('wp_before_admin_bar_render', 'wpb_custom_logo');

Danach sieht das Backend so aus:

Ein gutes Backend ist intuitiv

Layout-Anpassungen müssen nicht auf das Frontend beschränkt bleiben. Wenn sich das (Corporate) Design der Website im Administrationsbereich wiederfindet, haben Kunden eher das Gefühl, eine auf sie abgestimmte Lösung zu bekommen. Aber auch als privater WordPress-Nutzer profitierst Du von einer Oberfläche, die an Deine Bedürfnisse angepasst ist. Das individuelle Backend kannst Du intuitiver bedienen und es sieht auch noch besser aus.