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 en fonction de votre intégration.

Avec Weglot, par défaut, le sélecteur de langue apparaîtra en bas à droite de votre site web. Cependant, vous avez la possibilité de changer cette position. Pour ce faire, vous avez plusieurs possibilités en fonction de votre intégration :

1. J'utilise Wordpress
2. J'utilise Shopify
3. J'utilise une autre intégration


1. Comment modifier la position du switcher sur WordPress ?

a. Ajoutez le bouton Weglot à votre menu

Vous pouvez placer le bouton dans un menu.

Allez dans Apparence > Menus. Sélectionnez le menu dans lequel vous souhaitez placer le sélecteur de langue Weglot. Sélectionnez "Weglot Switcher" sur votre gauche, cochez la case, puis ajoutez-le au menu. Vous pouvez maintenant faire glisser et déposer le sélecteur pour modifier l'ordre des éléments du menu.

Cliquez sur "Save Changes" et actualisez votre site Web. Le bouton Weglot est maintenant sur votre menu principal.

b. Ajouter le bouton Weglot dans un widget

Allez sur votre WordPress Dashboard > Apparence > Widgets

Ces zones de widget dépendent du thème que vous utilisez. C'est le thème qui définit ces dernières

Actualisez votre site Web, le bouton Weglot est maintenant dans la zone sélectionnée

2. Comment modifier la position du switcher sur Shopify ?

Pour ajouter le sélecteur de langue à votre menu, vous pouvez suivre l'une des 3 méthodes ci-dessous, nous recommandons toutefois la première option.

a. Ajoutez l'option "Switchers" à votre code Weglot.initialize

Allez dans votre Admin Shopify > Boutique en ligne > Thèmes > Action > Modifier le code > Snippets > weglot_switchers.liquid.

Vous devriez voir le code suivant (avec votre propre clé API au lieu 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-->

Ajoutez le morceau de code suivant après "YOUR_API_KEY" ( supprimez simplement l'ancien code après votre clé d'API) :

,
	switchers: [
       {
           // Same as button_style at root
           button_style: {
               full_name: true,
               with_name: true,
               is_dropdown: true,
               with_flags: true,
               flag_type: "circle",
               invert_flags: false
           },
           // Move switcher somewhere in the page
           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 "target") :

  • 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 class="menu">

Votre target sera :

target: ".menu",

Vous pouvez trouver plus d'informations à propos de cette méthode dans notre Documentation pour développeurs

b. L'option Weglot_here

Vous pouvez coller le code ci-dessous dans votre fichier theme.liquid (ou dans un autre fichier liquide), à l'endroit où vous souhaitez que le sélecteur de langue soit affiché.

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

c. Ajouter le switcher comme élément de menu

Allez dans Shopify Admin > Boutique en ligne > Navigation. Cliquez sur le menu dans lequel vous souhaitez ajouter votre sélecteur de langue.

Ensuite, cliquez sur "Add menu item" et ajoutez les langues que vous avez déjà ajoutées dans votre magasin via Weglot.

Dans le champ "Nom", ajoutez la langue et dans le lien, ajoutez le code #Weglot-language. Par exemple, pour un bouton anglais, ajoutez #Weglot-en, pour un bouton français, vous devrez ajouter #Weglot-fr. Notez que la majuscule du "W" est importante. Exemple ci-dessous :

Cliquez sur "Appliquer les modifications" puis sur "Enregistrer".

Vous avez également la possibilité d'afficher votre switcher en menu déroulant. Là encore, cliquez sur 'Add menu item'. Dans le champ 'Nom', vous pouvez ajouter 'Langues' par exemple, ou tout autre nom que vous souhaitez donner à votre sélecteur de langue dans votre menu, puis ajoutez # comme lien et cliquez sur 'Ajouter'.

Ensuite, glissez et déposez les éléments linguistiques sous "Langues" pour qu'ils deviennent des sous-éléments.

Vous pouvez trouver plus d'informations sur cette méthode dans notre Documentation développeurs

3. Comment changer la position du switcher sur d'autres intégrations ?

a. Ajoutez l'option "Switchers" à votre code Weglot.initialize

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-->

Ajoutez le code suivant après "YOUR_API_KEY" ( supprimez simplement l'ancien code après votre clé API) :

,
	switchers: [
       {
           // Same as button_style at root
           button_style: {
               full_name: true,
               with_name: true,
               is_dropdown: true,
               with_flags: true,
               flag_type: "circle",
               invert_flags: false
           },
           // Move switcher somewhere in the page
           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
           }
       }
   ]
   });

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 "target") :

  • 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 :

Votre target sera :

cible : ".menu",

Vous pouvez trouver plus d'informations à propos de cette méthode dans notre Documentation pour développeurs

b. lien direct

Vous avez également la possibilité de créer des éléments de langues dans votre menu natif par exemple et de les lier avec les lien de traduction en suivant ce guide

Par exemple, vous créez un menu d'articles "Langues" avec "Anglais" et "Français" comme sous-menu.
L'anglais aura le lien "#Weglot-en" et le français aura le lien "#Weglot-fr".

Notez que la majuscule du "W" est importante.

c. CSS personnalisé

Vous pouvez ajouter du code CSS personnalisé pour modifier la position du sélecteur de langue directement dans le champ "Custom CSS" présent sur la page Sélecteur de langue:

Vous avez encore besoin d’aide ? Contactez-nousContactez-nous