Guide

Comment ajouter un sélecteur de langues WordPress à votre site

Rédigé par
Rédigé par
Revu
Revu par
Comment ajouter un sélecteur de langues WordPress à votre site

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

Traduire votre contenu pour que les visiteurs puissent le lire dans leur propre langue présente d'énormes avantages pour votre entreprise.

Cela peut par exemple 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 un investissement minime en temps et en argent, le retour sur investissement (ROI) d'un site web multilingue WordPress est également intéressant.

Selon l'Industry Specification Group for Localization (ISG), chaque dollar dépensé par une entreprise en localisation lui rapporte 25 dollars. Autrement dit, un rendement de 2 500 % !

Il s'agit donc d'un facteur à prendre en compte si vous souhaitez positionner votre entreprise l'aider à s'imposer sur des marchés étrangers.

Pour maximiser ces bénéfices (et votre retour sur investissement), il est essentiel de faciliter le changement de langue sur votre site grâce à un sélecteur de langues Wordpress facile à trouver, bien conçu et intuitif.

Dans ce guide, vous trouverez tout ce que vous devez savoir pour ajouter un sélecteur de langues à votre site WordPress. Sur la base d'exemples concrets, nous vous fournirons des conseils et bonnes pratiques à suivre et vous expliquerons comment créer et personnaliser un sélecteur de langues à l'aide de Weglot.

Qu'est-ce qu'un sélecteur de langues WordPress ?

Pour schématiser, un sélecteur de langues WordPress est un bouton sur lequel les visiteurs d'une page web peuvent cliquer pour changer la langue du contenu.

Mais les sélecteurs de langues ne se présentent pas toujours sous la forme de boutons : il peut s'agir de texte, de codes de langues, d'une liste déroulante ou de drapeaux. Vous pouvez les placer presque n'importe où sur la page.

Généralement, le sélecteur de langue WordPress se trouve dans l'en-tête, le pied de page, sur la barre latérale ou dans le volet de navigation.

Sélecteur de langues Weglot

Sur le site web de Weglot, le sélecteur de langues WordPress se trouve à côté du logo en haut à gauche de la page.

Il comporte un menu déroulant permettant aux visiteurs de basculer entre l'anglais, le français, l'espagnol, le japonais, l'allemand et le néerlandais. Les utilisateurs disposent ainsi d'un moyen évident d'accéder à votre contenu dans leur propre langue et de commencer à naviguer sur votre site.

3 exemples de sélecteurs de langues réussis

