Divi tips 143 : traduire son site avec

Un site Divi multilingue sans effort avec wpLingua !

Mis à jour le 15/09/24

2666 mots

9 minutes de lecture
0 commentaires

Cet article contient des liens d’affiliation reconnaissables grâce à l'icône du pourcentage (%) → je suis un lien d'affiliation

Dans cet article, je vais vous montrer comment transformer votre site Divi en un site web multilingue en utilisant wpLingua, un plugin puissant et simple d’utilisation. Voici un guide complet qui vous explique tout, de l’installation à l’édition des traductions et à la gestion du SEO multilingue.

1 – Qu’est-ce wpLingua, comment ça marche ?

wpLingua est un plugin WordPress qui permet de simplifier le processus de traduction de votre site. En l’installant, vous pourrez traduire automatiquement les contenus statiques et dynamiques de votre site vers différentes langues, sans limite de mots. C’est un outil idéal pour créer un site web multilingue de manière simple et rapide !

Mais surtout, vous avez dû vous rendre compte que ce n’était pas toujours facile de traduire l’intégralité d’un site Divi avec les extensions traditionnelles telles que Polylang, par exemple, c’est pour cette raison que j’avais publié un tuto à ce sujet (pour rappel, ce n’est pas à cause de Polylang, c’est plutôt Divi qui n’est pas entièrement compatible avec ce type de plugin de traduction).

La méthode de traduction utilisée par wpLingua garantie une traduction intégrale de votre site Divi, de l’en-tête au pied de page ! C’est parce que wpLingua intercepte le contenu de la page et analyse le code HTML et JS : l’extension découvre tous les textes, les traduit et rend les pages multilingues. Cette approche assure la compatibilité avec la plupart des thèmes, extensions et des constructeurs de pages tels que Gutenberg, Elementor, Divi…

2 – Vidéo de démo de wpLingua avec Divi

La vidéo montre la plupart des fonctionnalités de wpLingua mais certaines parties méritent d’être développées, c’est pourquoi je vous propose de revenir sur les étapes en détail dans la suite de cet article…

3 – wpLingua : installation et traduction automatique

Pour commencer, rendez-vous à l’onglet « Extensions > Ajouter une extension », recherchez « wplingua » dans le champ dédié (important, écrivez-le en un seul mot : « wplingua » et non « wp lingua »), installez-le et activez-le. Vous pourrez également le télécharger directement depuis le répertoire officiel si vous préférez une installation manuelle.

1 installer wplingua plugin

Dès l’activation, vous serez redirigé vers la page d’inscription, si ce n’est pas le cas, rendez-vous directement à l’onglet nommé wpLingua, disponible maintenant dans le tableau de bord :

2 obtenir une cle api
  1. Le champ URL du site web est automatiquement rempli.
  2. L’adresse e-mail est également pré-renseignée, ce champ utilise les réglages du site et donc l’adresse e-mail d’administration du site. Vous pouvez la changer si besoin.
  3. La langue du site web est la langue d’origine du site. Elle est déjà pré-renseignée et se base sur les réglages du site (onglet Réglages > Général). Si ce n’est pas la bonne langue, c’est que les réglages de base de votre site sont erronés et devraient être modifiés.
  4. Il ne reste plus qu’à choisir votre langue de traduction. Vous aurez le choix parmi 24 langues.
  5. Lisez et acceptez les conditions d’utilisation.
  6. Validez en cliquant sur « Obtenir une clé API », vous allez la recevoir par e-mail, vérifiez la boite des indésirables au cas où…
  7. Copiez la clé API reçue par e-mail et collez-la dans le champ dédié puis validez en cliquant sur « Définir la clé API ».
3 traduction automatique wplingua
  1. Dès que vous validez, la première traduction est en cours de génération, il suffit de patienter.
  2. Vous obtenez ensuite un message de succès, vous pouvez visitez le site dans sa version traduite. Pour passer d’une langue à l’autre, vous pouvez utiliser le sélecteur de langue présent en bas de l’écran sur le site.

⚠️ Attention aux traductions automatiques de votre navigateur !

4 visiter le site traduit

Lorsque vous visitez la version traduite de votre site, votre navigateur va de suite comprendre que ce n’est pas votre langue (en fonction des paramètres du navigateur concernant vos préférences de langue). De ce fait, il est possible que votre navigateur vous propose de traduire la page : refusez. En effet, lorsque vous développez un site multilingue, cette option de traduction automatique par le navigateur devrait être désactivée.

4 – Les réglages de wpLingua

wpLingua propose de nombreuses options de personnalisation pour améliorer l’expérience utilisateur et adapter la traduction à vos besoins spécifiques. Voici un aperçu des principales fonctionnalités disponibles.

4.1 – Choix des drapeaux des langues

Depuis l’onglet « wpLingua > Réglages généraux », vous pouvez choisir les drapeaux à afficher dans le sélecteur de langues. Par exemple, pour un site francophone, vous pouvez choisir le drapeau du pays adéquat, de même pour un site anglophone, etc. Si vous ne trouvez pas le drapeau idéal, vous pouvez importer une image personnalisée.

5 modifier les drapeaux des langues

4.2 – Personnalisation du sélecteur de langues

Le sélecteur de langues est un élément essentiel pour offrir une bonne expérience utilisateur sur un site multilingue. wpLingua offre de nombreuses combinaisons de personnalisation :

6 personnaliser selecteur de langue
  1. Disposition : vous pouvez choisir un affichage en bloc, en ligne ou dans un menu déroulant.
  2. Noms affichés : vous pouvez afficher les noms des langues traduits, les identifiants de langues, ou ne rien afficher du tout.
  3. Style des drapeaux : drapeaux arrondis / rectangulaires / ondulés, drapeaux personnalisés (importez vos propres images), ou pas de drapeaux.
  4. Thèmes de couleur : choisissez le layout du sélecteur de langues grâce à de nombreux thèmes de couleur et de formes (sombre, gris, blanc, flou / carré, bordures arrondies, double bordures…).
  5. Aperçu : lorsque vous essayez les diverses options, vous verrez les changements au niveau de l’aperçu.
  6. CSS personnalisé : pour un design encore plus précis, vous pouvez ajouter votre propre CSS.
  7. Insertion automatique : par défaut, le sélecteur de langue s’affichera en bas du site au centre mais vous pouvez également le placer à droite, à gauche, ou le masquer.
  8. Code court : un shortcode est également disponible et vous permet d’afficher le sélecteur de langue où vous souhaitez dans votre site.
  9. Sélecteur dans le menu : la dernière option permet d’insérer le sélecteur de langue en tant qu’élément de menu 👇
7 ajouter le selecteur de langues dans le menu ok
  1. Pour cela, rendez-vous dans les paramètres de votre menu WordPress (à l’onglet Apparence > Menus).
  2. Ouvrez l’encart nommé « wpLingua » et ajustez les options d’affichage selon vos besoin.
  3. Ajoutez-le ensuite dans l’arborescence de votre menu.
  4. Sauvegardez et visitez votre site pour vérifier l’affichage du sélecteur de langue dans le menu. Vous remarquerez que le design du sélecteur de langue s’intègre parfaitement à l’apparence de votre site car il récupère les styles du thème WordPress utilisé.

4.3 – Ajout de règles dans le dictionnaire

wpLingua vous permet de définir des règles spécifiques pour la traduction de certains mots ou expressions à l’aide d’un dictionnaire. Cela vous donne un meilleur contrôle sur les traductions, garantissant que les termes techniques, les noms propres ou les phrases spécifiques soient toujours traduits correctement.

8 regles de disctionnaire

Par exemple :

  1. Vous pouvez ajouter des termes à ne jamais traduire, ça peut être utile pour un nom de marque par exemple.
  2. Ou bien vous pouvez ajouter une traduction universelle pour un terme spécifique (« toujours traduire par »).

⚠️ Les règles de dictionnaire s’appliquent au moment de la génération automatique des traductions.

Notez que ce dictionnaire n’est pas rétroactif, c’est pourquoi il est important de définir les règles du dictionnaire avant de générer toutes les traductions du site. Contrairement à ce que je vous ai montré dans la vidéo, je préconise de terminer les réglages de wpLingua avant de parcourir le site dans la langue traduite.

4.4 – Ajout de règles d’exclusion

Il peut y avoir certaines pages ou parties de contenu que vous ne souhaitez pas traduire. wpLingua propose une option d’exclusion qui vous permet de choisir les pages ou sections que vous préférez laisser dans la langue d’origine. Cette fonction est particulièrement utile pour des contenus sensibles ou non pertinents pour certaines audiences.

9 regles d exclusion des traductions

