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

A l’aide de votre client FTP favori, localisez le fichier functions.php puis insérez la fonction suivante :

function admin_css() {

$admin_handle = 'admin_css';
$admin_stylesheet = get_template_directory_uri() . '/css/admin.css';

wp_enqueue_style( $admin_handle, $admin_stylesheet );
}
add_action('admin_print_styles', 'admin_css', 11 );

La 3e ligne indique le chemin d’un fichier admin.css. Il nous faut donc créer un tel fichier à l’aide de votre éditeur de texte favori – Notepad++, Coda, etc.

É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 – bien que vous puissiez également le placer à la racine du thème en modifiant le chemin 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 l’extension Firebug pour le navigateur Firefox bien que tous les autres disposent également d’outils de développement – généralement accessibles via la touche F12.

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

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

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 !

32 commentaires

  1. PtitLoop

    Ce serait sympa de nous mettre quelques exemples téléchargeables qui nous serviraient de base de travail et que l’on pourrait modifier à notre guise..

    1. Cybercraft

      Eventuellement, je peux lister les grandes classes CSS du back-end dans un autre tuto en corrélation avec celui-ci.

      Qu’en penses-tu Aurélien ?

  2. Sebastien

    Bonjour,

    Puisqu’on parle des css du backoffice.
    Est-ce qu’il y a une technique pour différencier les styles en fonction du type de contenu (sur des custom Type).
    Je parle ici des css du fichier editor-style.css et non de l’apparence global du BO.

    Merci.

  3. Kapoué

    Nickel ! Je me demande pourquoi le CSS du front et du back est séparé et que l’on soit obligé de passer par une function pour avoir droit au CSS ? Bref, ça fonctionne parfaitement, comme d’hab. Merci

  4. Marie

    Bonjour,

    Je souhaiterais, non pas changer le CSS de tout mon site, mais uniquement celui d’une page, qui me servirait de page d’accueil. Il ne s’agirait pas de changer des couleurs ou ce genre de choses, mais de faire une mise en page en positionnant 9 blocs (3 blocs par ligne, sur 3 lignes donc), contenant chacun soit une image, soit un bouton facebook, soit un player mp3.

    J’arrive très bien à le faire en installant tout ça dans un tableau, mais il paraît que ce n’est pas bien de passer par cette méthode.
    Est-ce faisable de rajouter toutes ces infos dans ma feuille de style WP ?

    Merci pour votre aide !
    Marie

    1. Philippe

      Bonjour @Marie , en effet les tableaux sont de moins en moins de bonnes pratiques en html/css. Pour faire le design en bloc, je te conseille le framework css 960gs. Il permet de quadriller et disposer tes blocs sur une grille avec des « height » augmentant suivant la classe la grille. Par exemple, pour une grille de 12, les classes grid_3 (vide) + grid_6 (logo par exemple) + grid_3(vide aussi) permettrait de centrer un logo. Le site : http://960.gs/

  5. david

    Je souhaite savoir s’il est possible d’ajouter différentes feuilles de style( CSS) pour les différents navigateurs (IE ,Moz,safari..) sous wordpress ? ( thème twenty-ten)
    j’ai des gros probleme d’incompatibilité , » je galerrr grave !:p »
    merci .
    cdt.

  6. Comment personnaliser la zone Administration de WordPress | WEB 2 KECH Blog

    […] qui s’appliquera directement dans votre panneau d’administration pour un CMS 100% sur-mesure Lien vers l’article Tweet POSTED IN » Non […]

  7. digne

    bonjour mes pages ne sont pas liées à mes catégories comment peut on faire. De plus, lorsque je poste un article écris dans ma pagination de thème il n’y a pas de possibilités de hashtag… comment faire je suis perdu, j ai le thème megazine

  8. luna

    Bonjour,
    Je suis en train de tester cette technique sur un theme enfant, mais il ne lit pas la feuille css. Est ce normal? Dois-je ajouter d’autres lignes de code?

  9. Alain Barberis

    Bonjour Aurélien
    Je viens de lire et mettre en pratique ce post.
    C’est plus que parfait.
    Cet article, sauf erreur de ma part, ne concerne que le rôle Administrateur.
    J’ai créé un rôle « Ouvreur » avec un plug et je voudrais bien que toutes mes modifications du back office ne concerne que ce rôle.
    Question : que dois je mettre dans le function.php pour que le fichier css ne concerne que le rôle ouvreur.
    Je ne connais rien en prog et je fais tout en piquant des bouts de lignes de commande sur la toile.
    Si tu pouvais m’aider un peu, cela serait nickel.
    Merci

Laisser un commentaire

Thèmes & Plugins
Premium By WP Channel

WP Alacarte propose des produits et services de qualité
made in France pour la plateforme WordPress.

Tout est prêt pour créer votre site à la carte !

  • Thèmes et extensions premium
  • Facilité d’utilisation garantie
  • Temps de chargement optimisé
  • Personnalisation avancée
Découvrir

Rejoignez la communauté WordPress !

Faites partie de l’aventure en devenant membre d’une association WordPress. Conférences, ateliers, BarCamp, WordCamp… Venez
partager votre passion pour WordPress !

Aurélien DENIS,
président des associations WordPress Francophone et WPMX