Êtes 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 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 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 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 permet de comprendre dynamiquement la page que lrsquoutilisateur regarde et drsquoajouter 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 nrsquoest pas disponible, pouvez lrsquoajouter en éditant lrsquoétiquette du corps comme suit: ltbody gt WordPress ajoute automatiquement les classes appropriées en fonction du type de page affichée.
Par exemple, si ê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 drsquoaccueil {}
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 pouvez le voir, avec des ressources si puissantes, pouvez personnaliser complètement les pages WordPress en utilisant CSS seulement. Vous pouvez personnaliser des pages de profil drsquoauteur spécifiques, des archives basées sur la date, et plus encore.
Crsquoest à dire, voyons maintenant comment et quand utiliser la classe body. Lorsque utilisez d’abord la classe hôte WordPress, devez 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 à lrsquoélément corps. Vous pouvez ajouter ces classes à tout moment. Par exemple, si voulez changer lrsquoapparence drsquoun article drsquoun auteur particulier stocké dans une catégorie particulière.
Comment ajouter des classes de corps personnalisées WordPress a un filtre que pouvez utiliser pour ajouter des classes de corps personnalisées si nécessaire. Avant de montrer un scénario particulier drsquoun cas drsquoutilisation, nous 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, devriez ajouter le code suivant au fichier de fonctions. Php del
Votre sujet. Fonction my _ Class Name ($Class) {
Ajouter
$Category [] = lsquowpb Categoryrsquo
Renvoie le tableau $classes
Renvoie la classe $
}
Ajouter la classe de test au filtre maintenant
Ajouter un filtre (lsquoBody _ classrsquo,rsquo My class namesrsquo)
Le code ci dessus ajoute une classe
Vous pouvez maintenant utiliser cette classe CSS directement dans la Feuille de style du sujet. travaillez avec un site Web, 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 si ne travaillez pas sur un projet client et que ne voulez pas écrire de code. La première chose que devez faire est drsquoinstaller et drsquoactiver 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é, devez accéder à la page de configuration personnaliser les classes de corps. À partir de là, pouvez configurer les paramètres du plug in.
Vous pouvez sélectionner le type de message que souhaitez activer la fonctionnalité de la classe corps et qui peut y accéder. Nrsquooubliez pas de cliquer sur le bouton Enregistrer les modifications pour stocker les paramètres. Ensuite, pouvez aller éditer n’importe quel article ou page sur le site WordPress. Sur lrsquoécran drsquoédition Post, 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 drsquoaccueil. Cela permet au développeur de thème de vérifier que la condition est vraie avant drsquoajouter une classe CSS personnalisée à la fonction Body _ class. Regardons quelques exemples drsquoutilisation de balises conditionnelles pour ajouter des classes personnalisées à une classe de corps.
Supposons que vouliez créer un modèle de page drsquoaccueil différent pour les utilisateurs qui se connectent en utilisant le rôle drsquoutilisateur de lrsquoauteur. Bien que WordPress en génère automatiquement un. Page drsquoaccueil et. Une fois connecté, le rôle de lrsquoutilisateur nrsquoest pas détecté et nrsquoest pas ajouté en tant que classe. Dans ce scénario, 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, ajouterez le code suivant au fichier de fonctions. Php du sujet. Fonction wpb _ loggedin User Role Class ($Class) {
vérifions si crsquoest la page drsquoaccueil
(IS _ Home () {
Maintenant, vérifions si lrsquoutilisateur connecté a le rôle drsquoutilisateur auteur.
$user = WP _ get current user ()
(in _ array (lsquoauthorrsquo, (Array) $user gt role) {
Lrsquoutilisateur a le rôle drsquoauteur
Ajouter un rôle drsquoutilisateur à la classe de corps
$class [] = lsquoauthorrsquo
Renvoie un tableau de classes
Renvoie la classe $
}
lt Modifier
ce n039est pas la page d039accueil, seule la classe par défaut est retournée
Renvoie la classe $
}
}
Ajouter un filtre (039Body _ class039,039 wpb loggedin User Role class039)
Voyons un autre exemple utile. Cette fois, Nous vérifierons si la page que 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 (039Body _ class039,039 add Preview class039)
Nous allons maintenant ajouter les CSS suivants à la Feuille de style du sujet pour utiliser la nouvelle classe CSS personnalisée que venez d039ajouter. 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 drsquoétiquettes prêtes à lemploi pour votre code.
Autres exemples d’ajout dynamique de classes de corps personnalisées en plus des balises conditionnelles, 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. Lrsquoajout drsquoun nom de catégorie à une classe de corps pour une seule page de post suppose que voulez personnaliser lrsquoapparence de chaque post en fonction de la catégorie stockée. Pour ce faire, pouvez utiliser la classe body. Drsquoabord, 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 gt ID)) as $Category)
$Category [] = $Category gt Category _ name
Renvoie la classe $
}
Ajouter un filtre (lsquoBody _ classrsquo,rsquo Category ID classrsquo)
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 lrsquohirondelle
Fonction add _ Slug Body Class ($Class) {
Postes mondiaux en dollars
(isset ($post)
$class [] = $post gt Post U type.
}
Renvoie la classe $
}
Ajouter _ filtre (lsquoBody classrsquo,rsquo add Slug Body classrsquo)
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.
WordPress Body class 101: conseils et astuces pour les concepteurs de thème
