Afficher les class sur le body de la page WordPress, attention astuce indispensable !

Aujourd’hui je vous présente une astuce pour wordpress que tout le monde ne connait pas forcement et qui est d’une utilité primordiale.

Vous allez pouvoir cibler très précisément les pages à modifier dans le css. En effet, WordPress va vous afficher dans le code les class utilisées par la plateforme pour afficher vos pages. Cela n’est pas très explicite pour vous ? Un exemple vaut mille fois de beaux discours… voici mon exemple :

Je veux modifier le css de mon template de page wordpress

Vous venez de créer un fichier template d’une page nouvellement créé et vous ne souhaitez pas renommer toutes vos balises html… gain de temps est égal gain d’argent et nous, développeurs, avons très souvent peu de temps 😉

Voici donc le code wordpress pour avoir toutes les class sur la balise body :

<body <?php body_class(); ?> >

Maintenant, vous allez me posez la question suivante :

Comment j’analyse le code de ma page wordpress ?

Uploadez votre fichier et ensuite regardez le code avec votre outil de développement web habituel, pour ma part j’utilise l’excellent Firebug pour mon navigateur Firefox Mozilla.

Analysez votre page et vous verrez le code nouvellement affiché. Pour ma part, j’ai le code suivant :

<body class= »home page page-id-2 page-template page-template-index-php »>

Étudions ensemble les class générées. La première class « home » est généré quand vous êtes sur la page d’accueil de wordpress, « page » vous signifie que vous êtes sur une page (« merci du renseignement ! », « page-id-2 » vous donne l’identifiant de la page que vous pourrez ainsi ciblé très précisément dans votre code, « page-template » vous informe que vous êtes sur un template de page et la dernière class vous informe du dit template.

Avec toutes ces informations vous pourrez manipuler l’html des pages, articles et catégories d’une grande simplicité.

 

– Alors on dit quoi ?

– Merci Cédric

– De rien 😉