Comment ajouter le Page Slug à la classe Body dans WordPress

Cherchez-vous 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 d'effectuer toutes les personnalisations souhaitées sans aucune complication. Vous pouvez facilement modifier les couleurs, les polices et certains autres éléments en fonction de pages spécifiques.

Dans cet article, nous allons vous montrer comment ajouter un page slug dans la classe body de vos thèmes WordPress.

Pourquoi ajouter un Page Slug dans la classe Body dans votre thème ?

Si vous cherchez à personnaliser des pages spécifiques de votre site et que vous souhaitez identifier correctement la page, alors ajouter un slug de page dans la classe body de votre thème est vraiment utile.

Par défaut, votre site WordPress n'affichera que les classes d'identification de publication, 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 article de blog, ce qui facilite la personnalisation de la page.

En plus de cela, vous pouvez effectuer différentes personnalisations sur 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 de destination spécifique.

Cela étant dit, voyons comment ajouter le page slug dans la classe body de votre thème WordPress.

Ajouter un Page Slug 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 function.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 function.php de votre thème en accédant à l’éditeur de thème WordPress (éditeur de code). Cependant, éditer directement les fichiers de thème est très risqué.

En effet, toute erreur lors de l’ajout du code peut interrompre votre site et vous empêcher de vous connecter à votre tableau de bord WordPress.

Un moyen beaucoup plus simple d’ajouter le code à la classe body de votre thème consiste à utiliser un plugin WordPress comme WPCode.

Avec WPCode, vous pouvez facilement ajouter du code à votre site en quelques minutes et sans aucune erreur. De plus, cela garantit également que votre code ne sera pas supprimé si vous mettez à jour ou modifiez votre thème à l’avenir.

Il est également livré avec une bibliothèque d'extraits de code créés par des experts que vous pouvez installer en 1 clic. Ainsi, vous n’avez besoin d’aucune compétence en codage pour effectuer des personnalisations avancées de WordPress.

Tout d’abord, vous devrez installer et activer le plugin gratuit WPCode sur votre site. Pour des instructions étape par étape, vous pouvez vous référer à notre guide sur la façon d'installer un plugin 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 un nouveau ».

Cela fera apparaître la page « Ajouter un extrait », où vous pourrez 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 entrez le code dans la case « Aperçu du code ». Vous devez également sélectionner le type de code correct dans la liste déroulante à droite.

Ensuite, faites défiler jusqu’à la section « Insertion ». Ici, vous pouvez choisir la méthode « Insertion automatique » pour insérer et exécuter automatiquement le code dans un emplacement WordPress spécifique comme l'administrateur, le frontend, etc. Si vous n’êtes pas sûr, conservez l’option par défaut « Exécuter partout ».

Ou, vous pouvez choisir la méthode « Shortcode ». Avec cette méthode, l’extrait n’est pas automatiquement inséré. Vous obtiendrez un shortcode que vous pourrez insérer manuellement n’importe où sur votre site.

Lorsque vous êtes prêt, basculez 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 vous référer à notre guide sur la façon d'ajouter du code personnalisé dans WordPress.

Vous allez maintenant commencer à voir une nouvelle classe de corps affichée 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, disons que vous vouliez styliser vos widgets de la barre latérale, mais uniquement sur une page comportant le slug « éducation ». Dans ce cas, vous pouvez ajouter du CSS comme ceci :

#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 du CSS personnalisé à WordPress.

Nous espérons que cet article vous a aidé à apprendre comment ajouter un slug de page dans la classe body de votre thème WordPress. Vous pouvez également consulter notre guide sur les classes de corps WordPress et comment choisir le meilleur logiciel de conception.

Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.