Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPress Body Class 101 : Trucs et astuces pour les concepteurs de thèmes

Vous êtes un concepteur de thèmes WordPress en herbe et vous cherchez de nouvelles façons d’utiliser les CSS dans vos thèmes ?

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 expliquerons la classe de corps WordPress avec des astuces et des conseils pour que les aspirants concepteurs de thèmes puissent les utiliser dans leurs projets.

Using WordPress body class for theme development
Voici un bref aperçu de ce que vous apprendrez dans cet article.

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.

Add a new custom code snippet in WPCode

Ensuite, ajoutez un titre à votre extrait et collez le code ci-dessus dans le champ « Prévisualisation du code ». Vous devez également sélectionner « Extrait PHP » comme type de code dans le menu déroulant de droite.

Paste code into WPCode and select PHP snippet as code type

Ensuite, il suffit de permuter le commutateur de « Inactif » à « Actif » et de cliquer sur le bouton « Enregistrer l’extrait ».

Activate and save your custom code snippet

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.

Adding custom CSS in theme customizer

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.

Custom Body Class settings

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 ».

Adding body classes to a post in WordPress

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 :

Custom preview mode CSS class added to the body class

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) « .

Add a new custom code snippet in WPCode

Ensuite, il suffit de coller le code ci-dessus dans le champ « Prévisualisation du code » et de sélectionner « Extrait PHP » comme type de code dans le menu déroulant.

Paste code snippet into WPCode

Dernier point, permutez le commutateur de « Inactif » à « Actif » et cliquez sur le bouton « Enregistrer l’extrait ».

Activate and save your custom code snippet

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 :

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.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

14 commentairesLaisser une réponse

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. jenny

    plsss give me example outwitting a crocodile theme plsssssssss

  3. 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.

  4. 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]

  5. 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!

  6. 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 ?

  7. 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

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.