Si vous êtes un concepteur de thèmes WordPress en herbe, la maîtrise des CSS est essentielle pour déverrouiller un plus grand contrôle, une meilleure personnalisation et une plus grande efficacité dans votre flux de travail.
Heureusement, WordPress ajoute automatiquement des classes CSS que vous pouvez utiliser dans vos thèmes. Plusieurs de ces classes CSS sont automatiquement ajoutées à la section <body> de chaque page d’un site WordPress.
Dans cet article, nous allons expliquer la classe de corps WordPress. Nous partagerons également des astuces pour utiliser les classes de corps WordPress, issues de plusieurs années d’expérience dans le développement de thèmes, afin de vous aider à améliorer vos projets.
Voici un bref aperçu de ce que vous apprendrez dans cet article.
- What is WordPress Body Class?
- When to Use the WordPress Body Class
- How to Add Custom Body Classes
- Adding Body Class Using a WordPress Plugin
- Using Conditional Tags with the Body Class
- Other Examples of Dynamically Adding Custom Body Classes
- Browser Detection and Browser Specific Body Classes
- Expert Guides on WordPress Theme Design
Qu’est-ce que la classe WordPress ?
Body class (body_class) est une fonction de WordPress qui vous permet d’assigner des classes CSS à l’élément body.
La balise HTML body commence normalement dans le fichier header.php d’un thème, qui se charge sur chaque page. Cela vous permet de déterminer de manière dynamique quelle page est vue par un compte et d’ajouter les classes CSS en conséquence.
Normalement, la plupart des thèmes et frameworks » starter » incluent déjà la fonction body class à l’intérieur de l’identifiant HTML body. Toutefois, si votre thème n’en dispose pas, vous pouvez l’ajouter en modifiant la balise body comme suit :
<body <?php body_class($class); ?>>
En fonction du type de page affichée, WordPress ajoute automatiquement les classes appropriées.
Par exemple, si vous êtes sur une page d’archives, WordPress ajoutera automatiquement la classe archive à l’élément body. Il le fait pour à peu près toutes les pages.
Similaire : Découvrez les coulisses de WordPress (infographie).
Voici quelques exemples de modules courants que WordPress peut ajouter, en fonction de la page affichée :
.rtl {}
.home {}
.blog {}
.archive {}
.date {}
.search {}
.paged {}
.attachment {}
.error404 {}
.single postid-(id) {}
.attachmentid-(id) {}
.attachment-(mime-type) {}
.author {}
.author-(user_nicename) {}
.category {}
.category-(slug) {}
.tag {}
.tag-(slug) {}
.page-parent {}
.page-child parent-pageid-(id) {}
.page-template page-template-(template file name) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(page number) {}
.single-paged-(page number) {}
.page-paged-(page number) {}
.category-paged-(page number) {}
.tag-paged-(page number) {}
.date-paged-(page number) {}
.author-paged-(page number) {}
.search-paged-(page number) {}
Comme vous pouvez le constater, en disposant d’une ressource aussi puissante, vous pouvez entièrement personnaliser votre page WordPress en utilisant uniquement le CSS. Vous pouvez personnaliser des pages de profil d’auteur/autrice spécifiques, des archives par date, etc.
Ceci étant dit, voyons maintenant comment et quand utiliser la classe body.
Quand utiliser la classe de corps WordPress
Tout d’abord, vous devez vous assurer que l’élément body de votre thème contient la fonction body class comme affiché ci-dessus. Si c’est le cas, il inclura automatiquement toutes les classes CSS générées par WordPress mentionnées ci-dessus.
Ensuite, 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’une auteur/autrice spécifique classés dans une catégorie spécifique.
Comment ajouter des classes de personnalisation ?
WordPress dispose d’un filtre que vous pouvez utiliser pour ajouter des clients/clientes personnalisés lorsque cela est nécessaire. Nous allons vous montrer comment ajouter une classe de corps à l’aide du filtre avant d’afficher le scénario d’utilisation spécifique afin que tout le monde soit sur la même page.
Les classes de corps étant spécifiques à un thème, vous devrez ajouter le code suivant au fichier functions.php de votre thème ou dans une extension d’extraits de code.
function my_class_names($classes) {
// add 'class-name' to the $classes array
$classes[] = 'wpb-class';
// return the $classes array
return $classes;
}
//Now add test class to the filter
add_filter('body_class','my_class_names');
Le code ci-dessus ajoutera une classe « wpb-class » à l’identifiant « body » de chaque page de votre site.
Nous vous recommandons d’ajouter ce code avec WPCode, la meilleure extension d’extraits de code sur le marché. Il permet d’ajouter facilement et en toute sécurité du code personnalisé dans WordPress sans modifier le fichier functions.php de votre thème.
Tout d’abord, vous devez installer et activer l’extension gratuite WPCode. Si vous avez besoin d’instructions, consultez notre guide sur l’installation d’une extension WordPress.
Une fois le plugin activé, rendez-vous dans la rubrique Code Snippets « Add Snippet depuis votre tableau de bord WordPress. Trouvez ensuite l’option » Add Your Custom Code (New Snippet) » et cliquez sur le bouton » Use snippet » situé en dessous.
À partir de là, vous devez choisir « PHP extrait de code » comme type de code dans la liste des options qui s’affichent à l’écran.
Ensuite, ajoutez un titre à votre extrait et collez le code ci-dessus dans la case « Prévisualisation du code ».
Ensuite, il suffit de permuter le commutateur de « Inactif » à « Actif » et de cliquer sur le bouton « Enregistrer l’extrait ».
Vous pouvez désormais utiliser cette classe CSS directement dans la feuille de style de votre thème. Si vous travaillez sur votre propre site, vous pouvez également ajouter le CSS à l’aide de la fonctionnalité CSS personnalisé dans le personnalisateur de thème WordPress.
Pour plus de détails, consultez notre guide sur la façon d’ajouter facilement des CSS personnalisés à votre site WordPress.
Ajout d’une classe de corps à l’aide d’une extension WordPress
Si vous ne travaillez pas sur un projet client et que vous ne souhaitez pas écrire de code, cette méthode vous conviendra mieux.
La première chose à faire est d’installer et d’activer l’extension Custom Body Class. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.
Une fois activé, vous devez vous rendre sur la page Réglages » Custom Body Class. À partir de là, vous pouvez définir les paramètres de l’extension.
Vous pouvez sélectionner les types de publication dans lesquels vous souhaitez activer la fonctionnalité de classe de corps et les personnes qui peuvent y accéder. N’oubliez pas de cliquer sur le bouton « Enregistrer les modifications » pour stocker vos réglages.
Vous pouvez ensuite modifier n’importe quelle publication ou page de votre site WordPress. Sur l’écran de modification de l’article, vous trouverez une nouvelle boîte de méta dans la colonne de droite libellé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 publication. L’extension ajoutera alors vos classes CSS personnalisées à la classe body pour cette publication ou page particulière.
Utilisation de balises conditionnelles avec la classe Body
La fonction body_class prend tout son sens lorsqu’elle est utilisée avec les balises conditionnelles.
Ces identifications 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/développeuses 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.
Voyons quelques exemples d’utilisation de balise conditionnelle pour ajouter des classes personnalisées à la classe body.
Disons que vous voulez styliser votre page d’accueil différemment pour les utilisateurs/utilisatrices connectés ayant le rôle d’auteur/autrice. Alors que WordPress génère automatiquement une classe .home et .logged-in, il ne détecte pas le rôle du compte de l’utilisateur et ne l’ajoute pas en tant que classe.
Il s’agit d’un scénario dans lequel vous pouvez utiliser les identifications conditionnelles avec du code personnalisé pour ajouter dynamiquement une classe personnalisée à la classe du corps.
Pour ce faire, vous devez ajouter le code abonné au fichier functions.php de votre thème ou à l’extension d’extraits de code.
function wpb_loggedin_user_role_class($classes) {
// let's check if it is homepage
if ( is_home() ) {
// Now let's check if the logged in user has author user role.
$user = wp_get_current_user();
if ( in_array( 'author', (array) $user->roles ) ) {
//The user has the "author" role
// Add user role to the body class
$classes[] = 'author';
// Return the classes array
return $classes;
}
} else {
// if it is not homepage, then just return default classes
return $classes;
}
}
add_filter('body_class', 'wpb_loggedin_user_role_class');
Voyons maintenant un autre exemple utile. Cette fois, nous allons vérifier si la page affichée est une Prévisualisation d’un brouillon WordPress.
Pour ce faire, nous utiliserons la balise conditionnelle is_preview, puis nous ajouterons notre classe CSS personnalisée.
function add_preview_class($classes) {
if ( is_preview() ) {
$classes[] = 'preview-mode';
return $classes;
}
return $classes;
}
add_filter('body_class','add_preview_class');
Nous allons maintenant 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.
.preview-mode .site-header:before {
content:'preview mode';
color:#FFF;
background-color:#ff0000;
}
Voici à quoi cela ressemble sur notre site de démonstration :
Vous pouvez 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 clients/clientes personnalisés
Outre les balises conditionnelles, vous pouvez également utiliser d’autres techniques pour récupérer des informations dans la base de données de WordPress et créer des classes CSS personnalisées pour la classe body.
Ajout de noms de catégories à la classe body d’une page de publication unique
Imaginons que vous souhaitiez personnaliser l’Apparence des publications uniques en fonction de la catégorie dans laquelle elles sont classées. Vous pouvez utiliser la classe body pour y parvenir
Tout d’abord, vous devez ajouter les noms de catégories 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 ou à une extension d’extraits de code comme WPCode:
// add category nicenames in body class
function category_id_class($classes) {
global $post;
foreach((get_the_category($post->ID)) as $category)
$classes[] = $category->category_nicename;
return $classes;
}
add_filter('body_class', 'category_id_class');
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 les classes CSS pour la styliser comme vous le souhaitez.
Ajouté le slug de la page à la classe body
Collez le code suivant dans le fichier functions.php de votre thème ou dans une extension d’extraits de code :
//Page Slug Body Class
function add_slug_body_class( $classes ) {
global $post;
if ( isset( $post ) ) {
$classes[] = $post->post_type . '-' . $post->post_name;
}
return $classes;
}
add_filter( 'body_class', 'add_slug_body_class' );
Là encore, nous vous recommandons d’ajouter ce code dans WordPress à l’aide d’une extension d’extraits de code comme WPCode. Ainsi, vous n’aurez pas à craindre de casser votre site.
Commencez par installer et activer l’extension gratuite WPCode. Si vous avez besoin d’aide, suivez ce guide sur l ‘installation d’une extension WordPress.
Une fois l’extension activée, rendez-vous dans la rubrique Code Snippets « Add Snippet depuis le tableau de bord WordPress. Ensuite, cliquez sur le bouton » Utiliser l’extrait » sous l’option » Ajouter votre code personnalisé (nouvel extrait) « .
Sélectionné ensuite « Extrait de code PHP » comme type de code.
Il vous suffit ensuite d’ajouter un titre à votre extrait de code et de coller le code ci-dessus dans le champ « Prévisualisation du code ».
Dernier point, permutez le commutateur de « Inactif » à « Actif » et cliquez sur le bouton « Enregistrer l’extrait ».
Détection des navigateurs et classes de corps spécifiques aux navigateurs
Il peut arriver que votre thème ait besoin de CSS supplémentaires pour un navigateur particulier.
La bonne nouvelle, c’est que WordPress détecte automatiquement le navigateur au chargement et stocke temporairement cette information dans une 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.
Il suffit de copier et de coller le code suivant dans le fichier functions.php de votre thème ou dans l’extension d’extraits de code :
function wpb_browser_body_class($classes) {
global $is_iphone, $is_chrome, $is_safari, $is_NS4, $is_opera, $is_macIE, $is_winIE, $is_gecko, $is_lynx, $is_IE, $is_edge;
if ($is_iphone) $classes[] ='iphone-safari';
elseif ($is_chrome) $classes[] ='google-chrome';
elseif ($is_safari) $classes[] ='safari';
elseif ($is_NS4) $classes[] ='netscape';
elseif ($is_opera) $classes[] ='opera';
elseif ($is_macIE) $classes[] ='mac-ie';
elseif ($is_winIE) $classes[] ='windows-ie';
elseif ($is_gecko) $classes[] ='firefox';
elseif ($is_lynx) $classes[] ='lynx';
elseif ($is_IE) $classes[] ='internet-explorer';
elseif ($is_edge) $classes[] ='ms-edge';
else $classes[] = 'unknown';
return $classes;
}
add_filter('body_class','wpb_browser_body_class');
Vous pouvez alors utiliser des classes comme :
.ms-edge .navigation {some item goes here}
S’il s’agit d’un petit problème de marge interne ou externe, il est assez facile de le corriger.
Il y a certainement beaucoup plus de scénarios où l’utilisation de la fonction body_class peut vous enregistrer de longues lignes de code. Par exemple, si vous utilisez un cadre de thème comme Genesis, alors 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 des colonnes latérales, les en-têtes et les pieds de page, etc.
Guides d’experts sur la conception de thèmes WordPress
Vous cherchez d’autres tutoriels ? Consultez nos autres guides sur la conception de thèmes sous WordPress :
- Comment ajouter un effet de parallaxe à n’importe quel thème WordPress
- Comment modifier le pied de page dans WordPress (4 façons)
- Comment ajouter des flocons de neige tombants dans votre blog WordPress
- Comment mettre à jour un thème WordPress sans perdre sa personnalisation ?
- Comment obtenir un retour sur la conception d’un site sous WordPress
Nous espérons que cet article vous a aidé à apprendre à utiliser la classe body de WordPress dans vos thèmes. Vous pouvez également consulter notre article sur la façon de styliser chaque publication WordPress différemment, et notre comparaison des meilleurs plugins de constructeur de page WordPress.
Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
jenny
plsss give me example outwitting a crocodile theme plsssssssss
Corrinda
Thank you after reading a number of articles regarding the body-class this is the one the finally sunk in.
Got it working on individual pages and on category pages this is great. The use cases are what made the difference for me.
Editorial Staff
Sweet. Glad to be able to help.
Administrateur
Yolanda
Great tips! I’m trying to figure out how to add the menu class (the one you can enter in the admin) to body_class:
[pre]
/** Add nav menu css class to body class */
function add_nav_menu_css( $classes ) {
$classes[] = ‘menu-class-from-admin’;
return $classes;
}
add_filter( ‘body_class’, ‘add_nav_menu_css’ );
[/pre]
Seth Burleigh
Great tips. I »m trying to do this, and when inserting « page-template page-template-(template file name) » into my header file such that I have:
<body >
And I then modify my CSS to include: .page-template-home_corechella
I am left with a completely blank page. Nothing. What am I doing wrong? Thanks!
Editorial Staff
The page-templates are added in the homepage automatically as long as you have the body_class tags. Would have to see the file to see what you are doing wrong. Use a third party service like pastebin, and then paste the link here.
Administrateur
Seth
Ok, thank you very much!
I’ve changed the approach slightly since my post (now using instead of page template), but a similar problem is happening – the correct body CSS (body.corechella) is not showing. The original body class is taking priority.
Corechella Page template (http://dev.corebaby.org/corechella-home/) – http://pastebin.com/embed_js.php?i=8L6rhESr
Corechella header.php file – http://pastebin.com/embed_js.php?i=n2Sn4jUJ
CSS (the new body class is at the very bottom) – http://pastebin.com/embed_js.php?i=4U6d09cQ »
Seth
Editorial Staff
In your header.php, you have to keep the body class like this:
1-click Use in WordPress
In your CSS, just use .corchella instead of body.corchella
Michael
Great write up, thanks
Editorial Staff
Glad you found it helpful
Administrateur
Rasha
i have news page that get posts using category.php , i want to give it specific class so i can make the content wide and without the sidebar , how i can do that ?
Vajrasar
Indeed a good writeup and very informative. Just a question – For example if I add Browser Specific Body Class today and after few days I need to apply Page Class in Body Slug. Then will the settings/css that I did with Browser Specific Body class will get ruined or not?
Editorial Staff
No it will not get ruined. It can be overridden depending on how your CSS is written.
Administrateur