Comment ajouter une slug de page dans la classe de corps de vos thèmes WordPress

Si vous travaillez régulièrement sur des thèmes WordPress, il est probablement préférable de vous familiariser avec ces aide-mémoire CSS générés par WordPress par défaut. Récemment, alors que nous travaillions sur un projet de thème personnalisé, nous avons constaté la nécessité de personnaliser certains éléments en fonction de différentes pages. WordPress a ces choses appelées classes de corps qui sortent la page de classe, page-template- nom de fichier et page-id- numéro. Nous n'avons pas pu utiliser page-id- numéro car les identifiants de page changent d'un développement à un autre. Nous ne voulions pas non plus créer un modèle de page personnalisé avec du code répétitif. Nous savions que nous pouvions garder la même chose sur toutes ces pages, qui étaient des pages-limaces. Nous avons donc décidé d'ajouter les pages sur la classe body, ce qui nous permettait d'effectuer toutes les personnalisations souhaitées sans complications. Dans cet article, nous allons vous montrer comment ajouter un slug de page en classe body à vos thèmes WordPress..

Comme il s’agit d’un code spécifique à un thème, nous vous recommandons de le mettre dans le répertoire de votre thème. functions.php fichier.

 // 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'); 

Vous allez maintenant voir apparaître une nouvelle classe de corps comme ceci: page- slug. Utilisez cette classe pour remplacer vos styles par défaut et personnaliser des éléments pour des pages spécifiques.

Par exemple, si vous essayez de modifier une div avec une classe de widgets. Vous pouvez avoir votre css comme ça:

 #sidebar .widgets background: #fff; color: # 000; .page-education #sidebar .widgets background: # 000; couleur: #fff; 

J'espère que vous trouverez ce tutoriel utile.