WPML fournit un sélecteur de langue facile à utiliser, mais il arrive que vous ne souhaitiez pas qu’il apparaisse sur toutes les pages. Découvrez comment l’afficher ou le masquer uniquement sur des pages spécifiques.
Il vous suffit pour cela de quelques lignes de CSS.
Afficher le sélecteur de langue uniquement sur des pages spécifiques
Étape 1 : Masquer le sélecteur de langue sur toutes les pages
Tout d’abord, vous devez vérifier quelle classe utilise notre sélecteur de langue.
Vous pouvez le vérifier à l’aide des outils de développement du navigateur :
- Rendez-vous sur le front-end de votre site et appuyez sur la touche F12 de votre clavier.
- Utilisez l’outil « Inspecter » pour cibler le sélecteur de langue et son balisage HTML apparaîtra.
Voici deux classes courantes pour un sélecteur de langue :
- Classe wpml-ls-menu-item lorsque le sélecteur apparaît dans un menu
- Classe wpml-ls lorsque le sélecteur apparaît dans le pied de page
Une fois la bonne classe identifiée, rendez-vous sur la page Apparence → Personnaliser puis cliquez sur CSS additionnel et ajoutez le CSS suivant à votre site.
Masquer le sélecteur de langue du menu
/*Hide menu Language Switcher*/
.wpml-ls-menu-item {
visibility: hidden !important;
}
/*Hide footer Language Switcher*/
.wpml-ls {
visibility: hidden !important;
}Cela masquera le sélecteur de langue sur toutes les pages.
Vous pouvez également ajouter ces règles de style au fichier style.css de votre thème, mais assurez-vous d’utiliser un thème enfant. Sinon, votre style personnalisé sera perdu lors de la mise à jour du thème.
Pour des informations détaillées sur les classes CSS du sélecteur de langue, consultez notre page consacrée au style CSS des sélecteurs de langue.
Étape 2 : Afficher le sélecteur de langue sur une page spécifique
Vous devez ensuite ajouter un autre extrait CSS pour n’afficher le sélecteur de langue que sur les pages de votre choix.
WordPress ajoute automatiquement des classes spécifiques à la balise body de chaque page. Cela vous permet de cibler le sélecteur de langue sur une page spécifique.
Pour trouver la classe, ouvrez sur le front-end la page sur laquelle vous souhaitez afficher le sélecteur de langue. À nouveau, utilisez l’outil d’inspection du navigateur et recherchez la balise body.
Vous verrez quelque chose comme ceci :
Trouver la classe id
<body class="page-template-default page page-id-2 logged-in admin-bar wp-embed-responsive is-light-theme singular has-main-navigation customize-support">
Dans ce cas, la classe page-id-2 est ajoutée uniquement à cette page spécifique. Ce numéro correspond à l’ID de cette page et vous pouvez l’utiliser pour construire votre extrait.
L’extrait complet devrait ressembler à ceci :
Masquer le sélecteur de langue du menu – complet
/*Hide menu Language Switcher*/
.wpml-ls-menu-item {
visibility: hidden !important;
}
/*Hide footer Language Switcher*/
.wpml-ls {
visibility: hidden !important;
}
/*Display Language Switcher only in the page with ID 2*/
body.page-id-2 .wpml-ls-menu-item {
visibility: visible !important;
}
body.page-id-2 .wpml-ls {
visibility: visible !important;
}N’oubliez pas de remplacer la classe page-id-2 par la classe de votre page.
Voici quelques-unes des classes spécifiques que vous pouvez utiliser :
- page-id-X : utilisée pour les pages (remplacez X par l’ID de la page)
- postid-X : utilisée pour les articles (remplacez X par l’ID de l’article)
- home : utilisée pour la page d’accueil
- single-post : utilisée pour tous les articles (pas un en particulier)
- page : utilisée pour toutes les pages (pas une en particulier)
Masquer le sélecteur de langue uniquement sur des pages spécifiques
La démarche pour masquer le sélecteur de langue sur des pages spécifiques est très proche des étapes précédentes. Mais au lieu de le masquer sur toutes les pages, vous ne le masquerez que sur une page spécifique.
Pour cela, il vous suffit de récupérer la classe spécifique de la page, puis de l’utiliser pour masquer le sélecteur de langue de cette page.
Votre extrait CSS devrait ressembler à ceci :
Masquer le sélecteur de langue uniquement sur la page avec l’ID 2
/*Hide Language Switcher only on the page with ID 2*/
/*Menu Language Switcher*/
body.page-id-2 .wpml-ls-menu-item {
visibility: hidden !important;
}
/*Footer Language Switcher*/
body.page-id-2 .wpml-ls {
visibility: hidden !important;
}N’oubliez pas de remplacer la classe page-id-2 par votre classe spécifique.