Vous cherchez un moyen d’ajouter un slug de page WordPress dans la classe body de votre thème ?
L’ajout d’un slug de page dans le thème WordPress vous permet de faire toutes les personnalisations que vous voulez sans aucune complication. Vous pouvez facilement modifier les couleurs, les polices et d’autres certains articles basés sur des pages spécifiques.
Dans cet article, nous allons vous afficher comment ajouter un slug de page dans la classe body de vos thèmes WordPress.
Pourquoi ajouter un Slug de page dans la classe Body de votre thème ?
Si vous cherchez à personnaliser des pages spécifiques sur votre site et que vous souhaitez identifier correctement la page, l’ajout d’un slug de page dans la classe body de votre thème est vraiment utile.
Par défaut, votre site WordPress affiche uniquement les classes d’ID des publications, ce qui peut être délicat lorsqu’il s’agit de reconnaître la bonne page. Un slug de page affiche l’URL de votre publication de blog, ce qui facilite la personnalisation de la page.
Outil de personnalisation de vos pages à l’aide d’une classe de corps de slug de page. Par exemple, vous pouvez modifier la police et les couleurs d’une publication particulière ou mettre en évidence un bouton d’appel à l’action sur une page d’atterrissage spécifique.
Ceci étant dit, voyons comment vous pouvez ajouter le slug de la page dans la classe body de votre thème WordPress.
Ajout d’un slug de page dans votre thème WordPress
Pour vous aider à ajouter l’URL de votre page dans la classe body de votre thème WordPress, vous pouvez saisir le code suivant dans le fichier functions.php de votre thème.
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' );
Vous pouvez accéder aux fichiers functions.php de votre thème en vous rendant dans l’éditeur de thème de WordPress (éditeur de code). Cependant, modifier directement les fichiers du thème est très risqué.
En effet, toute erreur lors de l’ajout du code peut endommager votre site et vous empêcher de vous connecter à votre Tableau de bord WordPress.
Une façon beaucoup plus simple d’ajouter le code à la classe body de votre thème est d’utiliser une extension WordPress comme WPCode.
Avec WPCode, vous pouvez facilement ajouter du code à votre site en quelques minutes et sans aucune erreur. De plus, il garantit que votre code ne sera pas retiré si vous mettez à jour ou modifiez votre thème à l’avenir.
Il est également livré avec une bibliothèque d’extraits de code faits par des experts que vous pouvez installer en 1 clic. Ainsi, vous n’avez pas besoin de compétences en codage pour faire des personnalisations WordPress avancées.
Tout d’abord, vous devrez installer et activer l’extension gratuite WPCode sur votre site. Pour obtenir des instructions étape par étape, vous pouvez consulter notre guide sur l’installation d’une extension WordPress.
Une fois le plugin activé, un nouvel élément de menu appelé » Extraits de code » sera ajouté à votre barre d’administration WordPress. En cliquant dessus, vous accéderez à la page où vous gérerez tous vos extraits de code.
Pour ajouter votre premier extrait de code personnalisé, cliquez sur le bouton « Ajouter nouveau ».
La page « Ajouter un extrait » s’affiche et vous pouvez choisir un extrait de code dans la bibliothèque prédéfinie ou ajouter votre code personnalisé.
Pour ajouter votre code personnalisé, accédez à l’option « Ajouter votre code personnalisé (nouvel extrait) » et cliquez sur le bouton « Utiliser l’extrait ».
Maintenant, donnez un titre à votre extrait de code et saisissez le code dans le champ « Prévisualisation du code ». Vous devez également sélectionner « Extrait PHP » comme type de code dans la liste déroulante de droite.
Ensuite, défilez vers le bas jusqu’à la section » Insertion « . Ici, vous pouvez choisir la méthode ‘Auto Insert’ pour insérer et exécuter automatiquement le code dans un Emplacement WordPress spécifique comme l’administration, l’interface publique, et plus encore. Si vous n’êtes pas sûr, conservez l’option par défaut » Exécuter partout « .
Vous pouvez également choisir la méthode du « code court ». Avec cette méthode, l’extrait n’est pas inséré automatiquement. Vous obtiendrez un code court que vous pourrez insérer manuellement n’importe où sur votre site.
Lorsque vous êtes prêt, permutez le commutateur de « Inactif » à « Actif » et cliquez sur le bouton « Enregistrer l’extrait » dans le coin supérieur droit.
Pour plus de détails, vous pouvez consulter notre guide sur la façon d’ajouter du code personnalisé dans WordPress.
Vous verrez maintenant une nouvelle classe de corps s’afficher comme ceci : page-{slug}. Utilisez cette classe pour surcharger vos styles par défaut et personnaliser les éléments pour des pages spécifiques.
Par exemple, imaginons que vous souhaitiez styliser les widgets de votre colonne latérale, mais uniquement sur une page dont le slug est « éducation ». Dans ce cas, vous pourriez ajouter une feuille de style CSS comme celle-ci :
#sidebar .widgets{background: #fff; color: #000;}
.page-education #sidebar .widgets{background: #000; color: #fff;}
Pour plus de détails, vous pouvez consulter notre guide sur la façon d’ajouter des CSS personnalisés à WordPress.
Nous espérons que cet article vous a aidé à apprendre comment ajouter un slug de page dans la classe de corps de votre thème WordPress. Vous pouvez également consulter notre guide sur la classe de corps WordPress et comment choisir le meilleur logiciel de conception.
Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
David says
Thanks! Simple and effective.
WPBeginner Support says
You’re welcome!
Administrateur
jeba says
Thanks. Its working
WPBeginner Support says
Glad our method worked for you
Administrateur
Bradley says
Many thanks! Literally copied & pasted this code into my functions.php. Worked perfectly.
Alds says
How about using global $wp_query instead of $post? I’ve noticed that $post gets overwritten if you’ve run a wp_query before the functions.php gets executed.
Pete says
This needs a conditional statement to only apply it to single.php, not archive.php etc.
Chris says
How can I put the post-id in the body class?
Aaron McGraw says
Awesome! Just what I needed. Thank you so much!
Daneil says
Thank you for putting it out there, simple bit of code, but useful and allows you to write more human friendly css files, rather than classes based on ID. Cheers
Austin says
Thank you so much for this! I found out the hard way that page-id can change given different circumstances. This allows me to style individual pages without as much worry.
Kevin says
Many thanks for this. Had some problems initially due to the position of code in my stylesheet CSS but once moved to the bottom worked great. Just wish this was standard for WP as others have said and that i had known about this a long time ago
Tom McGinnis says
This code works quite well. I was finding, however, that search results would end up with the body class including the slug from the first item listed. Sometimes the first item would have styles that would override the styles for the search results page. Strange, huh!
I figured out that if you put !is_search() inside the if statement, then this problem is eliminated. If anybody else runs into this problem, the fix is simple.
Did you use &&? says
When you put in !is_search() –How did you write the code?
Murhaf Sousli says
This’s exactly what I’m looking for, I pasted the code in function.php, but unfortunately there is no class added to body! any ideas?
Asaf says
I have the exactly same issue
Ahir Hemant says
Hello, it working for me. send me your link so i can check.
Thank you
WPBeginner Staff says
It is bundled with WordPress. However the front-end of your site is handled by themes that’s why it is left for theme authors to decide whether or not to use it.
MJ says
Awesome! I wish this functionality was bundled with WP though
Miluette says
Thank you sooo much. Just what I needed.
Suat says
It’s great way for editing css.
Thank you
Weerayut Teja says
You save my work time.
Thanks Syed
Mike says
Thanks for this. I just used it to create a quick plugin to add the slug and ancestor slugs to the body class. Anyone interested can get that here: https://github.com/bigmikestudios/bms-bodyclass-slug
Todd M. says
This is a great snippet for all WordPress devs. Comes as standard in my theme setup now.
Gaurav Ramesh says
Thanks for this. Such small tips and tricks help a lot to beginners like me.
Randy Caruso says
Thanks for this – been stuck hacking myself to bits with the page-id and suffering the consequences.