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.