Comment ajouter un sélecteur de langue sur WordPress

Vous envisagez d'ajouter un sélecteur de langue à votre site WordPress ? Si oui, vous êtes au bon endroit !

L'ajout d'un sélecteur de langue à votre site WordPress et la traduction de votre contenu pour permettre à vos visiteurs de le consulter dans leur propre langue peuvent vous aider à atteindre de nouveaux marchés, vous offrir l'opportunité d'améliorer votre SEO et votre visibilité en ligne, ou encore vous aider à créer des relations de confiance avec de nouveaux publics.

Pour en tirer tous les bénéfices (et notamment un retour sur investissement élevé), il est essentiel de permettre à vos visiteurs de changer facilement de langue sur votre site grâce à un sélecteur de langue facile à trouver, bien conçu et d'utilisation intuitive.

Cet article vous livre un guide détaillé, étape par étape, pour vous aider à ajouter un sélecteur de langue WordPress à votre site et de le personnaliser pour qu'il s'adapte au design de votre site.

Tutoriel : ajouter un sélecteur de langue WordPress avec Weglot

L'ajout d'un sélecteur de langue sur WordPress est simple et rapide, grâce au plugin de traduction pour WordPress, Weglot. 

Avec Weglot, vous pouvez ajouter plusieurs langues à votre site en moins de 5 minutes et en personnaliser le design sans avoir à coder quoi que ce soit.. 

Vous pouvez choisir d'ajouter un sélecteur de langue WordPress à à différents emplacements de votre site, et notamment dans votre menu, dans un widget ou dans le code source de votre page HTML. 

Dans ce tutoriel, nous allons ajouter un sélecteur de langue au menu de navigation de votre site. Par défaut, Weglot ajoute le sélecteur de langue en bas à gauche de votre site. Nous vous montrerons ensuite comment le déplacer, soit via vos paramètres, soit en utilisant l'éditeur visuel de sélecteur de langue de Weglot. 

Étape n° 1 :

Installez et activez le plugin Weglot sur votre site WordPress. Créez ensuite un compte Weglot, qui vous permettra de gérer et d'éditer vos traductions mais aussi d'obtenir votre clé API unique pour l'intégration.

‍

Étape n° 2 : 

Cliquez sur l'onglet Weglot dans votre tableau de bord WordPress et ajoutez votre clé API, sélectionnez la langue d'origine de votre site et la ou les langues que vous souhaitez ajouter, puis cliquez sur Enregistrer. 

Étape n° 3 :

Votre site WordPress est désormais multilingue ! Weglot a automatiquement détecté le contenu de votre site, l'a traduit en utilisant une première couche de traduction automatique, et l'a affiché dans des sous-répertoires linguistiques.

Jetez un œil à la page d'accueil de votre site, et vous verrez un nouveau sélecteur de langue WordPress dans le coin inférieur droit.

Au clic, il se déploie pour afficher les langues disponibles et vous permet de choisir et d'afficher la traduction que vous préférez.

Il s'agit du design par défaut fourni par Weglot, et vous pouvez maintenant personnaliser l'apparence et l'emplacement de votre sélecteur de langue WordPress de plusieurs manières différentes.

Personnaliser votre sélecteur de langue WordPress

Pour commencer à effectuer des personnalisations élémentaires, allez dans Weglot > Language button design (Optional) ) dans le back-end de WordPress. Sur cet écran, vous pouvez choisir :

• D'utiliser ou non un menu déroulant,
• D'utiliser des drapeaux dans votre sélecteur et, si oui, quel type,
• D'afficher le nom de vos langues,
• D'afficher uniquement le code de la langue.

‍

Il existe également une section permettant de remplacer les feuilles de style CSS par vos propres sélecteurs personnalisés (nous y reviendrons dans un instant). Pour l'instant, personnalisons le sélecteur de langue pour qu'il affiche les noms des langues sans les drapeaux, tout en conservant le menu déroulant.

Pour ce faire, décochez « With flags » et cochez « Is fullname », puis jetez un coup d'œil à votre site :

‍

