Business
Actus
Événements
Savoir Faire
Tutos
Thèmes
Plugins
E-commerce
SEO
Tutos Ajouter le slug d’une page dans la fonction body_class()
Cette astuce permet d’ajouter une classe CSS correspondant au slug d’une page via la fonction body_class().
La fonction body_class() de WordPress permet d’injecter des classes CSS sur la balise <body>. En fonction de la page courante, les classes ajoutées seront différentes.
Ce système peut se révéler très pratique. Il donne la possibilité d’appliquer un style différent en fonction de la page consultée (accueil, archives, article, page, etc…).
Par défaut, lorsqu’on se trouve sur une page, WordPress ajoute les classes CSS suivantes :
- page
- page-id-xx (xx correspond à l’ID de la page)
- page-template-xx (xx correspond au modèle de page associé)
Afin de cibler plus facilement une page, il pourrait être intéressant d’ajouter le slug de celle-ci.
Pour cela, il suffit de copier le code ci-dessous dans le fichier functions.php de votre thème :
[pastacode lang=”php” message=”” highlight=”” provider=”manual”]
add_filter( 'body_class', 'gkp_add_slug_body_class' );
function gkp_add_slug_body_class( $classes )
{
if ( is_page() )
{
global $post;
$classes[] = $post->post_type . '-' . $post->post_name;
}
return $classes;
}
[/pastacode]
Grâce à ce code, WordPress ajoutera automatiquement la classe CSS page-slug lorsque la fonction body_class() sera utilisée. Par exemple, sur cet article le slug est slug-page-body-class.
À noter que cette astuce fonctionne aussi pour les Custom Post Types en remplaçant is_page() par is_singular().
Article écrit par Jonathan B.
Youtube
Twitter
Facebook
12 Commentaires
génial , merci bcp pour l’info et l’astuce , ça va aider bcp à bien différencier les styles
mais pkoi , tu met le lien spammeur-bourrin.com , si tu acceptes pas mon comm , tu le supprime , je suis un spammeur, quand t’a met un champ pour ajouter le lien de notre site , donc tu es d’accord que j’ajout le lien que je veux et pas que tu veux
vraiment je comprend rien !!!!
si non supprime mon comm stp et je vais désactiver mon abonnement à vos articles
@Pfff: Je te laisse lire la mention qui se trouve juste en dessous du formulaire…
trop bien merci beaucoup pour votre code pour le css dans le body sa va nous changer beaucoup, comme sa on pourra modifier et différencier les styles dans le body
Merci pour cet astuce très pratique
Merci pour cette astuce, je l’utilise depuis peu et il est vrai que ça aide pas mal lors de la création des templates wordpress…
PS: C’est marrant de changer les liens des spammeurs comme tu le fais, je te soutien dans cette démarche, moi je les vire direct !! Et puis ce qui est aussi marrant c’est que je retrouve les même commentaires/spams que sur certains de mes blogs (ils ont pas beaucoup d’imagination ces spammeurs… et je suis sûr qu’ils se vantent en plus d’être des cracks en SEO, mdr….)
Bonjour,
Merci pour ce tuto qui je pense va pouvoir m’aider.
J’aimerais modifier le css d’une page en particulier, la class que je voudrais modifier se trouve plus bas dans le body et j’aimerais qu’elle soit modifier que sur la page d’accueil.
Avez-vous une idée ? J’ai essayé plusieurs techniques avec votre méthode sans trouver la solution.
Merci d’avance
Hello,
cela ne semble plus fonctionner avec la version 3.8.2 de wordpress.
J’ai bien copier la fonction dans le fichier functions.php mais aucune class n’est ajoutée au body :-/
Auriez vous une solution mise a jour s’il vous plait ?
@Fabrice: L’astuce est toujours fonctionnel pour WordPress 3.8.2. Si ça ne fonctionne pas chez vous, c’est qu’il y a une erreur dans votre code.
Bonjour,
Merci pour ta réponse Jonathan (je pense qu’on peut se tutoyer ^^).
Et bien je ne sais pas quelle erreur dans le code pourrait causer la non prise en charge de cette fonction.. J’ai acheter le template Startup sur themeforest, c’est un theme classique rien de bien fou.
J’ai bien déclaré la fonction dans le bon fichier, j’ai également essayé de rajouter ce morceau de code dans mon functions.php du childtheme, la fonction ne pose pas de problème mais dans le body, j’ai plusieurs classe mais pas une seule avec le nom de la page.
Par exemple sur cette page : http://isathyfinance.fr/nos-competences/
si tu regardes la body, dans ses classes tu ne verras rien avec inscrit “nos-compétences”.
Qu’est ce qui pourrait causer cela à ton avis ?
Comme je le disais sur le commentaire qui n’est pas passé.. j’utilise le theme Startup de Irishmiss vendu sur themeforest, et donc si erreur il y a quelque part dans le code, je ne peux pas vraiment savoir ou elle est.
Quoi qu’il en soit, quand je déclare la fonction il ne se passe simplement rien.. Y aurait il quelque chose que je n’ai pas fait pour que la fonction récupère l’identifiant de la page ?
@Fabrice :
“Qu’est ce qui pourrait causer cela à ton avis ?”
Attention à bien vérifier que le thème n’utilise pas déjà ce hook et il y a de forts chances que oui ;)