Ajouter de nouvelles palettes de couleurs à l’admin MP6 WordPress

Avec l’intégration de l’interface MP6 depuis la version 3.8 de WordPress, l’administration de notre CMS préféré se modernise et bénéficie d’une ergonomie améliorée. Ce rafraîchissement visuel inclût, par défaut, 8 combinaisons de couleurs afin d’adapter l’interface visuelle au goût de chacun. Mais saviez-vous qu’une simple fonction et un peu de CSS vous permettent d’enregistrer d’autres palettes de couleurs pour ainsi modifier le color scheme de l’administration MP6 WordPress ?

Dans le cadre de la création d’un site Internet WordPress, il est intéressant de personnaliser au maximum l’expérience utilisateur et offrir une charte graphique différente dans les pages d’administration. Depuis WordPress 3.8, la nouvelle interface (au doux nom de MP6) propose, en plus d’une mise en page responsive, un flat design aux couleurs tranchées ; sur la page utilisateur, il est également possible de choisir parmi 8 thèmes de couleurs pour modifier l’ambiance du back-end de WordPress.

Comment ajouter d’autres choix de thèmes de couleurs dans l’administration WordPress MP6 ?

En fait, proposer une nouvelle palette de couleurs via votre thème ou plugin WordPress consiste en 2 étapes : il faut tout d’abord indiquer à WordPress l’existence de votre nouvelle palette, via une fonction, puis créer le fichier CSS contenant les styles CSS de cette nouvelle combinaison de couleurs.

La fonction wp_admin_css_color()

La fonction qui nous permet d’ajouter de nouvelles palettes de couleurs au back-end WordPress existe depuis la version 2.5 du CMS : il était auparavant également possible d’ajouter de nouvelles combinaisons de couleurs et les profils utilisateurs présentaient en effet une option pour un back-end grisé ou bleuté. Cette fonction est wp_admin_css_color() et accepte 5 paramètres :

wp_admin_css_color( $key, $name, $url, $colors, $icons );

1. $key : un identifiant unique
2. $name : le nom qui sera affiché sur la page utilisateurs dans la section Couleurs de l’interface d’administration
3. $url : le lien vers le fichier CSS de la nouvelle palette de couleurs back-end à ajouter
4. $colors : une array de couleurs hexadécimales qui seront présentées à l’utilisateur dans la section Couleurs de l’interface d’administration pour donner une idée rapide de l’ambiance de couleurs
5. $icons : une array de couleurs hexadécimales utilisées pour colorer les icônes SVG

L’identifiant unique $key n’a pas beaucoup d’importance. $name, quant à lui, s’affichera en titre au dessus de la palette dans la liste des thèmes de couleurs. $url indique le chemin vers le fichier CSS à charger si cette palette est sélectionnée par l’utilisateur. Notez que ce fichier est chargé immédiatement au clic sur le petit bloc de prévisualisation de couleurs.

Et le plus important : ce même petit bloc de prévisualisation des couleurs proposées à l’utilisateur seront celles que vous définirez dans le paramètre $colors. Vous pouvez définir autant de valeurs hexadécimales dans l’array, le bloc les affichera toutes. Petit exemple…

function msk_custom_admin_color_palette() {
  wp_admin_css_color(
    'msk-colors',
    __('Mosaika'),
    get_stylesheet_directory_uri() . '/library/css/admin/mosaika-blue/admin-style.css',
    array('#212432', '#2f3348', '#e69f23', '#79b75c'),
    array('#aa9d88', '#9ebaa0', '#738e96', '#f2fcff')
  );
}
add_action('admin_init', 'msk_custom_admin_color_palette');

… affichera une nouvelle option dans les choix de thèmes de couleurs …

… qui chargera dans l’admin le fichier de styles CSS placé, dans mon thème, dans /library/css/admin/mosaika-blue/admin-style.css.

Le SCSS/CSS de la nouvelle palette de couleurs du back-end

Bon, nous avons ajouté une nouvelle option de couleurs libre d’être sélectionné par l’utilisateur de votre site. Maintenant, il nous reste à générer un joli fichier CSS (défini dans le paramètre $url précédemment) afin de styliser l’administration WordPress.

La version la plus évidente consisterait à inspecter le DOM du back-end WordPress et écrire une belle stylisation CSS maison dans votre fichier. Logique, efficace… mais plutôt fastidieux.

L’autre solution vous plaira : avec le remaniement visuel engendré par MP6, WordPress étend la flexibilité d’ajout de palettes d’admin en couplant cette fonction wp_admin_css_color() avec la simplicité du SASS. Ainsi, en éditant quelques variables de couleurs, il devient très aisé de modifier tout l’univers colorimétrique du back-end WordPress.

La marche à suivre nécessite 3 petites étapes :

1. dans le core de votre installation WordPress, copiez les fichiers _admin.scss, _mixins.css et _variables.scss situés dans /wp-admin/css/colors/ dans le dossier (de votre thème ou plugin) défini ci-dessus dans le paramètre $url. Ces fichiers sont les SCSS qui vont faire tout le travail pour vous.
2. dans le dossier supérieur (/wp-admin/css/), copiez le fichier colors.css dans votre dossier et renommez-le en _colors.scss. C’est en fait la base, la stylisation par défaut sur laquelle nous viendrons écraser certaines valeurs.
3. enfin, copiez ce fichier admin-style.scss dans votre dossier et corrigez-y les chemins des 2 @import vers _colors.scss et _admin.scss. J’ai regroupé dans ce fichier toutes les variables existantes et leur conséquence visuelle dans l’admin afin de faciliter à chacun la personnalisation des couleurs du back-end WordPress.

Je vous conseille de placer les fichiers @importés (_admin/_colors/_mixins/_variables.scss) dans un dossier supérieur par rapport à admin-style.scss ; ainsi, vous pourrez créer plusieurs nouvelles palettes dans un même thème ou plugin sans avoir à dupliquer ces 4 fichiers @importés pour chacun (cf structure ci-dessous).

Compliqué ? Pas tant que ça, et l’avantage est grand : en éditant les quelques variables de couleurs dans votre fichier admin-style.scss, la magie du SASS génèrera un complexe fichier CSS pour créer une admin à vos couleurs, juste avec quelques lignes de code éditées ! C’est pas beau ça ?

Et cerise sur le gâteau, retrouvez dans le tableau ci-dessous les correspondances entre les variables et leurs éléments stylisés dans l’admin…

Définir votre nouvelle palette de couleurs comme palette par défaut

Une fois votre nouveau thème de couleurs de back-end WordPress créé, il est très simple de le définir comme palette par défaut pour les nouveaux utilisateurs qui s’inscrivent sur votre site. Analysons le code ci-dessous …

function msk_default_admin_color_palette($user_id) {
  $args = array(
    'ID' => $user_id,
    'admin_color' => 'msk-colors'
  );

  wp_update_user($args);
}
add_action('user_register', 'msk_default_admin_color_palette');

On utilise le hook/action user_register qui nous permet d’exécuter des fonctions une fois un utilisateur fraichement enregistré. Il suffit donc de modifier l’option admin_color (la fameuse palette des couleurs de l’administration) par la valeur de $key définie précédemment lors de l’enregistrement de votre thème couleurs avec wp_admin_css_color().

Bonus : où trouver de jolies palettes de couleurs ?

Je vous conseille les deux excellents ColourLovers et Kuler d’Adobe afin de trouver facilement des combinaisons de couleurs intéressantes pour créer une admin à votre image.

Faites-nous alors partager vos back-end WordPress bariolés en commentaires !