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.
1. Maak 2 verschillende elementen
2. CSS-selectors toevoegen voor elk element
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 eerst twee verschillende elementen aan op uw oorspronkelijke website. Eén element is voor uw oorspronkelijke taal en het tweede is voor de taal waarnaar u de website wilt vertalen. Deze twee elementen zullen aanwezig zijn in de originele versie, maar ze zullen nooit tegelijkertijd worden weergegeven vanwege een CSS workaround (meer informatie hieronder).
2. Voeg een CSS-selector toe voor elk element
Je moet een specifieke CSS selector (klasse of ID) toevoegen voor elk element. Bijvoorbeeld "link-en" voor het pictogram dat je wilt koppelen aan de Engelse URL en "link-es" voor het pictogram dat gekoppeld is aan de Spaanse URL. Als je niet weet wat een CSS selector is, vind je hieronder meer informatie.
3. Aangepaste CSS toevoegen
Ga vervolgens naar uw Weglot Dashboard > Selecteer uw project > Instellingen > Taalwisselaar en voer deze code in het veld "Aangepaste CSS" in:
html:not([lang="en"]) .link-en, html:not([lang="es"]) .link-es {
display: none!important;
}
Hier is de :not() eigenschap een negatie pseudo-klasse die overeenkomt met een element dat niet wordt weergegeven.
Bijvoorbeeld de voorwaarde html:not([lang="es"]) betekent gewoon "wanneer de taal niet Spaans is". Dat betekent dat de code je website instrueert om verbergen dat specifieke element wanneer de taal niet Spaans is.
Vergeet niet om de juiste talen en de juiste klassen in de bovenstaande code te vervangen door je eigen taal. Zorg er ook voor dat de afkortingen 'en' en 'es' de afkortingen zijn die je gebruikt.
Om de taalcode van je oorspronkelijke taal te vinden, moet je naar je broncode gaan. De code wordt bovenaan weergegeven:
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 short code, dan is hier de definitieve code die je moet gebruiken:
html:not([lang="en-US"]) .link-en,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,html:not([lang="es"]) .link-es, html:not([lang="de"]) .link-de, {
display: none!important;
}
4. Aanvullende informatie
Wat is een CSS-selector?
CSS selectors worden gebruikt om de elementen 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 daar 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 rechtstreeks toe in de HTML, zodat het er zo uitziet:
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":