Par exemple, sur Astuces Divi, j’ai décidé de ne pas traduire la partie des commentaires, ni les pages de vente de mes formations car elles sont elles-même disponibles uniquement en français. Aussi, vous pourriez exclure les pages légales (mentions légales, politique de confidentialité, CGV, etc.) => c’est assez rare de traduire ce type de contenu sur les sites multilingues.

4.5 – Gestions de toutes les traductions

L’onglet « wpLingua > Toutes les traductions » ouvre l’écran de gestion des chaines de traduction où vous pouvez visualiser, éditer et organiser l’ensemble des traductions de votre site.

10 pas de duplication de page

👯 Pas de duplication physique des pages et des contenus

C’est bien dans l’onglet « Toutes les traductions » que sont stockées toutes vos traductions, ce n’est donc pas la peine de les chercher au niveau des pages du site ! En effet, la méthode de traduction utilisée par wpLingua ne duplique pas physiquement vos contenus et c’est justement grâce à cela que votre site Divi parvient à être entièrement traduit (header, footer, sidebar, etc.). Si vous avez l’habitude de WPML ou de Polylang, je comprends que cela peut dérouter.

5 – Génération automatique des traductions du site

Une fois wpLingua configuré, je vous conseille vivement de parcourir manuellement les pages de votre site dans la langue traduite pour deux raisons :

  1. La génération des traductions est un processus automatique mais il se déclenche que lorsque la page traduite est demandée pour la première fois dans un navigateur. Il vaut mieux que ce soit vous qui demandiez cette page pour la première fois plutôt qu’un internaute car la première génération prend plusieurs secondes. Une fois la première traduction générée, la page traduite s’affichera aussi rapidement que la version dans la langue d’origine.
  2. Cela vous permet de maitriser le processus et de vérifier que tout s’est bien passé, et éventuellement de faire quelques corrections si besoin.
11 generer toutes les traductions

Notez que l’API wpLingua ne comptabilise pas le nombre de mots traduits générés automatiquement, c’est illimité 🤩

Le saviez-vous ? Vous pouvez tester Divi gratuitement en vous rendant sur cette page et en cliquant sur « TRY IT FOR FREE »

6 – Modification des traductions

Bien que wpLingua génère des traductions automatiques de qualité, il se peut que vous ayez besoin d’apporter des corrections manuelles pour certains textes.

L’éditeur visuel de wpLingua vous permet de faire cela en toute simplicité, c’est tellement facile !

12 editer les traductions
  1. Visitez une page traduite et activez l’éditeur visuel de wpLingua en sélectionnant la langue à éditer.
  2. Sur la page, l’éditeur active la visualisation des chaines de traduction, elles sont encadrées en gris. Il vous suffit alors de cliquer sur le texte à modifier.

⚠️ N’activez pas le Visual Builder de Divi, ce n’est pas lui qui gère l’édition des traductions. Peu importe le constructeur de page utilisé, c’est l’éditeur visuel de wpLingua qui gère ces modifications.

13 editer les traductions suite
  1. Une pop-up s’ouvre.
  2. Vous pouvez effectuer vos modifications ou générer une nouvelle traduction automatique.
  3. Cliquez ensuite sur enregistrer.
  4. Fermez la pop-up.
  5. Vous retrouverez facilement vos traductions vérifiées car elles sont encadrées en vert.
  6. Pour quitter l’éditeur des traductions de wpLingua, cliquez sur « Retourner sur la page ».

7 – Gestion du SEO multilingue avec wpLingua

Un des grands avantages de wpLingua est qu’il est optimisé pour le SEO, dès la version gratuite. En effet, wpLingua est conçu pour que les pages traduites puissent être découvertes et indexées par les moteurs de recherche tels que Google, ce qui peut améliorer considérablement votre visibilité à l’échelle internationale.

Si vous inspectez le code source de votre site, vous verrez que les balises hreflang et lang sont conformément gérées par wpLingua. Elles permettent ainsi d’indiquer aux moteurs de recherche dans quelles langues le contenu est disponible.

Aussi, puisque wpLingua traduit en automatique tous les contenus de votre site, les balises SEO seront également traduites. Pour une maitrise totale de votre référencement naturel, vous pourrez cependant éditer ces balises qu’on ne voit pas à l’œil nu sur une page, peu importe votre plugin SEO (Yoast, SEOPress, RankMaths…).

Sur la capture d’écran ci-dessous, vous remarquerez que j’ai renseigné un Titre SEO (A) et une Méta Description (B) personnalisés via le plugin Yoast, ainsi qu’un Texte Alternatif (C) et un Titre (D) pour mes images.

Ne soyez pas surpris de ne pas trouver d’option pour éditer les traductions de ces balises HTML dans les réglages de votre plugin SEO ou dans la médiathèque de WordPress !

Il faut retourner sur la page et activer l’éditeur wpLingua en mode « Toutes les traductions de la page ». Une pop-up s’ouvrira et vous pourrez gérer toutes les traductions de la page, y compris les balises HTML non visibles telles que :

  • A – Titre SEO
  • B – Meta Description
  • C – Texte alternatif des images
  • D – Titre des images
  • etc.

8 – Les tarifs de wpLingua

Concernant les tarifs de wpLingua, ils sont assez simples à comprendre car il n’y a que deux forfaits :

Version gratuite – $0

  • 1 langue traduite
  • Traduction automatique
  • Nombre illimité de mots
  • SEO Friendly
  • Utilisation sur 1 site à but non lucratif

Version pro – $20/mois/site

  • De 1 à 24 langues traduites
  • Traduction automatique
  • Nombre illimité de mots
  • SEO Friendly
  • Utilisation sur 1 site à but commercial
  • Toutes les fonctionnalités premium

Personnellement, j’aime bien quand les tarifs sont simples à comprendre et qu’ils sont abordables et raisonnables : $240 par an pour obtenir un site web multilingue sans aucun effort, je dis OUI !

Voir les différences détaillées entre les plans.

Obtenez -10% sur la première année avec le code promo « ASTUCESDIVI »

9 – En conclusion : mon avis sur wpLingua

Mon avis pourrait vous paraitre non-objectif puisque wpLingua est un projet dans lequel je m’investis depuis plus d’un an aujourd’hui 🤩. Et c’est vrai… Mais je sais aussi être autocritique !

Mon avis est que wpLingua est un super outil, ce n’est pas moi qui le code – je n’ai pas cette capacité – mais mes missions au sein de ce projet sont multiples : graphisme, stratégie, communication, traduction de l’interface du plugin (il est disponible en 6 langues dans le back-office), etc.

Il y a toutefois deux points sur lesquels nous ne voulions pas faire de concessions :

  • La générosité : nous voulions un plugin généreux dès sa version gratuite. Un nombre de mots illimité est prévu dans tous les plans concernant la génération automatique des traductions. Les options SEO sont également disponibles dès la version gratuite. Et seulement deux forfaits : un gratuit et un payant qui ouvre l’accès à toutes les fonctionnalités premium actuelles et celles qui viendront ensuite ainsi que l’autorisation de l’utiliser sur un site commercial.
  • L’ expérience utilisateur (UX) : j’ai l’habitude de travailler avec des débutants et je vois leur frustration lorsque les plugins sont complexes à paramétrer… Pour wpLingua, nous voulions l’inverse : une interface intuitive, simple à utiliser et facile à comprendre… Et je crois que c’est réussi !

Bien sûr, je sais que wpLingua n’est pas encore parfait… J’aimerais voir arriver toutes les fonctionnalités auxquelles nous avons pensé en un coup de baguette magique, mais c’est impossible, vous vous en doutez ! wpLingua grandit petit à petit et bientôt, il sera comme nous l’avons imaginé ! Des idées, on en as des tas :

  • Traduction des URL, des liens et des images.
  • Traduction des e-mails transactionnels.
  • Gestion des statistiques de visites par langue.
  • etc.

Tout ça c’est dans les tuyaux et plus encore 🤫 ! Vous pouvez suivre les avancées et le changelog directement depuis le répertoire GitHub dédié.

Ceci dit, aujourd’hui wpLingua est déjà un challenger sérieux qui mériterait d’être davantage connu, et je compte sur vous les amis ! Enfin un plugin qui simplifie la traduction de WordPress et en particulier de Divi avec des tarifs abordables !

Testez-le et donnez-moi vos avis dans les commentaires 😉

Obtenir Divi

Formation Divi

Ebook Divi PDF

Astuces gratuites

Quiz Divi

Coaching Visio Divi

icon 256x256

Découvrez wpLingua, mon extension WordPress pour traduire vos sites ! Aussi disponible depuis l’onglet Extensions > Ajouter du backoffice.

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.