Hoe inhoud in een specifieke taal weergeven/verbergen?

In dit artikel leer je hoe je inhoud in een specifieke taal kunt weergeven en/of verbergen.

Als je bepaalde inhoud alleen in een specifieke taal wilt weergeven (bijvoorbeeld een knop met een link), volg dan de onderstaande stappen:

1. Maak twee verschillende elementen

Maak in je oorspronkelijke website twee elementen:

• Eén voor je oorspronkelijke taal
• Eén voor de vertaalde taal

Beide elementen bestaan in je originele versie, maar er wordt er maar één tegelijk weergegeven dankzij een CSS-regel.

2. Voeg een CSS-selector toe voor elk element

Wijs een unieke CSS-selector (klasse of ID) toe aan elk element. Bijvoorbeeld:

• link-en voor de Engelse versie
• link-es voor de Spaanse versie

Weet je niet zeker wat een CSS selector is? Raadpleeg de sectie "Wat is een CSS-selector?" hieronder.

3. Aangepaste CSS toevoegen

Zodra u de class/ID hebt toegevoegd aan de elementen die u wilt verbergen/tonen, gaat u naar uw Weglot Dashboard > Selecteer uw project > Instellingen > Taalwisselaar en voert u deze code in het veld "Aangepaste CSS" in:

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

Hoe het werkt:

• :not() is een CSS-pseudoklasse die betekent "wanneer het NIET deze taal is".
• Bijvoorbeeld, html:not([lang="es"]) betekent "verberg dit element wanneer de geselecteerde taal niet Spaans is".

Vergeet niet om:

• vervangen en en es met de juiste taalcodes voor je site
• vervangen .link-en en .link-es met je eigenlijke klasse- of ID-namen

Weet u niet zeker hoe u toegang krijgt tot uw broncode? Hieronder vindt u meer informatie.

Als je oorspronkelijke taal Engels is met een en-US shortcode, dan is hier de definitieve code die je moet gebruiken:

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

Tot slot, als je de code wilt toepassen voor een derde taal, zoals Duits, kun je slechts één regel aangepaste CSS toevoegen. Het ziet er dan als volgt uit:

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. Aanvullende informatie

Wat is een CSS-selector?

CSS-selectors worden gebruikt om HTML-elementen (elementen op je pagina's) te vinden of te selecteren die je wilt stylen, bewerken of, in ons geval, verbergen. Wanneer je inhoud toevoegt aan je oorspronkelijke website, zou je er een CSS-selector aan moeten kunnen toevoegen.

Je kunt bijvoorbeeld:

- Zoek een speciaal veld afhankelijk van het CMS, de app of de plugin die je gebruikt om de inhoud te maken:

Of

- Voeg handmatig de klasse of de ID toe in de HTML, zodat het er als volgt uitziet:

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

Daarna moet je CSS-regels gebruiken om het element te verbergen dat niet moet worden weergegeven volgens de geselecteerde taal.

Hoe krijg ik toegang tot mijn broncode?

Om toegang te krijgen tot uw broncode, kunt u met de rechtermuisknop klikken op een willekeurige plek op de startpagina van uw website en klikken op "Paginabron weergeven":