Vous verrez fréquemment des sélecteurs de langues lors de vos navigations sur le web. Cependant, si vous ne parlez pas une langue différente de celle du site (ou si vous ne cherchez pas d'option de sélection de langues), vous pourriez ne pas vous rendre compte de la diversité de leurs designs et de leurs positions.

Dans les prochains sections, nous allons examiner quelques exemples de sélecteurs de langues.

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.

Site de Microsoft Translator
Sélecteur de langues Microsoft Translate

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 langues bien conçu. Vous pouvez le trouver dans le pied de page de chaque page du site.

Paramètres du sélecteur de langues d'Etsy
Sélecteur de langue Etsy

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 langues simple, proposant un menu déroulant dans le pied de page pour changer de langue.

Sélecteur de langues d'Evernote
Sélecteur de langues Evernote

Facile à trouver, il indique clairement : « Choisissez une langue ». Vous savez précisément à quoi vous attendre en cliquant 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.

4 bonnes pratiques pour afficher les sélecteurs de langues WordPress

Pour une grande partie du monde, lire dans sa langue maternelle est un luxe. Selon Ethnologue, l'anglais est la première langue parlée dans le monde, avec plus de 1,5 milliard de locuteurs.

C'est également la langue la plus utilisée en ligne : 52,1 % des sites l'emploient. Ce chiffre diminue progressivement : il y a quelques années, il s'élevait à 62 %.

Si vous ne parlez pas espagnol, chinois ou toute autre langue que vous ne comprenez pas déjà, vous commencerez probablement par chercher un sélecteur de langues.

Les sélecteurs de langues se répartissent souvent en deux catégories structurées par des attributs pertinents :

  • Inexistant. En d'autres termes, le site ne propose aucune traduction.
  • Difficile à trouver. Le sélecteur de langues peut être caché dans le volet de navigation ou à un autre emplacement, obligeant l'utilisateur à jouer à cache-cache.
  • Facile à trouver. À l'inverse, vous pouvez trouver le sélecteur de langues WordPress dans un endroit clair et approprié, 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.

En bref, si un visiteur ne peut pas lire votre site, il fermera cet onglet de navigateur.

Il peut essayer d'utiliser Google Traduction, mais les résultats ne valent pas ceux d'un sélecteur de langues. S'ils peinent à trouver votre sélecteur de langues, les utilisateurs risquent de mettre en doute la qualité de votre design (et donc la fiabilité de votre entreprise).

Il est donc essentiel de permettre aux visiteurs de votre site de choisir facilement leur langue de prédilection. Dans un monde idéal, vous devez être en mesure de le faire sans besoin d'add-ons.

Examinons maintenant quelques bonnes pratiques pour afficher un sélecteur de langues.

1. Choisissez soigneusement vos langues

Les plugins multilingues pour WordPress, comme WPML et Polylang, fournissent souvent des traductions automatiques dans des dizaines de langues différentes.

Mais, contrairement à WPML et Polylang, Weglot prend en charge plus de 110 langues. Cependant, ce n'est pas parce que vous pouvez activer toutes les langues que vous devez le faire.

Au contraire, essayez de n'activer que les langues dont vous avez besoin. Cela signifie que vous devez prendre le temps de réfléchir à votre public cible et aux langues qu'il parle. Pensez également aux nouveaux marchés étrangers sur lesquels vous aimeriez développer votre entreprise à l'avenir.

Les petites entreprises proposent souvent un choix limité à une poignée de langues, tandis que les grandes marques et multinationales, comme Apple et Microsoft, proposent quantité de langues et même des sites web locaux. Si vous gérez une boutique avec WooCommerce, il vous faut donc penser aux territoires sur lesquels vous vendez.

Polaar augmente sa visibilité en ligne après avoir ajouté un sélecteur de langues à sa boutique grâce à Weglot
Augmentation de la visibilité en ligne de Polaar après l'utilisation de Weglot pour ajouter deux langues à son site web.

En limitant le nombre de langues que vous proposez sur votre site, vous vous assurez de ne pas créer de surcharge de travail pour vous et votre équipe.

En d'autres termes, plus vous proposerez de langues, plus vous devrez traquer les erreurs de traduction et veiller au respect des nuances culturelles. Moins vous avez de langues et plus elles sont ciblées, mieux c'est !

2. Veillez à ce que votre sélecteur de langues soit facile à trouver

Il ne devrait pas falloir plus de quelques secondes aux visiteurs pour trouver votre sélecteur de langues.

Il est recommandé de positionner votre sélecteur de langues 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 langues se trouvent souvent dans la navigation principale, sous la forme d'un élément de menu.

Le design de votre site web doit idéalement éviter de trop s'éloigner de ces standards. Les utilisateurs dont la langue maternelle n'est pas la langue par défaut de votre site auront du mal à trouver votre sélecteur de langue s'il est difficile à repérer ou s'il se trouve à un emplacement inhabituel. Ils risquent alors de quitter votre site par contrariété, ce qui nuira à votre SEO.

De manière générale, les visiteurs bilingues et multilingues doivent se sentir bienvenus sur votre site
et doivent aisément y naviguer et accéder à votre contenu, quelle que soit leur langue maternelle. En plaçant votre sélecteur de langues bien en évidence, vous contribuerez grandement à atteindre cet objectif.

Par exemple, regardez le sélecteur de langues de l'agence web Seahawk Media :

Site web de Seahawk Media avec le sélecteur de langues en évidence

Certains sites définissent la langue proposée en fonction du navigateur web de l'utilisateur. Bien que cela aide effectivement l'utilisateur en lui mâchant le travail, certains utilisateurs peuvent tomber sur la mauvaise version de votre site.

Par exemple, un visiteur peut se trouver physiquement en Allemagne et votre site WordPress multilingue peut le détecter automatiquement et afficher l'allemand. Cependant, s'il s'agit d'un voyageur dont la langue maternelle n'est pas l'allemand, cela n'améliorera pas son expérience.

Zalando, qui propose de changer la langue dans laquelle vous consultez le site
Zalando, qui offre aux utilisateurs la possibilité de changer de langue.

En bref, la détection automatique de l'emplacement géographique est une fonctionnalité intéressante, mais vous devez également prévoir un sélecteur de langues qui permettra à vos visiteurs de choisir leur langue de préférence si nécessaire.

3. Adaptez votre sélecteur de langues WordPress à votre design

La plupart des plugins de traduction fournissent un bouton de changement de langue par défaut, mais pas tous. Vous devrez alors créer le vôtre.

Bien qu'il puisse être tentant de s'en tenir au sélecteur de langues fourni par défaut, mieux vaut le personnaliser pour qu'il corresponde à l'apparence et à l'esprit de votre site.

Il peut par exemple s'agir de configurer les paramètres de votre plugin pour qu'il affiche du texte au lieu de boutons, ou des codes de langues au lieu de drapeaux.

Weglot vous permet de personnaliser le CSS de votre sélecteur de langues WordPress. Cela vous permet d'apporter des modifications stylistiques plus sophistiquées à votre sélecteur de langues.

Weglot propose une multitude d'options, simples comme plus complexes, pour personnaliser le design de votre site. Nous y reviendrons plus en détail ultérieurement. Cependant, pour vous montrer comment le style de votre sélecteur de langues peut faire toute la différence, voici un aperçu du sélecteur de langues par défaut fourni avec Weglot :

Le sélecteur de langues de Doordash recrutement
Le sélecteur de langues par défaut de Weglot sur Doordash, qui a utilisé Weglot pour traduire son site recrutement

Weglot place d'office le sélecteur de langue dans le coin inférieur droit. C'est tout à fait acceptable, mais pas toujours idéal.

En fonction du design du site, ce choix de mise en page peut sauter à l'œil non seulement en raison de son emplacement, mais aussi d'une possible dissonance avec le reste du design du site. Cependant, ici, le sélecteur s'intègre parfaitement à la page de Doordash.

Jetons ensuite un œil au site du restaurant Cléo. En accord avec son design épuré, élégant et minimaliste, le sélecteur de langues prend la forme d'un menu déroulant simple mais clair, situé juste à côté du bouton « Réserver une table ». Il s'agit d'une zone très fréquentée sur le site d'un restaurant, ce qui le rend très visible.

Le sélecteur de langues du restaurant Cléo ajouté par Weglot
 Sélecteur de langues du Restaurant Cléo

Examinons maintenant le site web d'Inbenta, qui a ajouté sa propre touche à son sélecteur de langues.

Le sélecteur de langues d'Inbenta ajouté par Weglot

Le designer a utilisé du CSS personnalisé pour styliser le sélecteur de langues et assurer sa cohérence avec le design du site web. L'œil du visiteur est ainsi attiré en haut à droite de la page vers le sélecteur de langues WordPress. Ainsi, les visiteurs (en particulier les plus impliqués) savent immédiatement comment sélectionner leur langue préférée.

Démonstration interactive de Weglot pour les utilisateurs de WordPress

4. Sélectionnez soit les drapeaux, soit les noms des langues de votre choix

Les drapeaux des pays sont souvent utilisés afin de représenter différentes langues pour permettre d'en. Si l'utilisation de drapeaux peut tenter les designers pour de nombreuses raisons (ils sont colorés, emblématiques et peu encombrants), ils ne sont pourtant pas conçus pour représenter des langues. Cela pose plusieurs problèmes.

Prenons l'exemple du portugais. C'est la langue officielle du Portugal, du Brésil, du Cap-Vert, de la Guinée-Bissau, du Mozambique, de l'Angola, de São Tomé et Príncipe, du Timor oriental, de la Guinée équatoriale et de Macao.

Il est également présent culturellement (dans ses variantes traditionnelle et créole) en Inde, au Sri Lanka, en Malaisie, dans les îles ABC des Caraïbes et sur l'île indonésienne de Flores.

Dans ce cas, le choix d'un drapeau est une décision difficile, qui pourrait repousser ou désorienter presque tous ceux qui parlent réellement cette langue.

Il est également possible que les visiteurs ne reconnaissent pas un drapeau en raison de la taille de l'icône, ou qu'ils soient déroutés par des drapeaux d'apparence similaire.

Naturellement, cela ne pose pas de problème si vous avez l'intention de cibler les locuteurs de cette langue dans les pays que les drapeaux représentent !

Le blog Flags are not languages, consacré au design d'expériences utilisateur à l'international, recommande d'utiliser systématiquement le nom d'une langue sous sa forme locale. Par exemple, au lieu d'utiliser les formes françaises de « allemand » et « chinois », nommez-les « Deutsch » et « 中文 ».

Comment créer un sélecteur de langues WordPress avec Weglot

Nous allons vous montrer comment configurer un sélecteur de langues WordPress simple d'utilisation avec Weglot. Nous verrons ensuite comment effectuer des personnalisations de style avancées à l'aide de CSS.

Weglot est l'un des plugins WordPress multilingues les plus populaires et les plus simples d'utilisation. Avec Weglot, vous pouvez ajouter une autre langue à votre site en moins de cinq minutes, et adapter le sélecteur de langues intégré au design de votre site.

Vous pouvez ajouter un sélecteur de langues à votre site WordPress à différents emplacements : dans votre espace de navigation, à l'aide d'un widget, d'un shortcode ou d'un code HTML. Ici, nous allons ajouter un sélecteur de langues dans le pied de page de votre site en utilisant des codes de langues plutôt que des drapeaux.

Tout d'abord, vous devez configurer le plugin Weglot sur votre site WordPress. Notre bibliothèque de ressources propose un tutoriel complet expliquant comment installer et activer le plugin Weglot.

Vous devrez saisir votre clé API, la langue d'origine de votre site et la langue dans laquelle vous souhaitez traduire votre contenu.

Si vous n'avez pas encore de compte Weglot, vous devez en créer un pour obtenir votre clé API. Ajoutez ensuite la langue d'origine de votre site et les langues que vous souhaitez ajouter (« Destination languages »).

Configuration principale de Weglot sur le backend de WordPress
Configuration de Weglot dans WordPress

Une fois vos modifications enregistrées, jetez un œil à la page d'accueil de votre site. Vous verrez un nouveau sélecteur de langues 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.

Le sélecteur de langues par défaut de Weglot sur un site WordPress
Sélecteur de langues par défaut de Weglot

Il s'agit du design fourni par défaut avec Weglot. Vous pouvez personnaliser l'apparence et l'emplacement de votre sélecteur de langues WordPress de plusieurs manières.

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 :

Design de boutons de langues Weglot sur le backend de WordPress

Personnalisation du design du sélecteur de langues Weglot sur WordPress

  • 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 le CSS proposé par vos propres sélecteurs personnalisés - nous y reviendrons dans un instant. Pour l'heure, personnalisons le sélecteur de langues afin qu'il affiche les noms des langues sans 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 :

Comment changer de langue sur le sélecteur Weglot

Vous pouvez également effectuer des personnalisations plus avancées. Par exemple, vous pouvez choisir d'afficher le sélecteur de langues dans l'en-tête.

Il y a plusieurs façons de procéder : dans un menu, en tant que widget, en utilisant un shortcode, ou du 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, même sans la moindre expertise.

Revenez à l'écran Weglot dans votre tableau de bord WordPress, et défilez vers le bas de la page, jusqu'à ce que vous aperceviez les options d'affichage du sélecteur de langues :

Option pour changer la position du bouton de la langue en utilisant Weglot sur le backend de WordPress
Positionnement du sélecteur de langues Weglot dans WordPress

Notez que certains emplacements pourront mieux convenir en fonction de votre approche. Par exemple, il est recommandé d'utiliser le shortcode [weglot_switcher] pour les éléments intégrés au sein de vos pages, en utilisant les fonctionnalités proposées par votre page builder préféré (l'éditeur de blocs utilise le bloc de shortcodes). Bien entendu, pour un sélecteur dans un en-tête ou un pied de page, un widget ou un menu peuvent s'avérer plus efficaces.

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

