Comment afficher/masquer du contenu dans une langue spécifique ?

Dans cet article, vous apprendrez comment afficher et/ou masquer du contenu dans une langue spécifique.

2. Ajouter des sélecteurs CSS pour chaque élément

3. Ajouter quelques règles de style CSS personnalisées

4. Appliquer CSS sur une page spécifique

Si vous souhaitez afficher certains contenus uniquement dans une langue spécifique (par exemple, un bouton avec un lien), suivez les étapes ci-dessous :

1. Créer deux éléments différents

Dans votre site web original, créez deux éléments :

Un pour la langue d'origine
Un pour la langue traduite

Les deux éléments existeront dans votre version originale, mais un seul s'affichera à la fois grâce à une règle CSS.

2. Ajouter un sélecteur CSS pour chaque élément

Attribuez un sélecteur CSS unique (classe ou ID) à chaque élément. Par exemple :

link-en pour la version anglaise
link-es pour la version espagnole

Vous ne savez pas ce qu'est un sélecteur CSS ? Voir la section "Qu'est-ce qu'un sélecteur CSS ?" ci-dessous.

3. Ajouter du CSS personnalisé

Une fois que vous avez ajouté la classe/ID aux éléments que vous souhaitez cacher/afficher, allez dans votre Weglot Dashboard > Sélectionnez votre projet > Settings > Language Switcher et entrez ce code dans le champ "Custom CSS" :

html:not([lang="en"]) .link-en{   
   display: none!important; 
}
html:not([lang="es"]) .link-es {   
   display: none!important; 
}

Comment cela fonctionne-t-il ?

:not() est une pseudo-classe CSS signifiant "lorsqu'il ne s'agit PAS de cette langue".
Par exemple, html:not([lang="es"]) signifie "cacher cet élément lorsque la langue sélectionnée n'est pas l'espagnol".

N'oubliez pas de :

Remplacer en et es avec les codes linguistiques corrects pour votre site
Remplacer .link-en et .link-es avec les noms de vos classes ou de vos identifiants

Vous ne savez pas comment accéder à votre code source ? Vous trouverez plus d'informations ci-dessous.

Si votre langue d'origine est l'anglais avec un code de langue en-US, voici le code final que vous devrez utiliser :

html:not([lang="en-US"]) .link-en {
   display: none!important;
}
html:not([lang="es"]) .link-es {
   display: none!important;
}

Enfin, si vous souhaitez appliquer le code à une troisième langue, comme l'allemand, vous pouvez ajouter une seule ligne de CSS personnalisé. Elle se présentera comme suit :

html:not([lang="en-US"]) .link-en {
  display: none!important;
}
html:not([lang="es"]) .link-es {
   display: none!important;
}
html:not([lang="de"]) .link-de {
  display: none!important;
}

4. Appliquer CSS sur une page spécifique

Parfois, vous pouvez vouloir appliquer un CSS personnalisé uniquement sur certaines pages de votre site web. Par exemple, vous pouvez vouloir masquer le sélecteur Weglot sur les URL contenant /widget , ou exclure des éléments spécifiques uniquement sur les pages du blog.

Cela peut être fait à l'aide de sélecteurs CSS avancés qui s'appuient sur la page URL canonique ou hreflang balises disponible dans la page <head> .

En utilisant la pseudo-classe CSS :has() Combiné à des sélecteurs d'attributs, CSS peut « détecter » si l'URL de la page actuelle contient un chemin spécifique.

⚠️ Cette méthode ne fonctionne que si votre site comprend canonical ou hreflang balises dans le DOM. Sans elles, il n'est pas possible de cibler des URL en utilisant uniquement CSS.

Exemple : Masquer le sélecteur Weglot uniquement sur /widget pages

html:has(head link[rel="alternate"][hreflang="en"][href*="/widget"]) .weglot-container {  display: none; }

Cela masquera le sélecteur de langue Weglot uniquement sur les pages contenant /widget , tout en le gardant visible partout ailleurs.

5. Informations supplémentaires

Qu'est-ce qu'un sélecteur CSS ?

Les sélecteurs CSS sont utilisés pour trouver ou sélectionner des éléments HTML (éléments de vos pages) que vous souhaitez styliser, modifier ou, dans notre cas, masquer. Lorsque vous ajoutez du contenu à votre site web d'origine, vous devriez pouvoir y ajouter un sélecteur CSS.

Par exemple, vous pouvez soit :

- Trouver un champ dédié en fonction du CMS, de l'application ou du plugin que vous utilisez pour créer le contenu :

- Ajouter manuellement la classe ou l'ID directement dans le code HTML, de manière à ce qu'il ressemble à ceci :

<a class="link-en">English button</a>
<a class="link-es">Botón en Español</a>

Ensuite, vous devrez utiliser des règles CSS pour masquer les éléments qui ne doivent pas être affichés en fonction de la langue sélectionnée.

Comment puis-je accéder à mon code source ?

Pour accéder à votre code source, vous pouvez cliquer avec le bouton droit de la souris n'importe où sur la page d'accueil de votre site web et cliquer sur "Voir la source de la page" :