Comment ajouter le slug de la page à la classe de corps dans WordPress

Nous avons travaillé sur de nombreux sites WordPress au fil des ans, et l’une des astuces de personnalisation à laquelle nous revenons toujours est l’ajout du slug de la page à la classe body. C’est une chose si simple, mais qui fait toute la différence en termes de flexibilité de conception.

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 articles sur des pages individuelles sans affecter le reste de votre site.

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.