WordPress Body class 101: conseils et astuces pour les concepteurs de thème
Êtes – vous un designer de thème aspirant pour WordPress à la recherche de nouvelles façons d’utiliser CSS dans vos thèmes? Heureusement, WordPress ajoute automatiquement des classes CSS qui peuvent être utilisées dans les thèmes. De nombreuses classes CSS sont automatiquement ajoutées à cette section Chaque page du site WordPress. Dans cet article, nous expliquerons la classe WordPress Body et fournirons quelques conseils et astuces pour les concepteurs de thème intéressés à utiliser dans leurs projets. 
Voici un bref aperçu de ce que vous apprendrez dans cet article. Qu’est – ce qu’une classe de corps WordPress? Quand utiliser les classes de corps comment ajouter des classes de corps personnalisées comment ajouter des classes de corps en utilisant des plug – ins comment ajouter des classes de corps en utilisant des balises conditionnelles ajouter des classes de corps personnalisées autres exemples d’ajout dynamique de classes de corps personnalisées navigateur utilisateur détecter et ajouter des classes de corps spécifiques au navigateur qu’est – ce qu’une classe de corps WordPress? La classe Body (body _ Class) est une fonctionnalité WordPress qui vous permet d’assigner des classes CSS aux éléments body.
Les balises de corps HTML commencent généralement à partir du fichier. Un thème PHP qui est chargé sur chaque page. Cela vous permet de comprendre dynamiquement la page que l’utilisateur regarde et d’ajouter la classe CSS en conséquence. En général, la plupart des sujets et des cadres initiaux contiennent déjà des fonctions de classe de corps dans les balises de corps HTML. Cependant, si votre sujet n’est pas disponible, vous pouvez l’ajouter en éditant l’étiquette du corps comme suit: <body > WordPress ajoute automatiquement les classes appropriées en fonction du type de page affichée.
Par exemple, si vous êtes sur une page d’archive, WordPress ajoute automatiquement une classe d’archive à l’élément corps. Il le fait presque toutes les pages. Autre: voir comment WordPress fonctionne dans les coulisses (infographie) Voici quelques exemples de classes communes que WordPress peut ajouter, selon la page
A visible:. RTL {}
– Oui. Page d’accueil {}
– Oui. Blog {}
– Oui. Archive {}
– Oui. Date {}
– Oui. Recherche {}
– Oui. Page {}
– Oui. Annexe {}
– Oui. Erreur 404 {}
– Oui. Un seul postId – (ID) {}
– Oui. Attachmentid – (ID) {}
– Oui. Pièce jointe – (type MIME) {}
– Oui. Auteur {}
– Oui. Auteur – (user _ nicname) {}
– Oui. Catégorie {}
– Oui. Catégorie – (Slug) {}
– Oui. Étiquette {}
– Oui. Mark – (swallow) {}
– Oui. Page parent {}
– Oui. Page child parent page id – (ID) {}
– Oui. Modèle de page modèle de page – (nom du fichier modèle) {}
– Oui. Résultats de la recherche {}
– Oui. Recherche aucun résultat {}
– Oui. Connecté {}
– Oui. Page – (page) {}
– Oui. Une page – (page) {}
– Oui. Page N° de page {}
– Oui. Catégorie pagination – (page) {}
– Oui. Étiquette pagée – (page) {}
– Oui. Date de pagination – (page) {}
– Oui. Auteur pagé – (page) {}
– Oui. Page de recherche – (page) {}
Comme vous pouvez le voir, avec des ressources si puissantes, vous pouvez personnaliser complètement les pages WordPress en utilisant CSS seulement. Vous pouvez personnaliser des pages de profil d’auteur spécifiques, des archives basées sur la date, et plus encore.
C’est – à – dire, voyons maintenant comment et quand utiliser la classe body. Lorsque vous utilisez d’abord la classe hôte WordPress, vous devez vous assurer que l’élément hôte du thème contient les fonctions de la classe hôte indiquées ci – dessus. Dans ce cas, il contiendra automatiquement toutes les classes CSS générées par WordPress ci – dessus. Vous pouvez ensuite ajouter vos propres classes CSS personnalisées à l’élément corps. Vous pouvez ajouter ces classes à tout moment. Par exemple, si vous voulez changer l’apparence d’un article d’un auteur particulier stocké dans une catégorie particulière.
Comment ajouter des classes de corps personnalisées WordPress a un filtre que vous pouvez utiliser pour ajouter des classes de corps personnalisées si nécessaire. Avant de vous montrer un scénario particulier d’un cas d’utilisation, nous vous montrerons comment ajouter une classe de corps en utilisant des filtres afin que tout le monde puisse être sur la même page. Puisque la classe Body est spécifique au sujet, vous devriez ajouter le code suivant au fichier de fonctions. Php del
Votre sujet. Fonction my _ Class Name ($Class) {
Ajouter \
$Category [] = ‘wpb Category’;
Renvoie le tableau $classes
Renvoie la classe $;
}
Ajouter la classe de test au filtre maintenant
Ajouter un filtre (‘Body _ class’,’ My class names’);
Le code ci – dessus ajoute une classe \
Vous pouvez maintenant utiliser cette classe CSS directement dans la Feuille de style du sujet. Si vous travaillez avec un site Web, vous pouvez également ajouter des CSS en utilisant la fonctionnalité CSS personnalisée dans le personnalisateur de thème. 
Ajouter une classe de corps en utilisant le plugin wordpress est plus facile pour vous si vous ne travaillez pas sur un projet client et que vous ne voulez pas écrire de code. La première chose que vous devez faire est d’installer et d’activer le plug – in de classe de corps personnalisé. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer le plugin wordpress. Une fois activé, vous devez accéder à la page de configuration personnaliser les classes de corps. À partir de là, vous pouvez configurer les paramètres du plug – in.
Vous pouvez sélectionner le type de message que vous souhaitez activer la fonctionnalité de la classe corps et qui peut y accéder. N’oubliez pas de cliquer sur le bouton Enregistrer les modifications pour stocker les paramètres. Ensuite, vous pouvez aller éditer n’importe quel article ou page sur le site WordPress. Sur l’écran d’édition Post, vous trouverez une nouvelle boîte nommée \
La vraie fonctionnalité de la classe Body _ pour utiliser des balises conditionnelles avec la classe Body est de les utiliser avec des balises conditionnelles. 
Ces étiquettes
La condition est un type réel ou faux, utilisé pour vérifier si les conditions dans WordPress sont vraies ou fausses. Par exemple, la balise de condition est _ Home vérifie si la page actuellement affichée est la page d’accueil. Cela permet au développeur de thème de vérifier que la condition est vraie avant d’ajouter une classe CSS personnalisée à la fonction Body _ class. Regardons quelques exemples d’utilisation de balises conditionnelles pour ajouter des classes personnalisées à une classe de corps.
Supposons que vous vouliez créer un modèle de page d’accueil différent pour les utilisateurs qui se connectent en utilisant le rôle d’utilisateur de l’auteur. Bien que WordPress en génère automatiquement un. Page d’accueil et. Une fois connecté, le rôle de l’utilisateur n’est pas détecté et n’est pas ajouté en tant que classe. Dans ce scénario, vous pouvez maintenant ajouter dynamiquement des classes personnalisées à une classe de corps en utilisant des balises de condition avec du code personnalisé. Pour ce faire, vous ajouterez le code suivant au fichier de fonctions. Php du sujet. Fonction wpb _ loggedin User Role Class ($Class) {
\/ \/ vérifions si c’est la page d’accueil
Si (IS _ Home () {
Maintenant, vérifions si l’utilisateur connecté a le rôle d’utilisateur auteur.
$user = WP _ get current user ();
Si (in _ array (‘author’, (Array) $user – > role) {
L’utilisateur a le rôle d’auteur
Ajouter un rôle d’utilisateur à la classe de corps
$class [] = ‘author’;
Renvoie un tableau de classes
Renvoie la classe $;
}
< Modifier
Si ce n'est pas la page d'accueil, seule la classe par défaut est retournée
Renvoie la classe $;
}
}
Ajouter un filtre ('Body _ class',' wpb loggedin User Role class');
Voyons un autre exemple utile. Cette fois, Nous vérifierons si la page que vous consultez est un aperçu du projet WordPress.
Pour ce faire, nous utiliserons la condition is \ u Pour prévisualiser les balises, puis ajouterons des classes CSS personnalisées. Fonction add _ Preview Class ($Class) {
If (IS _ Preview () {
$class [] = \
Renvoie la classe $;
}
Renvoie la classe $;
}
Ajouter
Filtres ('Body _ class',' add Preview class');
Nous allons maintenant ajouter les CSS suivants à la Feuille de style du sujet pour utiliser la nouvelle classe CSS personnalisée que vous venez d'ajouter. Mode aperçu. Titre du site:
Contenu: « mode aperçu»;
Couleur: # FFF;
Couleur de fond: # ff0000;
}
Voici le contenu du site de démonstration: Vous voudrez peut – être voir la liste complète des balises conditionnelles disponibles dans WordPress. Cela fournira un ensemble pratique d’étiquettes prêtes à l’emploi pour votre code.
Autres exemples d’ajout dynamique de classes de corps personnalisées en plus des balises conditionnelles, vous pouvez utiliser d’autres techniques pour extraire des informations de la base de données WordPress et créer des classes CSS personnalisées pour les classes de corps. L’ajout d’un nom de catégorie à une classe de corps pour une seule page de post suppose que vous voulez personnaliser l’apparence de chaque post en fonction de la catégorie stockée. Pour ce faire, vous pouvez utiliser la classe body. D’abord, vous devez ajouter le nom de la classe en tant que classe CSS à la page de chaque billet. Pour ce faire, ajoutez le code suivant au fichier de fonctions. Sujet PHP: \/ \/ Add category nicnames in body class
Catégorie de fonctions _ ID Class ($Class) {
Postes mondiaux en dollars;
Foreach (get _ Category ($post – > ID)) as $Category)
$Category [] = $Category – > Category _ name;
Renvoie la classe $;
}
Ajouter un filtre (‘Body _ class’,’ Category ID class’);
Le code ci – dessus ajoutera une classe de catégorie à votre classe de corps pour chaque page de post. Vous pouvez ensuite le modéliser en utilisant la classe CSS. Ajoutez le Snail de page à la classe Body collez le code suivant dans le fichier de fonctions. Votre PHP tema:\/\/Page Grade de l’hirondelle
Fonction add _ Slug Body Class ($Class) {
Postes mondiaux en dollars;
Si (isset ($post)
$class [] = $post – > Post \ U type. \
}
Renvoie la classe $;
}
Ajouter _ filtre (‘Body class’,’ add Slug Body class’);
Rotary International
Vous aide à apprendre comment utiliser la classe corps WordPress dans un thème. Vous voudrez peut – être aussi voir notre article sur la façon de modéliser différemment chaque billet WordPress et notre comparaison des plugins de création des meilleures pages WordPress. Si vous aimez cet article, abonnez – vous à notre tutoriel vidéo WordPress sur YouTube Channel. Vous pouvez aussi nous trouver sur Twitter et Facebook.