Il se peut que vous souhaitiez également procéder à des personnalisations avancées. Par exemple, affichons le sélecteur de langue dans la navigation.

Il existe plusieurs façons de procéder, soit dans un menu, en tant que widget, en utilisant un shortcode, ou avec du code HTML. Notez que vous n'avez pas besoin de maîtriser le langage PHP ni d'accéder aux modèles structurels de votre site. Vous jouissez des mêmes possibilités qu'un développeur, sans avoir besoin d'expérience ou d'expertise

Retournez à l'écran Weglot dans votre tableau de bord WordPress et faites défiler la page jusqu'à visualiser des options d'affichage du sélecteur de langue :

‍

Il vous suffit de suivre les instructions en fonction de l'emplacement où vous souhaitez placer votre sélecteur de langue. Dans le cas présent, nous irons dans « Apparence -> menu » et nous ferons glisser le sélecteur pour modifier l'ordre des éléments du menu. 

Lorsque tout est prêt et que vous avez enregistré vos modifications, jetez à nouveau un œil à votre interface :

Bien que le sélecteur de langue se trouve dans l'en-tête, il ne s'affiche pas correctement. Vous pourriez également utiliser une succession de codes de langues plutôt qu'un menu déroulant.

C'est ici que vous utiliserez le CSS. Tout d'abord, désactivez le paramètre de liste déroulante dans le menu Weglot dans WordPress. Ensuite, cochez la case permettant d'afficher les codes de langues.

Dès lors, vous pouvez utiliser la zone de texte Override CSS pour définir les polices, couleurs et tailles de texte afin d'adapter votre sélecteur
au design de votre site :

Enfin, jetez un coup d'œil au design de votre front-end :

Avec le bon positionnement et quelques lignes de CSS, vous pouvez rapidement et facilement adapter le sélecteur de langue de Weglot à votre site sans avoir besoin de compétences avancées en matière d'édition de modèles, de code HTML ou PHP. 

Notez que les modifications CSS personnalisées sont entièrement facultatives. Vous pouvez déplacer votre sélecteur et en modifier le design via les paramètres de l'onglet Weglot de votre espace d'administration WordPress. 

Vous pouvez également utiliser l'éditeur visuel de sélecteur de langue de Weglot si vous préférez une approche plus visuelle : 

L'éditeur visuel de sélecteur de langue vous permet de contrôler les mêmes paramètres que ceux disponibles dans votre tableau de bord WordPress. Il vous suffit de faire glisser le sélecteur à l'endroit où vous souhaitez qu'il apparaisse, puis de cliquer sur « Enregistrer » pour que les modifications soient affichées sur votre site WordPress. 

Bonnes pratiques pour l'affichage des sélecteurs de langue dans WordPress

On considère généralement qu'il existe deux grandes catégories de sélecteurs de langue, caractérisées par des attributs spécifiques :

• Inexistant. En d'autres termes, le site ne propose aucune traduction.
• Difficile à trouver. Le sélecteur de langue peut être caché dans le menu de navigation ou à un autre emplacement, obligeant l'utilisateur à jouer à cache-cache.
• Facile à trouver. Inversement, le sélecteur de langue WordPress peut être placé dans un endroit évident et pertinent, comme l'en-tête ou le pied de page.
• Très facile à trouver. Dans le meilleur des cas, le sélecteur WordPress se trouve dans une zone bien visible de l'écran, comme l'en-tête. Cela vous permettra de choisir rapidement la bonne langue.

Il est donc essentiel de permettre aux visiteurs de votre site de choisir facilement leur langue préférée. Idéalement, vous devez pouvoir le faire sans avoir recours à des modules complémentaires. Ceci établi, considérez les points suivants :

