Comment ajouter des body_class dans votre site WordPress

Êtes-vous un futur concepteur de thèmes WordPress à la recherche de nouvelles façons d’utiliser CSS pour votre travail ? Heureusement, WordPress ajoute automatiquement des classes CSS que vous pouvez utiliser dans vos thèmes. Plusieurs de ces classes CSS sont ajoutées aux sections  de chaque page ! Dans cet article, nous vous expliquions la classe de corps WordPress avec des trucs et astuces pour les concepteurs de thèmes en herbe pour les utiliser dans leurs projets.

Qu’est-ce que le body\_class dans WordPress ?

Body class (body\_class) est une fonction WordPress qui vous permet d’attribuer des classes CSS à l’élément body. La balise de corps HTML commence normalement dans le fichier header.php d’un thème, qui se charge sur chaque page.

Cela vous permet de déterminer dynamiquement la page qu’un utilisateur consulte, puis d’ajouter les classes CSS en conséquence. Normalement, la plupart des thèmes et frameworks de démarrage incluent déjà la fonction de classe body dans la balise body HTML.

Cependant, si votre thème ne l’a pas, vous pouvez l’ajouter en modifiant la balise body comme ceci:

En fonction du type de page affichée, WordPress ajoute automatiquement les classes appropriées.

Par exemple, si vous êtes sur une page d’archive, WordPress ajoutera automatiquement une classe d’archive à l’élément body. Il le fait pour à peu près toutes les pages. Voici quelques exemples de classes courantes que WordPress pourrait ajouter, en fonction de la page affichée:

Comme vous pouvez le voir, en ayant une ressource aussi puissante à portée de main, vous pouvez entièrement personnaliser votre page WordPress en utilisant uniquement CSS. Vous pouvez personnaliser des pages de profil d’auteur spécifiques, des archives basées sur la date, etc.

Quand utiliser la body\_class WordPress

Tout d’abord, vous devez vous assurer que l’élément body de votre thème contient la fonction de classe body, comme indiqué ci-dessus. Si c’est le cas, il inclura automatiquement toutes les classes CSS générées par WordPress mentionnées ci-dessus.

Après cela, vous pourrez également ajouter vos propres classes CSS personnalisées à l’élément body. Vous pouvez ajouter ces classes chaque fois que vous en avez besoin. Par exemple, si vous souhaitez modifier l’apparence des articles d’un auteur spécifique classés dans une catégorie spécifique.

Comment ajouter des body\_class personnalisées

WordPress dispose d’un filtre que vous pouvez utiliser pour ajouter des body\_class personnalisées en cas de besoin. Nous allons vous montrer comment ajouter une classe de corps à l’aide du filtre avant de vous montrer le scénario de cas d’utilisation spécifique afin que tout le monde puisse être sur la même page.

Étant donné que les classes de corps sont spécifiques à un thème, vous devez ajouter le code suivant au fichier functions.php de votre thème.

Le code ci-dessus ajoutera une classe «wpb-class» à la balise body sur chaque page de votre site Web. Ce n’est pas si mal, non?

Vous pouvez maintenant utiliser cette classe CSS directement dans la feuille de style de votre thème. Si vous travaillez sur votre propre site Web, vous pouvez également ajouter le CSS à l’aide de la fonctionnalité CSS personnalisée dans le personnalisateur de thème.

Ajouter une body\_class à l’aide d’un plugin WordPress

Si vous ne travaillez pas sur un projet client et que vous ne souhaitez pas écrire de code, cette méthode serait plus simple pour vous. La première chose à faire est d’installer et d’activer le plugin Custom Body Class.

Lors de l’activation, vous devez visiter Paramètres »Classe corporelle personnalisée. De là, vous pouvez configurer les paramètres du plugin. Vous pouvez sélectionner les types de publication pour lesquels vous souhaitez activer la fonction de classe de corps et qui peut y accéder.

N’oubliez pas de cliquer sur le bouton Enregistrer les modifications pour enregistrer vos paramètres. Ensuite, vous pouvez vous diriger pour modifier n’importe quel article ou page sur votre site WordPress. Sur l’écran d’édition de publication, vous trouverez une nouvelle méta-boîte dans la colonne de droite intitulée «Post Classes».

Cliquez pour ajouter vos classes CSS personnalisées. Vous pouvez ajouter plusieurs classes séparées par un espace. Une fois que vous avez terminé, vous pouvez simplement enregistrer ou publier votre message. Le plugin ajoutera maintenant vos classes CSS personnalisées à la classe body pour cet article ou cette page en particulier.

