Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Eigene CSS-Styles bzw. Stylesheets im WordPress-Admin-Bereich (Backend) verwenden

Ab und zu kommt es vor, dass der Admin-Bereich von WordPress individuell gestaltet werden soll. Beispielsweise soll das Farbkonzept für den Kunden im Backend angepasst werden. Zu diesem Zweck könnt ihr ein zusätzliches Stylesheet erstellen und mittels Action-Hook im Backend laden. In diesem Beitrag erklären wir, was getan werden muss.

WordPress-Backend per CSS stylen

Erstellt zunächst eine neue CSS-Datei und fügt die gewünschten Stile ein. In diesem Beispiel nennen wir das Stylesheet style-admin.css und legen es im Hauptverzeichnis des Themes ab. Also dort, wo auch die style.css liegt.

Der folgende Code färbt die Werkzeugleiste pink ein:

#wpadminbar {
    background: deeppink;
}

Nun muss die neue CSS-Datei mittels functions.php registriert, eingereiht und anschließend an der richtigen Stelle geladen werden. Fügt dazu folgenden Code in die functions.php ein, oder ergänzt den Bereich der Datei, in dem CSS- und JavaScript-Dateien bereits registriert und eingereiht werden.

function kb_admin_style() {
    wp_enqueue_style('admin-styles', get_template_directory_uri().'/style-admin.css'); 
}

add_action('admin_enqueue_scripts', 'kb_admin_style');

Das Ergebnis sieht so aus:

Eingefärbte Werkzeugleiste in WordPress
Mit ein wenig eigenem CSS-Code wurde die Werkzeugleiste im Administrationsbereich eingefärbt

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 6 Kommentare

  1. Actino
    schrieb am 23.05.2021 um 13:10 Uhr:

    Vielen Dank – allerdings musste ich „get_template_directory_uri “ auf „get_stylesheet_directory_uri“ ändern, ansonsten hat es bei mir nicht funktioniert mit WP 5.7.2 + PHP 7.2.34-21

    function kb_admin_style() {
    wp_enqueue_style(‚admin-styles‘, get_stylesheet_directory_uri().’/style_wp-backend.css‘);
    }
    add_action(‚admin_enqueue_scripts‘, ‚kb_admin_style‘);

    Antworten
  2. Alex Vell
    schrieb am 26.02.2021 um 15:15 Uhr:

    Könnte man damit auch mehr Farbschemas fürs Backend hinzufügen?

    Antworten
  3. Tad Wohlrapp
    schrieb am 16.12.2020 um 11:10 Uhr:

    get_template_directory_uri() greift immer auf das aktive Root-Template zu. Wer ein Child-Theme nutzt, und dort seine admin-style.css ablegt, sollte stattdessen get_stylesheet_directory_uri() nutzen, da diese Funktion Child-Themes beachtet.

    Antworten
  4. E.Struth
    schrieb am 31.10.2019 um 18:04 Uhr:

    Ich überschreibe das WP-admin-CSS ungewollt durch mein eigenes Plugin.
    Wenn es mehrere CSS-Dateien gibt, gibt es Probleme bei Namensgleichheit der Tags z.B. label gegen label in der anderen CSS-Datei bzw. hängt auch ab, wie spezifisch der tag ist z.B. label gegen div p label. Welcher CSS-tag hat Vorrang. Ich glaube, man sollte CSS bezüglich ID oder Klassen verwenden

    Antworten
    • Jonas Hellwig
      schrieb am 01.11.2019 um 07:55 Uhr:

      Welcher CSS-Selektor wie wirkt und warum wird maßgeblich durch die CSS Spezifität beschrieben. Wir haben dazu einen ausführlichen Artikel veröffentlicht. Ebenso zum Thema CSS-Selektoren. Ich hoffe diese Ressourcen helfen weiter!

      Antworten
  5. Inga
    schrieb am 30.05.2016 um 22:21 Uhr:

    Das ist ja cool. Das WP Grau im Backend zieht so depressiv runter.

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

WordPress-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir setzen WordPress seit über 10 Jahren erfolgreich ein und realisieren maßgeschneiderte Websites auf Basis dieses großartigen CMS.

WordPress-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →