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 afin que les visiteurs puissent le lire dans leur propre langue peuvent 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 de sélection de langue pour WordPress.

Avec Weglot, vous pouvez ajouter plusieurs langues à votre site WordPress ou à votre boutique WooCommerce sans avoir à écrire la moindre ligne de code, et vérifier chaque traduction dans son contexte avant sa mise en ligne.

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.

Weglot La version 2.0 s'appuie sur « Weglot » que vous connaissez déjà : un plugin de traduction pour WordPress basé sur l'IA qui ajoute automatiquement un sélecteur de langue, traduit votre site sans aucune intervention manuelle grâce à des traductions générées par l'IA et adaptées à votre marque, et crée des sous-répertoires linguistiques optimisés pour le référencement avec des balises hreflang et des métadonnées traduites. Vous pouvez choisir d'ajouter un sélecteur de langue WordPress à votre site à différents emplacements, 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 à la navigation de votre site. Par défaut, Weglot ajoute le sélecteur de langue en bas à droite de votre site. Nous vous montrerons ensuite comment le déplacer, soit via les paramètres de votre plugin, soit depuis la page Visual Editor de Weglot, où l’éditeur de sélecteur vous permet également de modifier son apparence. 

Étape 1 : Installer et activer le Weglot

Installez et activez le plugin «Weglot » sur votre site WordPress. Créez ensuite un compte sur Weglot : lors de la configuration, vous devrez saisir l’URL de votre site, choisir vos langues source et cible, puis définir le ton de votre marque et vos consignes de traduction afin que les traductions reflètent votre style rédactionnel. C’est depuis votre tableau de bord Weglot que vous pourrez gérer et modifier vos traductions, ainsi que copier 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, puis ouvrez Paramètres, puis collez votre clé API. Votre langue d’origine et les langues que vous avez choisies lors de la création de votre projet s’affichent en dessous (pour les modifier ultérieurement, rendez-vous dans votre tableau de bord « Weglot »). 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 de base, rendez-vous dans Weglot > Paramètres dans l'interface d'administration de WordPress. Le section « Sélection de la langue » vous permet de définir l’emplacement : dans un menu, dans un widget, à l’aide d’un shortcode ou dans le code source de votre page (nous verrons cela plus bas) :

La présentation du sélecteur de langue est gérée dans l'éditeur de sélecteur de langue, accessible depuis Weglot’s Visual Editor lorsque vous cliquez sur le sélecteur de langue de votre site. Dans cet éditeur, 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 un champ CSS personnalisé pour vos propres sélecteurs, mais nous y reviendrons dans un instant. Pour l'instant, personnalisons le sélecteur de langue afin d'afficher les noms des langues sans drapeaux, tout en conservant le menu déroulant.

Pour ce faire, désactivez les drapeaux et activez les noms complets des langues, puis cliquez sur Enregistrer, puis jetez un œ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

Vous pouvez afficher le sélecteur Weglot à cinq endroits différents :

• Menu : Allez dans Apparence > Menus, sélectionnez votre menu, cochez Weglot , puis faites-le glisser pour le placer à l'endroit souhaité.
• Widget : rendez-vous dans Apparence > Widgets et ajoutez le Weglot à n'importe quelle zone de widget (en-tête, barre latérale ou pied de page).
• Code court : collez [weglot] dans n'importe quelle page, n'importe quel article ou n'importe quel modèle où vous souhaitez que le sélecteur apparaisse.
• HTML / code source : Ajoutez le sélecteur directement dans le code HTML de votre page pour bénéficier d'un contrôle total sur son emplacement.
• Bouton flottant : le sélecteur reste dans un coin fixe et reste visible lorsque les utilisateurs font défiler la page (paramètre par défautWeglot).

Le sélecteur Weglot fonctionne avec tous les thèmes WordPress, y compris les thèmes FSE et les thèmes basés sur des blocs.

Pour définir l'emplacement de votre sélecteur de langue, retournez à la section section « Sélecteur de langue » dans Weglot > Paramètres (illustrée ci-dessus) et suivez le lien figurant sur la fiche correspondant à l'emplacement souhaité. Dans ce cas précis, nous allons dans Apparence > Menu, puis nous glissons-déposons le sélecteur pour modifier l'ordre des éléments dans le 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 des codes de langue intégrés, plutôt qu'un menu déroulant.

Stylisation avancée du sélecteur de langue

C'est là que vous utilisez le CSS. Dans l'éditeur du sélecteur (nous y reviendrons plus bas), désactivez la mise en page sous forme de menu déroulant, affichez les codes de langue à la place des noms complets, et ajoutez quelques sélecteurs pour vos polices, vos couleurs et l'épaisseur du texte afin que le sélecteur s'intègre au design de votre site. Voici le résultat affiché sur l'interface publique :

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 modifier la mise en page et changer le design à l'aide des options prêtes à l'emploi de l'éditeur Switcher. 

Pour l'ouvrir, rendez-vous sur Weglot, puis sur Visual Editor , et cliquez sur le sélecteur de langue de votre site. L'éditeur Switcher s'affiche à côté d'un aperçu en direct, ce qui vous permet de voir chaque modification au fur et à mesure que vous l'effectuez, ainsi que son panneau « CSS personnalisé » (cliquez sur Modifier le CSS personnalisé pour afficher le champ) permet d’insérer les sélecteurs de l’étape précédente : 

Définissez la position et la mise en page depuis le panneau, puis cliquez sur « Enregistrer » pour que les modifications soient prises en compte sur votre site WordPress. 

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

Les personnes qui changent de langue ont tendance à se répartir en quatre catégories :

• Inexistant. En d'autres termes, le site ne propose aucune traduction.
• Il est difficile à trouver. Le sélecteur de langue peut être dissimulé dans le menu de navigation ou à un autre endroit, ce qui oblige l'utilisateur à jouer au cache-cache et nuit considérablement à l'expérience utilisateur.
• 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.

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 le bon plugin. 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, de la traduction des images pour le texte qu’elles contiennent, ainsi que d’un contrôle total sur l’édition, sans avoir besoin de développeur. Le plugin fonctionne en arrière-plan, assurant la mise à jour de vos traductions conformes à votre image de marque à mesure que votre contenu évolue. Vous pouvez également activer la redirection automatique depuis votre tableau de bord Weglot : celle-ci détecte la langue du navigateur d’un visiteur et lui propose automatiquement la version linguistique appropriée de votre site.

Weglot est également conçu pour prendre en compte l'SEO multilingue . Il crée automatiquement des sous-répertoires par langue pour chaque version traduite de votre site, ajoute des balises hreflang et traduit vos métadonnées, afin que les moteurs de recherche et les expériences de découverte basées sur l'IA puissent trouver et indexer chaque version linguistique dès le premier jour.

Choisissez un plugin de traduction WordPress spécialement conçu pour prendre en charge l’ SEO multilingue . Grâce à la création automatique de sous-répertoires par langue, à la traduction des métadonnées et à l’implémentation des balises hreflang, Weglot gère tous les aspects techniques, SEO et de 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.