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

Au cours de notre expérience d'utilisation de WordPress, nous avons constaté que les concepteurs de thèmes réfléchissaient souvent à une certaine fonctionnalité. Ils sont à la recherche de filtres et de crochets fous pour WordPress pour accomplir une tâche alors qu’ils n’ont besoin que de simples CSS. WordPress génère par défaut beaucoup de classes CSS. (WordPress CSS Cheat Sheet). Une de ces classes de CSS est le style de la classe body. Dans cet article, nous expliquerons la classe de corps WordPress 101 et partagerons quelques conseils et astuces utiles pour les concepteurs de thèmes débutants..

Qu'est-ce que WordPress Body Class??

Body Class (body_class) est une fonction WordPress qui donne différentes classes à l'élément body, afin que les auteurs de thèmes puissent styliser efficacement leurs sites avec CSS. La balise body HTML est présente principalement dans votre fichier header.php qui se charge sur chaque page. Lorsque vous codez un thème, vous pouvez associer la fonction body_class à votre élément body de la manière suivante:

En ajoutant ce petit élément, vous vous donnez la possibilité de modifier facilement l'apparence de chaque page à l'aide de CSS. Selon le type de page en cours de chargement, WordPress ajoute automatiquement la classe appropriée. Par exemple, si vous êtes sur une page d’archive, WordPress ajoutera automatiquement une classe d’archive à l’élément body si vous choisissez de l’utiliser. Il le fait pour à peu près toutes les pages. Voici quelques exemples de classes courantes que WordPress pourrait ajouter:

 .rtl  .home  .blog  .archive  .date  .search  .paged  .attachment  .error404  .single postid- (id)  ​​.attachmentid- (id)  .attachment- (type-mime)  .author  .author- (nom_utilisateur_nonyme)  .category  .category- (slug)  .tag  .tag- (slug)  .page -parent  .page-child parent-pageid- (id)  ​​.page-template page-template- (nom du fichier modèle)  .search-results  .search-no-results  .logged-in  .paged- (numéro de page)  .single-paged- (numéro de page)  .page-paged- (numéro de page)  .category-paged- (numéro de page)  .tag-paged- ( numéro de page)  .date-paged- (numéro de page)  .author-paged- (numéro de page)  .search-paged- (numéro de page)  

Comme vous pouvez le constater, grâce à une ressource aussi puissante, vous pouvez entièrement personnaliser votre page WordPress en utilisant simplement CSS. Vous pouvez personnaliser des pages de profil d’auteur spécifiques, des archives basées sur une date, etc.?

Comment utiliser WordPress Body Class

Dans la plupart des cas, la classe de corps WordPress est la solution simple que les concepteurs de thèmes ignorent souvent. Oui, cela nous inclut également. Il y a environ un an, nous devions attribuer un style à un élément de menu WordPress qui figurait uniquement sur une page spécifique. Nous avons décidé de creuser profondément pour trouver un filtre permettant d'ajouter une classe de navigation spéciale aux éléments de menu qui seraient ajoutés à l'aide d'une instruction conditionnelle. Par exemple, s'il s'agit d'une seule page, ajoutez la classe «Blog» aux éléments de menu. Après avoir passé tout le temps à comprendre tout cela et à écrire un article à ce sujet, un de nos utilisateurs a fait remarquer que nous aurions facilement pu le faire avec une classe de corps existante, comme ceci:

.#navigation unique .leftmenublog div display: inline-block! important;

Remarque: comment il utilise la classe de corps .single ajoutée dans toutes les pages de publication unique.

Garçon, on ne s'est pas sentis stupides après ça. Depuis lors, nous avons pris note de la possibilité de commencer par la classe de corps avant de creuser plus profondément..

