Naar hoofdcontent

Language Switcher

Language Switcher

Met de Clonable Language Switcher kunnen bezoekers eenvoudig wisselen tussen de beschikbare talen van je website.

De plugin ondersteunt meerdere manieren om de language switcher toe te voegen, zodat deze past bij vrijwel iedere WordPress-installatie.

Plaatsingsmethoden​

De plugin ondersteunt drie verschillende manieren om de language switcher te tonen:

  • Floating widget — een zwevende switcher op iedere pagina.
  • WordPress-menu — als menu-item in een klassiek menu of block-thema.
  • Shortcode — handmatig geplaatst met [clonable_language_switcher].
tip

Gebruik bij voorkeur slechts één methode tegelijk om dubbele language switchers te voorkomen.

Show flag of Show text is vereist

Alle drie de methoden vereisen dat Show flag of Show text is ingeschakeld (zie General). Wanneer beide uitstaan, rendert de language switcher niets.

Floating widget​

De zwevende switcher wordt automatisch aan iedere pagina toegevoegd en vereist geen aanpassingen aan je thema of menu's.

  1. Open het tabblad Language Switcher.
  2. Ga naar de sectie Floating widget.
  3. Schakel Enable floating language switcher in en kies eventueel een positie.
  4. Sla de instellingen op.

De switcher wordt direct zichtbaar op alle pagina's.

WordPress-menu​

De switcher kan in een bestaand WordPress-menu worden geïntegreerd.

Klassieke WordPress-menu's:

  1. Open Weergave → Menu's.
  2. Selecteer het gewenste menu.
  3. Voeg een Clonable Language Switcher item toe.
  4. Sla het menu op.

Block-thema's (Site Editor):

  1. Open de Site Editor en bewerk de navigatie.
  2. Voeg een Submenu block toe.
  3. Geef dit block de CSS-class clonable-language-switcher.

Is het Submenu-block niet beschikbaar? Gebruik dan een shortcode-block met [clonable_language_switcher].

Shortcode​

Je kunt de switcher ook handmatig plaatsen met behulp van een shortcode:

[clonable_language_switcher]

Dit is handig wanneer je de switcher wilt tonen op pagina's, in widgets, binnen page builders of op een zelfgekozen positie binnen je thema. Op het tabblad Language Switcher vind je onder General een live preview van de shortcode-output en een knop om de shortcode te kopiëren.

Instellingen​

De instellingen van de language switcher vind je op het tabblad Language Switcher, verdeeld over vier secties: General, Styling, Floating widget en Languages.

General​

Show flag​

Toont een vlag naast de taal.

Show text​

Toont de naam van de taal (bijvoorbeeld Nederlands, English, Deutsch) of het aangepaste label dat je in de sectie Languages hebt ingesteld.

Show country code​

Toont de landcode (afkorting) in plaats van de taalnaam. Show text moet hiervoor ingeschakeld zijn.

Language switcher shortcode output preview​

Toont een live preview van de output van de [clonable_language_switcher]-shortcode.

Styling​

Rounded flags​

Toont vlaggen als cirkel (.ff-rounded) in plaats van rechthoekig (.ff-square).

Choose language switcher size​

Bepaalt de grootte van de vlag: small, medium of large.

Choose background color​

Bepaalt de achtergrondkleur van de switcher. De standaardwaarde is #ffffff.

Choose hover background color​

Bepaalt de achtergrondkleur bij hover. De standaardwaarde is #efefef.

Disable default language switcher styles​

Wanneer ingeschakeld worden de standaard CSS-stijlen van de language switcher niet geladen. Gebruik dit wanneer je de switcher volledig met eigen CSS wilt opmaken.

Enable custom language switcher styling​

Wanneer ingeschakeld verschijnt er een CSS-editor waarmee je de standaardstijlen kunt overschrijven. Je wijzigingen worden opgeslagen in een apart bestand en hebben geen invloed op de standaard-stylesheet.

Custom language switcher styling​

De CSS-editor waarin je eigen stijlen invoert. Deze is alleen zichtbaar wanneer Enable custom language switcher styling is ingeschakeld. Bij een leeg veld wordt de standaard-CSS als uitgangspunt gebruikt.

Floating widget​

Enable floating language switcher​

Zet de zwevende language switcher aan of uit.

Choose a position​

Bepaalt de positie van de zwevende switcher: bottom-left of bottom-right.

Languages​

In de talentabel beheer je welke talen in de language switcher worden getoond. Per taal stel je in:

  • Flag — de vlag, gekozen via de locale-dropdown;
  • Text — de weergavenaam (bijvoorbeeld de of german);
  • Domain — de URL van de betreffende taalversie.

Met Add another language voeg je een rij toe; met het prullenbak-icoon verwijder je een rij. Let op:

  • URL's beginnen altijd met https://.
  • Voeg bij voorkeur ook de huidige site zelf toe aan de tabel.

Na het opslaan worden de wijzigingen direct toegepast op de website.

Styling aanpassen met CSS​

De language switcher kan volledig worden aangepast met eigen CSS.

Veelgebruikte CSS-klassen​

.clonable-language-navigation {
}

.clonable-language-switcher {
}

.cl-language-switcher-menu-item {
}

.cl-language-switcher-link {
}
info

Voor geavanceerde styling is hieronder een volledig overzicht van alle beschikbare CSS-klassen opgenomen.

Volledig overzicht CSS-klassen
/* Outer container */
.clonable-language-navigation {
}

/* Shortcode variant */
.clonable-language-switcher-shortcode {
}

/* Trigger button */
.clonable-language-switcher {
}
.cl-language-switcher-lan-container {
}
.cl-language-switcher-lan-flag {
}

/* Menu / dropdown items */
.cl-language-switcher-menu-item {
}
.cl-language-switcher-link {
}

/* Block-thema (Gutenberg) submenu */
.clonable-language-switcher-block-submenu {
}
.clonable-language-switcher-block-submenu-item {
}
.clonable-language-switcher-chevron {
}

/* Flag helper classes */
.fflag {
}
.ff-rounded {
}
.ff-square {
}
.ff-md {
}

Veelgestelde vragen​

Ik zie geen language switcher?​

Controleer eerst of Show flag of Show text is ingeschakeld — zonder minimaal één van beide rendert de switcher niets.

Controleer vervolgens, afhankelijk van de gebruikte methode:

  • Floating widget — of Enable floating language switcher is ingeschakeld;
  • WordPress-menu — of het Clonable Language Switcher menu-item is toegevoegd (klassiek menu) of of het Submenu-block de class clonable-language-switcher heeft (block-thema);
  • Shortcode — of [clonable_language_switcher] op de pagina is geplaatst.

Controleer daarnaast:

  • of er actieve clones beschikbaar zijn;
  • of de plugin succesvol gesynchroniseerd is;
  • of een caching-plugin oude pagina's serveert.

Leeg indien nodig de cache van WordPress en je caching-plugin.

Kan ik meerdere switchers tegelijk gebruiken?​

Ja, technisch gezien wel.

Wij raden echter aan om slechts één methode tegelijk te gebruiken om dubbele language switchers te voorkomen.

Kan ik de styling volledig aanpassen?​

Ja. De HTML-structuur en CSS-klassen van de switcher zijn publiek beschikbaar en kunnen volledig worden overschreven via je eigen stylesheet.

Laatst bijgewerkt op