Sélecteur de langues dans une liste déroulante sur un site WordPress

Bien que le sélecteur de langues 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.

À partir de là, vous pouvez utiliser la zone de texte « Override CSS » pour définir vos les polices, couleurs et tailles de texte afin de les adapter au design de votre site :

Ajouter du code à un sélecteur de langues WordPress en utilisant Weglot

Option « CSS Override » pour le sélecteur de langues Weglot dans WordPress

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

Un design différent pour un sélecteur de langues WordPress

Avec le bon placement et quelques lignes de CSS, vous pouvez adapter rapidement et facilement le sélecteur de langues de Weglot à votre site, sans besoin de compétences pointues en matière d'édition de modèles, de langage HTML ou PHP.

Étude de cas : comment Baltazare utilise Weglot

Site web de Baltazare
Étude de cas : la traduction du site internet de l'agence Baltazare par Weglot

Fondée en 2014, l'agence web Baltazare conçoit et développe des sites web pour de grandes marques comme Candia et Royal Monceau. Utilisant WordPress, l'agence développe plus de 40 sites web par an.

Avant la découverte de Weglot, les projets de sites web multilingues avaient toujours été difficiles à gérer pour Baltazare. L'équipe avait du mal à trouver une solution de traduction qualitative et répondant aux besoins de ses clients. Pendant un certain temps, WPML, un autre plugin de traduction WordPress populaire, a fait l'affaire. Mais l'équipe souhaitait une solution moins complexe et plus efficace.

