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

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. Ajoutez un sélecteur CSS pour chaque élément

Attribuer un sélecteur CSS unique (classe ou ID) à chaque élément. Par exemple, il est possible d'attribuer un sélecteur CSS unique (classe ou ID) à chaque élément :

• 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. Ajoutez du CSS personnalisés

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 > 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; 
}

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

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

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