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 !
Podcast: Télécharger (239.8MB)
A propos de l'auteur
Aurélien Denis est le fondateur du projet WordPress Channel proposant tutoriels et podcasts librement téléchargeables. En 2010, il fonde Neticpro, une agence Web spécialisée WordPress. Il est aussi co-fondateur du site Protuts.net (tutoriels PC/Mac/Linux) et community manager pour l’Imagine Cup 2011/2012, une compétition mondiale organisée par Microsoft.
WordPress 3.5 – Un CMS pour créer et gérer blogs et sites Web
RT-Theme 17, traduction française
Maven Hosting, 12 mois d’hébergement
Themetick, traduction française
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..
Je manque sacrément de temps ces jours-ci… Je vais voir ce que je peux faire.
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 ?
Good idea !
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.
Je dirais oui mais je n’ai pas testé ce type de demande… donc à voir !
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
Ben parce que le contraire serait surprenant !
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
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/
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.
Généralement, les bugs surviennent sous IE… c’est pour cela que l’on utilise parfois des CSS dédié. Plus d’infos ici : http://en.wikipedia.org/wiki/Conditional_comment
Pour les autres, tu ne dois pas avoir de grosses différences. Si c’est le cas, ton CSS est pas mal codé.
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
Hum je pense que vous mélangez de multiples concepts… je vous invite à poser vos questions sur le forum de WordPress francophone.
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?
Oui il faut utiliser la fonction get_stylesheet_directory_uri à la place de get_template_directory_uri qui est prévue pour les thèmes enfants. Théoriquement, cela devrait fonctionner.
Wesh aurelien,
alors c’est quand que tu passe au ondar show
pour handidicap handi pas cap ?