Utilisation de balises conditionnelles avec la body\_class

La vraie puissance de la fonction body\_class vient lorsqu’elle est utilisée avec les balises conditionnelles. Ces balises conditionnelles sont des types de données vrai ou faux qui vérifient si une condition est vraie ou fausse dans WordPress.

Par exemple, la balise conditionnelle is_home vérifie si la page actuellement affichée est la page d’accueil ou non. Cela permet aux développeurs de thèmes de vérifier si une condition est vraie ou fausse avant d’ajouter une classe CSS personnalisée à la fonction body_class.

Jetons un coup d’œil à quelques exemples d’utilisation de balises conditionnelles pour ajouter des classes personnalisées à la classe body. Supposons que vous souhaitiez personnaliser votre page d’accueil pour les utilisateurs connectés avec le rôle d’utilisateur auteur.

Alors que WordPress génère automatiquement un .home et .logged-in classe, il ne détecte pas le rôle de l’utilisateur ni ne l’ajoute en tant que classe. À présent, il s’agit d’un scénario dans lequel vous pouvez utiliser les balises conditionnelles avec du code personnalisé pour ajouter dynamiquement une classe personnalisée à la classe body.

Pour ce faire, vous ajouterez le code suivant au fichier functions.php de votre thème.

Voyons maintenant un autre exemple utile. Cette fois, nous allons vérifier si la page affichée est un aperçu d’un brouillon WordPress.

Pour ce faire, nous utiliserons la balise conditionnelle is\_preview, puis ajouterons notre classe CSS personnalisée.

Maintenant, nous allons ajouter le CSS suivant à la feuille de style de notre thème pour utiliser la nouvelle classe CSS personnalisée que nous venons d’ajouter.

Vous voudrez peut-être consulter la liste complète des balises conditionnelles que vous pouvez utiliser dans WordPress. Cela vous donnera un ensemble pratique de balises prêtes à l’emploi pour votre code.

Autres exemples d’ajout dynamique de classes de corps personnalisées

Outre les balises conditionnelles, vous pouvez également utiliser d’autres techniques pour récupérer des informations de la base de données WordPress et créer des classes CSS personnalisées pour la classe body.

Ajout de noms de catégorie à la classe de corps d’une seule page de publication

Supposons que vous souhaitiez personnaliser l’apparence des messages individuels en fonction de la catégorie dans laquelle ils sont classés. Vous pouvez utiliser la classe body pour y parvenir

Tout d’abord, vous devez ajouter des noms de catégorie en tant que classe CSS sur les pages de publication unique. Pour ce faire, ajoutez le code suivant au fichier functions.php de votre thème:

Le code ci-dessus ajoutera la classe de catégorie dans votre classe de corps pour les pages de publication unique. Vous pouvez ensuite utiliser des classes CSS pour le styliser comme vous le souhaitez.

Ajout d’un slug de page à la classe de corps

Collez le code suivant dans le fichier functions.php de votre thème:

Détection du navigateur et classes de corps spécifiques au navigateur

Parfois, vous pouvez rencontrer des problèmes où votre thème peut avoir besoin de CSS supplémentaire pour un navigateur particulier. Maintenant, la bonne nouvelle est que WordPress détecte automatiquement le navigateur lors du chargement, puis stocke temporairement ces informations en tant que variable globale.

Il vous suffit de vérifier si WordPress a détecté un navigateur spécifique, puis de l’ajouter en tant que classe CSS personnalisée. Copiez et collez simplement le code suivant dans le fichier functions.php de votre thème:

Vous pouvez ensuite utiliser des classes comme:

S’il s’agit d’un petit problème de remplissage ou de marge, c’est un moyen assez simple de le résoudre.

Ajouter un body\_class à son site WordPress : notre conclusion

Il existe certainement de nombreux autres scénarios dans lesquels l’utilisation de la fonction body\_class peut vous éviter d’écrire de longues lignes de code. Par exemple, si vous utilisez un framework de thème tel que Genesis, vous pouvez l’utiliser pour ajouter des classes personnalisées dans votre thème enfant.

Vous pouvez utiliser la fonction body\_class pour ajouter des classes CSS pour les mises en page pleine largeur, le contenu de la barre latérale, l’en-tête et les pieds de page, etc. Nous espérons que cet article vous a aidé à apprendre à utiliser la classe de corps WordPress dans vos thèmes.

Nous avons également détaillé, dans plusieurs articles, les thématiques WordPress. Vous retrouverez certains de nos bons plans à travers des contenus, tels que les façons d’ajouter des articles en barre latérale ou comment publier des miniatures !