Andere integratie - Hoe verander ik de positie van de taalswitcher?

In dit artikel leer je hoe je de positie van de Weglot taalswitcher kunt wijzigen als je een andere integratie gebruikt dan WordPress en Shopify.

1. Gebruik de functie Switcher Editor

Met de switcher-editor kun je de taalswitcher in context op je website zetten door de knop op een voorbeeld van je website te slepen.

Om het te gebruiken, kun je dit artikel volgen: Hoe gebruik je de Switcher Editor?

⚠️ Merk op dat uw website live en toegankelijk moet zijn om de Switcher Editor te kunnen gebruiken.

2. De taalkoppelingshaken

Je hebt bijvoorbeeld de mogelijkheid om taalelementen te maken in je eigen menu en deze te koppelen aan de vertaalhaken volgens deze handleiding

Je maakt bijvoorbeeld een itemmenu"Talen" met "Engels" en "Frans" als submenu's.

Engels heeft de link #Weglot-en en Frans zal de link hebben #Weglot-fr

Merk op dat de hoofdletter op de ' W' belangrijk is

Als je problemen hebt met het vinden van de juiste shortcode, kun je hier je taal typen en de gerelateerde shortcode gebruiken: https://weglot.com/documentation/available-languages/

3. De optie Weglot_hier

U kunt de onderstaande code in uw broncode plakken op de plaats waar u de taalswitcher wilt weergeven:

<div id="weglot_here"></div>

4. De schakeloptie

Je kunt de switcher ook handmatig integreren in elk element op je website door de optie switchers optie naar uw Weglot.initialiseren code

Om dat te doen, gaat u naar de pagina waar uw Weglot codefragment staat. U zou de volgende code moeten zien (met uw eigen API-sleutel in plaats van "YOUR_API_KEY"):

<!--Start Weglot Script-->
<script src=“//cdn.weglot.com/weglot.min.js”></script>
<script id=“has-script-tags”>Weglot.initialize({ api_key:“YOUR_API_KEY” })</script>
<!--End Weglot Script-->

,   
    switchers: [
    {
    button_style: {
        full_name: true,
        with_name: true,
        is_dropdown: true,
        with_flags: true,
        flag_type: "circle"
    },
    location: {
        target: ".header-nav", // You'll probably have to change it (see the step below in order to find the correct CSS selector)
        sibling: null
        }
    }
]
});
</script>

Belangrijk: vergeet de komma na je API-sleutel niet.

Het stuk code dat hier belangrijk is, is de .header-nav , omdat dit de locatie van je taalswitcher bepaalt. Dit moet worden vervangen door de CSS selector van het parent element waar je de taalswitcher wilt plaatsen.

⚠️ Om de CSS-selector (het "doel") te vinden:

• Klik met de rechtermuisknop op het element waarin je de taalswitcher wilt plaatsen.
• Ga naar "Inspecteren
• Gebruik de pijl linksboven op de console.
• Klik met de rechtermuisknop op het element in de console.
• Kopiëren > Kopieerkiezer
• Plak de code doelveld tussen de dubbele aanhalingstekens

Dus als je het bijvoorbeeld aan je menu wilt toevoegen:

<nav class="menu">

doel: "nav.menu",

Meer informatie over deze methode vindt u in onze documentatie voor ontwikkelaars

5. Aanvullende informatie (Webflow en Squarespace)

Als je Squarespace gebruikt, wordt de taalswitcher hier rechtstreeks door Squarespace beheerd, dus we raden aan hun documentatie te volgen.

Als je Webflow gebruikt, aarzel dan niet om deze handleiding te proberen. Hiermee kun je mooie taalswitchers voor je website maken.