eigenes CSS für Admin-Bereich / Backend

Solltest du mal im Backend oder im Editor deiner WordPress Website etwas per CSS Verändern wollen, kommt hier die Lösung.

Die eigentliche Herausforderung besteht darin, dass dein CSS im WordPress Customizer oder in der style.css deines Child-Themes nicht im Backend ausgeführt wird, sondern nur im Frontend. Ähnlich verhält es sich bei den zahllosen Custom CSS Blöcken diverser Themes und Plugins, die genauso nur im Frontend ausgegeben werden. Wir brauchen also eine Lösung, welche auch im Backend greift.

Einer dieser Wege ist die functions.php deines Child-Themes. Den folgenden PHP-Schnippsel kannst du einfügen und dein gewünschtes CSS wie gewohnt zwischen <style> und </style> schreiben. Das Beispiel markiert die WordPress Update-Box z.B. komplett orange.

Custom CSS als Funktion via functions.php

/* Backend-CSS via functions.php */
add_action('admin_head', 'dwp_custom_admin_css');
function dwp_custom_admin_css() {
  echo '<style>
    .update-nag {
    background: #ffba00;
    }
  </style>';
}

Custom Backend CSS als separate Datei

Eine andere Möglichkeit für umfangreicheres CSS ist die folgende Lösung. Hier kannst du eine zusätzliche Datei im Backend laden und diese mit deinem CSS füllen. Wir legen die Datei im Child-Theme Ordner unter „./assets/css/“ ab und benennen diese mit „admin-style.css“.

/* Backend-CSS über eigene CSS-Datei */
function dwp_backend_style() {
    wp_enqueue_style('admin-styles', get_theme_file_uri('/assets/css/admin-style.css'), false );
}
add_action('admin_enqueue_scripts', 'dwp_backend_style');

Custom CSS im Block-Editor (Gutenberg)

Wenn du nun Stylings nur für den Block-Editor nutzen möchtest, kannst du folgendes Snippet nutzen. Die Datei liegt ebenfalls im Child-Theme Ordner unter „./assets/css/“ und diese nennen wir „gutenberg-style.css“.

/* Gutenberg-CSS über eigene CSS-Datei */
function dwp_gutenberg_styles() {
  wp_enqueue_style( 'gutenberg-styles', get_theme_file_uri( '/assets/css/gutenberg-style.css' ), false );
}
add_action( 'enqueue_block_editor_assets', 'dwp_gutenberg_styles' );

Neben den genannten Lösung gibt es auch die Funktion „get_template_directory_uri()„, welche immer auf das aktive Eltern-Theme zugreift. Wenn du jedoch ein Child-Theme nutzt, und dort deine admin-style.css ablegst, sollte stattdessen immer „get_stylesheet_directory_uri()“ genutzt werden, da diese Funktion auch das Child-Theme beachtet und so automatisch das richtige Verzeichnis wählt.

Welche Anpassungen möchtest du im Backend per CSS umsetzen. Teile deine Ideen gerne in den Kommentaren.

Du hast es trotz Anleitung nicht hinbekommen, deine WordPress Website schimpft weiterhin mit dir und bereitet dir Probleme bei diesem Thema? Kontaktiere uns gern und wir helfen dir im 1:1 direkt mit deinen Fragen weiter. Telefonisch, per Bildschirmübertragung oder per Mail, du hast die Wahl.

Solltest du mal nicht weiterkommen und dein WordPress macht schlicht nicht was du möchtest? Hierfür kannst du neben den Infos aus unseren Beiträgen auch direkten Kontakt mit uns aufnehmen. Schreibe uns einfach dein Anliegen oder beschreibe Problem und wir schauen gemeinsam drüber und finden eine Lösung für dich. Sobald wir deine Angaben haben, schätzen wir vorher grob den Aufwand ab und vereinbaren dann einen Termin mit dir, in welchem wir telefonisch oder live mit Bildschirmübertragung auf deine Fragen eingehen werden. Support per Mail ist natürlich auch möglich.

Probiere es gerne aus, wir freuen uns auf deine Anfrage.



    Erkunde weitere Beiträge

    Schreibe einen Kommentar