Après avoir testé l'approche WordPress multisite avec un site par langue, et avoir trouvé la maintenance trop compliquée à gérer, l'équipe s'est tournée vers Weglot. Guillaume Vergano, fondateur de Baltazare, s'est déclaré ravi de constater que Weglot s'intègre parfaitement à n'importe quel site WordPress, quel que soit les thèmes et les plugins, et traduit l'intégralité du contenu, y compris les types de publications et structures personnalisés.

« Apprendre à utiliser Weglot est très facile pour nous comme pour nos clients. Nous créons systématiquement un bref tutoriel vidéo de quelques minutes pour expliquer à chacun d'entre eux comment utiliser Weglot, et voilà tout », a expliqué Guillaume.

Baltazare utilise désormais Weglot pour de nombreux nombre de sites actifs (dont le site des Olympiades Internationales de la Chimie France 2019) et l'équipe recommande systématiquement Weglot à ses clients comme une solution de confiance pour la gestion de sites multilingues. C'est une alternative simple et intuitive à WPML ou à Multisite.

Optimisez votre empreinte culturelle grâce à un sélecteur de langues WordPress bien conçu

De manière générale, le travail d'un designer consiste à créer des éléments visuels chargés de sens et qui plaisent aux utilisateurs. Lorsqu'il s'agit d'un site multilingue, ce travail est encore plus important : les traductions ne sont utiles que si les sélecteurs de langues sont faciles à trouver et à utiliser.

Un sélecteur de langues bien conçu est non seulement un plus, mais aussi un objectif en soi. Si votre nouveau sélecteur de langues semble faire partie intégrante de votre site internet, les visiteurs et les clients se sentiront plus à l'aise en parcourant votre contenu traduit. Cela permet de créer (et de renforcer) la confiance, et contribue significativement à créer des liens solides entre vos publics et votre marque.

Un sélecteur de langues au design mûrement réfléchi est un atout essentiel pour tout site web international. Forts de ces éclairages, les designers peuvent créer des expériences de navigation qui servent les utilisateurs au lieu de les entraver.

Dans ce guide, nous allons examiner les points suivants :

En savoir plus sur l'utilisation de Weglot

Essayez gratuitement