Pour vous donner un autre exemple. Un jour, un utilisateur nous a demandé de modifier l’image du logo sur son site Web en fonction de la page de catégorie. La plupart des thèmes, y compris le sien, chargeaient le logo en utilisant un CSS (#header .logo). Nous avons suggéré comment utiliser la classe .category-slug body pour changer son logo de la manière suivante:

 .category-advice #header .logo background: url (images / logo-advice.png) non répété! important; .category-health #header .logo background: url (images / logo-health.png) non répéter! important; 

Ce nouveau concepteur de thème a eu le même moment ah-hah que nous avons eu. Espérons maintenant que vous comprenez comment vous pouvez utiliser la classe de corps dans vos conceptions de thème. Mais attendez, cela devient encore plus puissant car il existe un moyen d'ajouter des classes de corps personnalisées à l'aide d'un filtre. Voyons comment faire.

Comment ajouter des classes de corps personnalisées

WordPress a un filtre que vous pouvez utiliser pour ajouter des classes de corps 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..

Comme les classes de corps sont spécifiques à un thème, vous devez écrire une fonction personnalisée dans votre fichier functions.php comme suit:

 function my_class_names ($ classes) // ajoute 'nom-classe' au tableau $ classes $ classes [] = 'nom-classe-test'; // retourne le tableau $ classes return $ classes;  // Ajoutez maintenant la classe de test au filtre add_filter ('body_class', 'my_class_names'); 

Le code ci-dessus ajoutera une classe «test-class-name» à la balise body de chaque page de votre site Web. C'est pas si mal non? Le véritable pouvoir de cette fonction réside dans les balises conditionnelles. Vous pouvez dire d'ajouter la classe XYZ uniquement sur des pages simples, etc. Prenons cet exemple et appliquons-le à un scénario de cas d'utilisation réel..

Ajouter une catégorie de catégorie à des pages de publication uniques

Disons que vous souhaitez personnaliser les pages de publication individuelle de chaque catégorie. Selon le type de personnalisation, vous pouvez utiliser des classes de corps pour cela. Pour que les choses restent simples, disons que vous souhaitez modifier la couleur d'arrière-plan de la page en fonction de la catégorie des publications individuelles. Vous pouvez le faire en ajoutant des classes de catégorie à vos vues de page à publication unique. Collez la fonction suivante dans le fichier functions.php de votre thème:

 // ajoute des noms de catégorie dans la classe de corps, fonction category_id_class ($ classes) global $ post; foreach ((get_the_category ($ post-> ID)) en tant que $ category) $ classes [] = $ category-> nom_catégorie; retourne $ classes;  add_filter ('body_class', 'category_id_class'); 

Le code ci-dessus ajoute la classe de catégorie dans votre classe de corps pour les pages à publication unique. Vous pouvez ensuite utiliser les classes CSS pour le styler à votre guise.

Ajouter un slug de page dans la classe de corps de vos thèmes WordPress

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

 // Page Slug Body Class class add_slug_body_class ($ classes) global $ post; if (isset ($ post)) $ classes [] = $ post-> post_type. '-' $ post-> post_name;  retourne $ classes;  add_filter ('body_class', 'add_slug_body_class'); 

Lisez notre article sur le slug de page en classe de corps qui expliquera pourquoi nous en avions besoin.

Détection de navigateur et classes de corps spécifiques à un navigateur

Parfois, vous aurez peut-être besoin de styles CSS spéciaux pour que tout fonctionne correctement dans certains navigateurs (CONSEIL: Internet Explorer). Eh bien, Nathan Rice a suggéré une solution très cool qui ajoute des classes spécifiques à chaque classe de corps en fonction du navigateur par lequel l'utilisateur visite le site..

Tout ce que vous avez à faire est de coller le code suivant dans votre fichier functions.php:

Vous pouvez ensuite utiliser des classes telles que:

.c'est-à-dire .navigation un élément va ici

S'il s'agit d'un problème de remplissage ou de marge minime, il s'agit d'un moyen assez rapide de le résoudre..

Plus de cas d'utilisation:

Nous pouvons probablement énumérer beaucoup plus de cas d'utilisation, mais nous ne ferons pas autrement, cet article deviendra incontrôlable. L'objectif était d'aider les nouveaux développeurs de thèmes à comprendre les bases de la classe de corps WordPress et ses avantages. Les cas d'utilisation sont limités à votre imagination. Nous avons vu des développeurs de thèmes commerciaux (Genesis) utiliser des classes de corps pour offrir diverses options de présentation. Par exemple, Mise en page complète, Contenu de la barre latérale, Barre latérale de contenu, etc. Cela permet à l'utilisateur de changer facilement la mise en page de sa page sans s'inquiéter des problèmes d'affichage, car elle est déjà prise en charge avec CSS.0.

Nous avons vu des développeurs ajouter des requêtes HTTP pour charger des fichiers CSS pour différents schémas de couleurs proposés. Dans de nombreux cas, les changements sont également très mineurs. Il est inutile de charger 3 feuilles de style quand on peut faire le travail. Il suffit d'utiliser la classe de corps pour cela.

J'espère que vous avez trouvé cet article utile. Nous serions heureux d’entendre vos réflexions sur Body Class et sur la manière dont vous l’avez utilisé dans le passé ou envisagez de le faire dans le futur..