Autre intégration - Comment changer la position du sélecteur de langue ?
Dans cet article, vous verrez les différentes méthodes pour changer la position du sélecteur de langue Weglot si vous utilisez une intégration différente de WordPress et Shopify.
1. Utiliser la fonction Switcher Editor
2. Les crochets des liens de langue
3. L'option Switcher
4. Informations complémentaires (Webflow et Squarespace)
1. Utilisez la fonction Switcher Editor
L'éditeur de sélecteur vous permet de déplacer le sélecteur de langue dans le contexte de votre site Web en faisant glisser le bouton sur un aperçu de votre site Web
. Pour l'utiliser, vous pouvez suivre cet article : Comment utiliser l'éditeur du sélecteur de langue ?
⚠️ Notez que votre site Web doit être en ligne et accessible pour pouvoir utiliser l'éditeur du sélecteur.
2. Les crochets du lien linguistique
Vous avez la possibilité de créer des éléments de langues dans votre menu natif, par exemple, et de les lier avec les crochets de traduction selon le guide suivant
Par exemple, vous créez un menu d'articles " Langues" avec "Anglais" et "Français" comme sous-menus.
L'anglais aura le lien "#Weglot-en" et le français aura le lien "#Weglot-fr".
Notez que la majuscule du 'W' est importante
Si vous avez des difficultés à trouver le bon shortcode, vous pouvez taper votre langue ici et utiliser le shortcode correspondant : https://weglot.com/documentation/available-languages/.
3. L'option commutateur
Vous pouvez également intégrer manuellement le commutateur à tout élément présent sur votre site web en ajoutant l'option "Switchers" à votre code Weglot.initialize
Pour ce faire, allez sur la page où se trouve votre extrait de code Weglot. Vous devriez voir le code suivant (avec votre propre clé API en remplacement de 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>
Important : n'oubliez pas la virgule après votre clé API.
La partie du code qui est importante ici est le ".header-nav" car il détermine l'emplacement de votre sélecteur de langue. Il doit être remplacé par le sélecteur CSS de l'élément parent où vous voulez placer le sélecteur de langue.
⚠️ Pour trouver le sélecteur CSS (la "cible") :
- Cliquez avec le bouton droit de la souris sur l'élément sur lequel vous voulez placer le sélecteur de langue.
- Cliquez sur "Inspecter".
- Utilisez la flèche en haut à gauche de la console.
- Cliquez avec le bouton droit de la souris sur l'élément dans la console.
- Copier > copier le sélecteur
- Collez le code du champ target entre les guillemets.
Ainsi, par exemple, si vous voulez l'ajouter à votre menu :
<nav>
cible : ".menu",
Vous pouvez trouver plus d'informations sur cette méthode dans notre Documentation développeurs
4. Informations complémentaires (Webflow et Squarespace)
Si vous utilisez Squarespace, le sélecteur de langue est géré directement par Squarespace, nous vous recommandons donc de suivre leur documentation.
Si vous utilisez Webflow, n'hésitez pas à essayer ce guide, il vous permettra de créer de jolis sélecteurs de langue sur votre site web.