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.

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

Tout d'abord, créez deux éléments différents dans votre site web d'origine. Un élément sera pour votre langue d'origine, et le second pour la langue dans laquelle vous voulez le traduire. Ces deux éléments seront présents dans la version originale, mais ils ne s'afficheront jamais en même temps grâce au code CSS que nous allons ajouter (plus d'informations ci-dessous).

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

Ensuite, allez sur votre Weglot Dashboard > Sélectionnez votre projet > Paramètres > Sélecteur de langue 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; 
}

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". Cela signifie que le code demandera à votre site web de cacher cet élément particulier 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 {
   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. 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, cacher. Lorsque vous ajoutez du contenu à votre site web d'origine, vous devriez pouvoir y ajouter un sélecteur CSS.

Par exemple, vous pouvez soit

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

Ou

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