Êtes-vous un futur concepteur de thèmes WordPress à la recherche de nouvelles façons d'utiliser CSS pour votre travail ? Heureusement, WordPress ajoute automatiquement des classes CSS que vous pouvez utiliser dans vos thèmes. Plusieurs de ces classes CSS sont ajoutées aux sections <body> de chaque page ! Dans cet article, nous vous expliquions la classe de corps WordPress avec des trucs et astuces pour les concepteurs de thèmes en herbe pour les utiliser dans leurs projets.
Sommaire
Body class (body_class) est une fonction WordPress qui vous permet d'attribuer des classes CSS à l'élément body. La balise de corps HTML commence normalement dans le fichier header.php d'un thème, qui se charge sur chaque page.
Cela vous permet de déterminer dynamiquement la page qu'un utilisateur consulte, puis d'ajouter les classes CSS en conséquence. Normalement, la plupart des thèmes et frameworks de démarrage incluent déjà la fonction de classe body dans la balise body HTML.
Cependant, si votre thème ne l'a pas, vous pouvez l'ajouter en modifiant la balise body comme ceci:
<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'archive, WordPress ajoutera automatiquement une classe d'archive à l'élément body. Il le fait pour à peu près toutes les pages. Voici quelques exemples de classes courantes que WordPress pourrait 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 voir, en ayant une ressource aussi puissante à portée de main, vous pouvez entièrement personnaliser votre page WordPress en utilisant uniquement CSS. Vous pouvez personnaliser des pages de profil d'auteur spécifiques, des archives basées sur la date, etc.
Tout d'abord, vous devez vous assurer que l'élément body de votre thème contient la fonction de classe body, comme indiqué ci-dessus. Si c'est le cas, il inclura automatiquement toutes les classes CSS générées par WordPress mentionnées ci-dessus.
Après cela, 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'un auteur spécifique classés dans une catégorie spécifique.
WordPress dispose d'un filtre que vous pouvez utiliser pour ajouter des body_class 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.
Étant donné que les classes de corps sont spécifiques à un thème, vous devez ajouter le code suivant au fichier functions.php de votre thème.
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» à la balise body sur chaque page de votre site Web. Ce n'est pas si mal, non?
Vous pouvez maintenant utiliser cette classe CSS directement dans la feuille de style de votre thème. Si vous travaillez sur votre propre site Web, vous pouvez également ajouter le CSS à l'aide de la fonctionnalité CSS personnalisée dans le personnalisateur de thème.
Si vous ne travaillez pas sur un projet client et que vous ne souhaitez pas écrire de code, cette méthode serait plus simple pour vous. La première chose à faire est d'installer et d'activer le plugin Custom Body Class.
Lors de l'activation, vous devez visiter Paramètres »Classe corporelle personnalisée. De là, vous pouvez configurer les paramètres du plugin. Vous pouvez sélectionner les types de publication pour lesquels vous souhaitez activer la fonction de classe de corps et qui peut y accéder.
N'oubliez pas de cliquer sur le bouton Enregistrer les modifications pour enregistrer vos paramètres. Ensuite, vous pouvez vous diriger pour modifier n'importe quel article ou page sur votre site WordPress. Sur l'écran d'édition de publication, vous trouverez une nouvelle méta-boîte dans la colonne de droite intitulée «Post Classes».
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 message. Le plugin ajoutera maintenant vos classes CSS personnalisées à la classe body pour cet article ou cette page en particulier.
La vraie puissance de la fonction body_class vient lorsqu'elle est utilisée avec les balises conditionnelles. Ces balises 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 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.
Jetons un coup d'œil à quelques exemples d'utilisation de balises conditionnelles pour ajouter des classes personnalisées à la classe body. Supposons que vous souhaitiez personnaliser votre page d'accueil pour les utilisateurs connectés avec le rôle d'utilisateur auteur.
Alors que WordPress génère automatiquement un .home et .logged-in classe, il ne détecte pas le rôle de l'utilisateur ni ne l'ajoute en tant que classe. À présent, il s'agit d'un scénario dans lequel vous pouvez utiliser les balises conditionnelles avec du code personnalisé pour ajouter dynamiquement une classe personnalisée à la classe body.
Pour ce faire, vous ajouterez le code suivant au fichier functions.php de votre thème.
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 un aperçu d'un brouillon WordPress.
Pour ce faire, nous utiliserons la balise conditionnelle is_preview, puis 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');
Maintenant, nous allons 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;
}
Vous voudrez peut-être 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.
Outre les balises conditionnelles, vous pouvez également utiliser d'autres techniques pour récupérer des informations de la base de données WordPress et créer des classes CSS personnalisées pour la classe body.
Supposons que vous souhaitiez personnaliser l'apparence des messages individuels en fonction de la catégorie dans laquelle ils sont classés. Vous pouvez utiliser la classe body pour y parvenir
Tout d'abord, vous devez ajouter des noms de catégorie 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:
// 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 des classes CSS pour le styliser comme vous le souhaitez.
Collez le code suivant dans le fichier functions.php de votre thème:
//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' );
Parfois, vous pouvez rencontrer des problèmes où votre thème peut avoir besoin de CSS supplémentaire pour un navigateur particulier. Maintenant, la bonne nouvelle est que WordPress détecte automatiquement le navigateur lors du chargement, puis stocke temporairement ces informations en tant que 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. Copiez et collez simplement le code suivant dans le fichier functions.php de votre thème:
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 ensuite utiliser des classes comme:
.ms-edge .navigation {some item goes here}S'il s'agit d'un petit problème de remplissage ou de marge, c'est un moyen assez simple de le résoudre.
Il existe certainement de nombreux autres scénarios dans lesquels l'utilisation de la fonction body_class peut vous éviter d'écrire de longues lignes de code. Par exemple, si vous utilisez un framework de thème tel que Genesis, 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 de la barre latérale, l'en-tête et les pieds de page, etc. Nous espérons que cet article vous a aidé à apprendre à utiliser la classe de corps WordPress dans vos thèmes.
Nous avons également détaillé, dans plusieurs articles, les thématiques WordPress. Vous retrouverez certains de nos bons plans à travers des contenus, tels que les façons d'ajouter des articles en barre latérale ou comment publier des miniatures !