Créer une feuille de styles CSS pour le back office de WordPress

Vous souhaitez personnaliser l’apparence du back office de WordPress ?

Ce tutoriel vous montrera comment créer une feuille de styles CSS qui s’appliquera directement dans votre panneau d’administration pour un CMS 100% sur-mesure.

Étape n°1 – Ajout d’une fonction PHP

À l’aide de votre client FTP favori, ouvrez le fichier functions.php de votre thème enfant, pour que votre code survive aux mises à jour du thème, puis insérez la fonction suivante :

/**
 * Load the admin.css stylesheet of the child theme in the WordPress admin.
 */
function wpc_admin_css() {
	$path = get_stylesheet_directory() . '/css/admin.css';

	if ( ! file_exists( $path ) ) {
		return;
	}

	wp_enqueue_style(
		'wpc-admin',
		get_stylesheet_directory_uri() . '/css/admin.css',
		array(),
		(string) filemtime( $path )
	);
}
add_action( 'admin_enqueue_scripts', 'wpc_admin_css' );

Le crochet admin_enqueue_scripts ne se déclenche que dans l’administration. La fonction wp_enqueue_style() y charge le fichier admin.css du dossier css de votre thème enfant, dont get_stylesheet_directory_uri() donne l’adresse. Le numéro de version, tiré de la date de modification du fichier, oblige le navigateur à recharger la feuille après chaque changement. Il vous faut donc créer ce fichier à l’aide de votre éditeur de texte favori – Notepad++, Visual Studio Code, etc.

Vous préférez une petite extension, comme un plugin de fonctions globales (mu-plugin) ? Placez alors admin.css à côté de son fichier PHP, puis remplacez get_stylesheet_directory() . '/css/admin.css' par plugin_dir_path( __FILE__ ) . 'admin.css' et get_stylesheet_directory_uri() . '/css/admin.css' par plugins_url( 'admin.css', __FILE__ ).

Étape n°2 – Création d’une feuille de styles CSS

Placez donc ce fichier dans un dossier /css du répertoire de votre thème enfant – bien que vous puissiez également le placer à la racine du thème en modifiant le chemin aux deux endroits où il figure dans le code.

Pour composer votre feuille, il nous faut identifier les règles à insérer pour qu’elles surpassent les styles par défaut.

Le plus commode consiste à utiliser les outils de développement de votre navigateur, généralement accessibles via la touche F12 : ils permettent d’inspecter chaque élément du back office pour voir les sélecteurs CSS et les règles qui s’y appliquent, et de tester vos modifications en direct avant de les reporter dans votre fichier.

Vous pouvez par exemple modifier la couleur des liens qui donne tout de suite une nouvelle donne visuelle au back office.

Cet exemple colore en violet les liens de la zone principale des écrans d’administration, sans toucher au menu latéral :

/* Change the link color in the admin screens */
#wpbody-content a {
	color: #8224e3;
}

N’oubliez pas de sauvegarder votre fichier CSS pour appliquer les changements.

Si vous voulez seulement changer les couleurs du menu latéral et de la barre d’administration, le réglage Jeu de couleurs de l’administration de Comptes > Profil propose déjà plusieurs palettes, sans code, pour votre compte.

Styler le contenu de l’éditeur de blocs

Votre feuille admin.css s’applique aussi à l’interface de l’éditeur de blocs (barre d’outils, panneaux latéraux), mais pas au contenu que vous rédigez : depuis WordPress 7.1, celui-ci est toujours affiché dans un cadre séparé (iframe), qui ne reçoit pas cette feuille. Seule exception, par compatibilité : une feuille qui contient un sélecteur .editor-styles-wrapper ou .wp-block y est recopiée, avec un avertissement dans la console du navigateur.

Pour mettre en forme ce contenu, ajoutez plutôt une feuille dédiée avec la fonction add_editor_style(), toujours dans le fichier functions.php de votre thème enfant :

/**
 * Style the content of the block editor with the child theme's editor.css file.
 */
function wpc_editor_styles() {
	add_theme_support( 'editor-styles' );
	add_editor_style( 'css/editor.css' );
}
add_action( 'after_setup_theme', 'wpc_editor_styles' );

Créez ensuite le fichier editor.css dans le même dossier css : WordPress l’applique à la zone de contenu de l’éditeur. La ligne add_theme_support( 'editor-styles' ) est indispensable avec un thème classique, un thème à blocs activant ce support automatiquement. Enfin, pour une feuille réservée à l’interface de l’éditeur, sans effet sur les autres écrans de l’administration, utilisez le crochet enqueue_block_editor_assets à la place de admin_enqueue_scripts.

Cette technique est similaire aux tutoriels concernant l’insertion d’un logo personnalisé dans la zone de connexion ou encore l’ajout d’icônes à vos contenus personnalisés. Faites-en bon usage !

Pour personnaliser encore le back-office, voyez comment modifier le pied de page de l’administration.