Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. WordPress

Manipuler les Classes Dans la Balise Body

by
Read Time:7 minsLanguages:

French (Français) translation by Willy Touomi (you can also view the original English article)

Dans ce court tutoriel, nous traiterons des classes dans la balise Body et nous verrons comment les manipuler en utilisant l'API de Wordpress.

Nous aborderons principalement les points suivants: ajouter des classes dans la balise Body, supprimer des classes dans la balise Body, ajouter des classes dans la balise Body suivant des conditions, et nous verrons aussi quelques cas d'utilisation.

L'attribut Class de Body: quels cas d'utilisation?

Sous Wordpress, l'attribut class de la balise Body contient une ou plusieurs classes css qui seront appliquées à la balise. Cela nous permet d'appliquer des styles uniques à différentes zones d'un site Wordpress, puisque les valeurs de l'attribut class peuvent être ajoutées conditionnellement.

Wordpress dispose déjà d'un certain nombre de classes pour la balise Body qui sont abordées dans l'article Travailler avec les Classes et les IDs générés par Wordpress.

Ajouter l'attribut "class" dans le Body

Wordpress dispose de quelques méthodes nous permettant d'ajouter des valeurs dans l'attribut class de Body. Dans la suite du tutoriel, nous verrons comment ajouter l'attribut class dans un thème Wordpress (habituellement dans header.php) en utilisant la fonction body_class et en utilisant un filtre.

Edition du thème : insérer une valeur dans l'attribut class

Cette méthode est vraiment simple et est utile si vous créez un thème. Le code suivant permet d'ajouter l'attribut class dans la balise Body:

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

Pour ajouter votre propre classe, vous pouvez passer un argument à la fonction comme suit:

<body <?php body_class( 'ma-classe' ); ?>>

Cela aura pour effet d'ajouter la valeur ma-classe dans l'attribut class de la balise Body sur toutes les pages du site.

Ajouter plusieurs classes dans le Body

Il arrive parfois que vous ayiez envie d'ajouter plus d'une classe dans le Body. Un tableau permet d'y parvenir:

Ainsi, toutes les classes du tableau sont passées à la fonction body_class.

Ajout conditionnel des classes dans le Body

Vous pourriez aussi avoir besoin d'ajouter une ou plusieurs classes selon des conditions. En utilisant un bout de code PHP, on y parvient aisément. L'exemple ci-dessous utilise la fonction WooCommerce is_shop:

<?php if ( is_shop() ) { body_class( 'boutique-woocommerce' ); } else { body_class(); } ?>

Note: WooCommerce ajoute déjà une classe en utilisant le même principe. Ceci n'est donc qu'un simple exemple.

Ce que le code ci-dessus fait c'est tout simplement de vérifier que la première fonction retourne true. Si la fonction retourne true, alors la valeur boutique-woocommerce est ajoutée à la class du Body; sinon, si la valeur retournée n'est pas true, les classes par défaut du Body sont affichées.

Ajouter une classe dans le Body via un filtre

Il est également possible d'utiliser un filtre Wordpress pour ajouter une classe dans le Body. Cette méthode permet de préserver la clarté du code utilisé pour le thème, et est particulièrement utile si vous souhaitez ajouter une classe à partir d'un plugin. Vous pouvez intégrer le code suivant soit dans le fichier functions.php du thème actuel, soit dans votre plugin.

Ce bout de code nous permet d'ajouter une classe (ou plusieurs, en fonction de votre implémentation) au tableau et de les retourner.

Ajouter plusieurs classes via un filtre

Pour ajouter plus de classe à travers le filtre, vous devez juste ajouter une autre valeur dans le tableau:

Ajout conditionné d'une classe via un filtre

Les conditions peuvent aussi être utilisée dans les filtres. En se basant sur le même exemple que précédemment, nous pouvons obtenir le même effet:

Ajouter une classe dans le Body en se basant sur un template de Page

Par défaut, Wordpress ajoute une classe dans le Body pour le template de la page actuelle. Mais si vous être un développeur front-end et que vous avez établi des conventions de nommage dans votre CSS, alors, vous pourriez avoir besoin de changer cela.

Par exemple, un template de Page appelé "halfhalf" pourrait avoir comme classe page-template-page-halfhalf-php - ce qui n'est pas vraiment génial.

Allons-y donc ajouter une nouvelle classe, en utilisant un fitre et une balise condtionnelle Wordpress:

Ceci va ajouter la class halfhalf-page dans l'attribut class du Body si le template de page actuel est page-halfhalf.php.

Supprimer une classe dans le Body

Il est peu probable que vous aurez à supprimer une classe dans le Body, puisque vous n'êtes pas forcée de les utiliser et qu'elles ajoutent très peu de choses à votre code. Ceci dit, il est néanmoins possible d'y arriver en utilisant toujours le filtre body_class.

Crédit: ce code a été pris cet article et modifié.

Dans ce dernier exemple, nous effectuons une boucle sur un tableau de classes, et nous supprimons la classe woocommerce-page si elle existe; puis nous retournons les autres classes, en dehors de la classe supprimée.

Voila, c'est tout!

A travers ce petit tutoriel, nous avons couvert deux façons d'ajouter des classes dans le Body:

  1. En utilisant la fonction body_class dans un thème,
  2. Et en utilisant un filtre

Nous avons également abordé l'ajout des classes dans le Body en utilisant des conditions, et même la suppression des classes, au cas où vous en auriez besoin dans vos futurs développements.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.