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

Dans cet article, vous verrez comment afficher et/ou masquer certains contenus dans une langue spécifique.

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

3. Ajouter quelques feuilles de style CSS personnalisées

Si vous devez afficher un contenu uniquement dans une langue spécifique, par exemple un bouton avec un lien, vous pouvez suivre les étapes ci-dessous :

1. Créez 2 éléments différents

En créant deux éléments différents dans votre site web d'origine, vous pouvez définir deux liens différents, par exemple. Le premier suivra le second. Cependant, les deux éléments ne seront jamais affichés en même temps, grâce à une solution de contournement CSS.

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

Vous devrez ajouter un sélecteur CSS spécifique (classe ou ID) pour chaque élément. Par exemple, "link-en" pour l'icône que vous souhaitez lier à l'URL en anglais et "link-es" pour l'icône liée à l'URL en espagnol. Si vous ne savez pas ce qu'est un sélecteur CSS, vous trouverez plus d'informations ci-dessous.

3. Ajoutez du CSS personnalisés

Pour la dernière étape, allez sur votre Weglot Dashboard > Settings > Language Switcher et entrez ce code dans le champ "Custom CSS" :

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

Ici, la propriété :not() est une pseudo-classe de négation qui correspond à un élément qui n'est pas représenté.
Par exemple, la condition html:not([lang="es"]) signifie simplement " lorsque la langue n'est pas l'espagnol"

N'oubliez pas de remplacer les bonnes langues et les bonnes classes dans le code ci-dessus par vos langues respectives. Assurez-vous également que les abréviations "en" et "es" sont bien celles que vous utilisez.

Pour trouver le code linguistique de votre langue d'origine, vous devez vous rendre dans votre code source. Le code est affiché en haut :

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

Ensuite, si votre langue d'origine est l'anglais avec un code court "en-US", voici le code final que vous devrez utiliser :

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

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

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

4. Informations complémentaires

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

Les sélecteurs CSS sont utilisés pour "trouver" (ou sélectionner) les éléments 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 devriez être en mesure soit de :

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

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

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" :