1. Choisissez vos langues avec soin. Ce n'est pas parce que vous pouvez activer toutes les langues que vous devez le faire ; vous ne devez configurer que les langues dont vous avez besoin. 
2. Faites en sorte que votre sélecteur de langue soit facile à trouver. Il est recommandé de positionner votre sélecteur de langue dans l'en-tête ou le pied de votre page. Ces deux options sont également efficaces. Pour les appareils mobiles, les sélecteurs de langue se trouvent souvent dans la navigation principale, sous la forme d'un élément de menu.
3. Adaptez votre sélecteur de langue WordPress à votre design. Bien qu'il puisse être tentant de s'en tenir au sélecteur de langue fourni par défaut, mieux vaut le personnaliser pour qu'il corresponde à l'apparence et à l'esprit de votre site.
4. Optez pour des drapeaux ou pour des noms pour les langues que vous avez choisies. Le recours à des drapeaux est souvent tentant pour les designers pour de nombreuses raisons (ils sont colorés, éloquents et peu encombrants), mais les drapeaux ne sont pas conçus pour représenter des langues. Ce qui pose plusieurs problèmes.

3 exemples de sélecteurs de langue réussis

Vous croiserez souvent des sélecteurs de langue dans le cadre de votre navigation sur le web. Toutefois, si vous ne parlez pas une autre langue que celle par défaut (ou si vous ne cherchez pas d'option de changement de langue), vous pourriez ne pas avoir conscience de la diversité de leurs designs et de leurs emplacements sur les pages.

1. Microsoft Translator

Le site de Microsoft Translator permet aux visiteurs de choisir parmi près de 40 langues à l'aide d'un menu déroulant (ou, dans ce cas précis, d'un menu déroulant ascendant, où la liste s'ouvre au-dessus), situé près du pied de page. L'entreprise a également choisi d'afficher le nom de chaque langue en entier, dans la langue en question, ce qui permet aux visiteurs de reconnaître la leur immédiatement et garantit la clarté des options.

Nous apprécions aussi l'option complémentaire nous permettant de nous rendre sur l'interface locale du site. Il n'est que trop fréquent de voir de grandes marques rendre la sélection d'une langue difficile et obliger plutôt les utilisateurs à changer de zone géographique.

2. Etsy

Plateforme international de vente en ligne permettant à quiconque ayant le sens de l'artisanat de vendre ses produits faits maison, Etsy a logiquement investi dans un sélecteur de langue bien conçu. Vous pouvez le trouver dans le pied de page de chaque page du site.

Vous pouvez choisir une zone géographique, une langue et une devise. Au clic apparaît un pop-up modal dans lequel vous pouvez modifier chacune de ces options. Il s'agit d'un design astucieux et intuitif qui permet à l'utilisateur de choisir sa langue sans être redirigé vers l'interface locale d'un site.

3. Evernote

Evernote, l'une des plus populaires des applications de prise de notes, s'en tient à un sélecteur de langue simple, proposant un menu déroulant dans le pied de page pour changer de langue.

Il est facile à trouver et offre un étiquetage clair - « Choisissez une langue ». Ainsi, vous saurez ce que vous allez trouver si vous cliquez dessus.

Utiliser des sélecteurs de langue complexes n'est pas toujours nécessaire. Après tout, si vous compliquez les choses pour vos visiteurs, ils risquent de quitter votre site.

Comment vous doter d'un sélecteur de langue WordPress bien conçu

Ajouter un sélecteur de langue WordPress à votre site est simple à condition de disposer des bons outils. Weglot vous livre non seulement un sélecteur de langue ajouté automatiquement, mais vous permet aussi d'en modifier le design sans l'aide d'un développeur. 

De plus, Weglot vous offre une première couche de traduction automatique sur laquelle vous avez ensuite un contrôle total, ce qui vous permet d'apporter des modifications, d’inviter des collègues à y collaborer, et de commander des traductions professionnelles pour peaufiner les traductions. 

Optez pour un plugin de traduction WordPress également conçu pour optimiser le référencement multilingue . Grâce à des sous-répertoires linguistiques automatiquement créés, à la traduction des métadonnées, à l'implémentation de balises hreflang, et bien plus encore ! 

Ça y est, vous avez décidé d'ajouter un sélecteur de langue WordPress à votre site ? Essayez la version d'essai gratuite de 10 jours de Weglot; pas besoin de carte de crédit.