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 !

Ajouter un sélecteur de langue à votre site WordPress et traduire votre contenu afin que les visiteurs puissent le lire dans leur propre langue peut vous aider à conquérir de nouveaux marchés, à améliorer votre référencement naturel (SEO) et votre visibilité en ligne, et à gagner la confiance de nouveaux publics. Vous ne savez pas quel plugin choisir ? Consultez notre comparatif « »des meilleurs plugins WordPress multilingues sur .

Avec Weglot, vous pouvez ajouter plusieurs langues à votre site WordPress ou à WooCommerce en moins de 5 minutes, sans avoir à toucher au code.

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

Un sélecteur de langue WordPress est un élément de navigation qui permet aux visiteurs de choisir leur langue préférée et de basculer entre les différentes versions traduites de votre site. Vous pouvez en ajouter un à n'importe quel site WordPress en installant un plugin de traduction, en sélectionnant vos langues et en plaçant le sélecteur dans votre menu, votre zone de widgets ou votre page à l'aide d'un shortcode.

Avec Weglot, unplugin de traduction multilingue pour WordPress basé sur l'IA, vous pouvez ajouter plusieurs langues à votre site en 5 minutes et personnaliser le design sans aucune ligne de code. La configuration est la même pour WooCommerce : le sélecteur de langue s'affiche et fonctionne de la même manière, que vous gériez un site WordPress standard ou une WooCommerce .

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 1 : Installer et activer le Weglot

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

Étape 2 : Connectez Weglot sélectionnez vos langues

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 3 : Vérifiez votre site et le sélecteur de langue

Votre site WordPress est désormais multilingue ! Weglot automatiquement détecté le contenu de votre site, l'a traduit à l'aide de l'IA et l'a affiché dans des sous-répertoires par langue.

Jetez un œil à l'interface publique de votre site : 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 :

‍

Vous pouvez également effectuer certaines personnalisations avancées. Par exemple, affichons le sélecteur de langue dans le menu de navigation ou dans la barre latérale.

Options d'emplacement du sélecteur de langue

Il existe plusieurs façons de procéder : via un menu, sous forme de widget, à l'aide d'un shortcode, avec du code HTML, ou sous forme de bouton flottant qui reste affiché dans un coin de l'écran lorsque l'utilisateur fait défiler la page. Vous pouvez également placer le sélecteur directement dans le contenu d'un article ou d'une page à l'aide du shortcode [weglot] : collez-le dans l'éditeur de page à l'endroit où vous souhaitez qu'il apparaisse. Le sélecteur Weglot fonctionne avec tous les thèmes WordPress, y compris les thèmes FSE et les thèmes à blocs.

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.

Stylisation avancée du sélecteur de langue

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.
• Il est difficile à trouver. Le sélecteur de langue peut être caché dans la navigation ou à un autre endroit, obligeant l'utilisateur à jouer à cache-cache et offrant une expérience utilisateur déplorable.
• 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 et de leur offrir une expérience conviviale. Dans un monde idéal, vous devriez être en mesure de le faire sans avoir recours à des modules complémentaires. Dans cette optique, tenez compte des éléments suivants :

1. Choisissez soigneusement vos options linguistiques. Ce n'est pas parce que vous pouvez activer toutes les langues que vous devez le faire ; vous ne devez activer 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 Microsoft Translator permet aux visiteurs de choisir parmi près de 40 langues à l'aide d'une liste déroulante (ou, dans ce cas, d'un "drop-up") située près du pied de page. Le site a également choisi d'afficher le nom complet de chaque langue en utilisant la langue maternelle. Cela permet aux visiteurs de reconnaître leur langue d'un seul coup d'œil et de s'assurer que les options de changement de langue sont claires.

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 région, une langue et une devise. En cliquant ici, une fenêtre contextuelle s'ouvre, dans laquelle vous pouvez modifier chacune de ces options – une approche simple qui évite d'obliger les utilisateurs à se rendre sur un site régional.

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 son étiquetage est clair, ce qui prouve qu'un commutateur minimaliste peut tout de même offrir une expérience claire et fluide.

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

Ajouter un sélecteur de langue WordPress à votre site est un jeu d'enfant avec les bons outils. Avec Weglot, vous bénéficiez d'un sélecteur de langue ajouté automatiquement, d'une traduction complète par IA dès le premier jour et d'un contrôle total sur l'édition – sans avoir besoin d'un développeur. L'outil de traduction fonctionne en arrière-plan, garantissant des traductions à jour, fidèles à votre image de marque et sans intervention de votre part. Vous pouvez égalementactiver la redirection automatique depuis votre Weglot : celle-ci détecte la langue du navigateur du visiteur et lui propose automatiquement la version de votre site dans la langue appropriée.

Weglot également Weglot conçu SEO multilingue . Il crée automatiquement des sous-répertoires par langue pour chaque version traduite de votre site. Il ajoute des balises hreflang et traduit vos métadonnées. Les moteurs de recherche peuvent ainsi trouver et indexer chaque version linguistique dès le premier jour.

Choisissez un plugin de traduction WordPress qui intègre également SEO multilingue . Grâce à la création automatique de sous-répertoires linguistiques, à la traduction des métadonnées et à la mise en place de balises hreflang, Weglot les aspects techniques, le référencement et la traduction de votre site multilingue.

Prêt à ajouter un sélecteur de langue WordPress à votre site ? Lancez-vous avec Weglot: l'offre gratuiteWeglot ne nécessite aucune carte bancaire.