Polylang & Divi : comment obtenir un site entièrement multilingue (même si on utilise le Thème Builder) ?

Polylang est LA solution gratuite et facile pour traduire votre site WordPress (et Divi). WPML a fait son temps, et Weglot est pas mal cher… Alors, si on s’y connait un peu en langue, et qu’on a un peu de temps devant nous, on peut facilement traduire son site… Dans cet article, je vous montre rapidement comment installer, paramétrer et traduire les contenus de votre site avec Polylang. Ensuite, nous irons au-delà du « contenu » et je vous donnerai des astuces pour traduire la totalité de votre site qui utilise le Thème Builder de Divi. Parce que OUI, ce n’est pas si facile…

Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.

1 – Installer et paramétrer Polylang

Si vous souhaitez proposer votre site en plusieurs langues, sachez que WordPress ne le permet pas encore nativement. Cette fonctionnalité est prévue, mais ce n’est pas pour tout de suite. Je vous conseille alors d’opter pour Polylang, la version gratuite pourrait être suffisante pour commencer…

Rendez-vous alors dans l’onglet Extensions > Ajouter, pour rechercher l’extension « Polylang », l’installer et l’activer.

Dès son activation, un écran d’accompagnement apparait pour vous aider dans la configuration du plugin. La bonne nouvelle est que c’est très simple et que dans quelques minutes vous pourrez commencer à traduire votre site…

1. Langues : ajoutez les langues dont vous avez besoin : commencez par la langue d’origine, puis ajoutez les langues que vous prévoyez de traduire. Cliquez sur Continuer.
2. Média : l’option des médias vous permet de traduire aussi les images. Cela peut être une bonne solution si vous souhaitez que votre site soit entièrement traduit. Mais cela signifie aussi que vous devrez ajouter autant d’images que vous avez de langages.
3. Contenu : la troisième étape permet de définir la langue des contenus déjà existants dans votre site. En toute logique, il s’agit de votre « langue par défaut », ici le FR.
4. Terminez en cliquant sur Continuer.

Voilà, la configuration de l’extension est terminée ! Rien de bien compliquée, n’est-ce pas ?

Did you know? You can test Divi for free by visiting on this page and clicking on "TRY IT FOR FREE

2 – Traduire les pages Divi avec Polylang

Maintenant que l’extension est installée et configurée, vous allez devoir bosser 🥹 ! Et oui, c’est vous qui devez traduire vos contenus… Ce n’est pas automatique, contrairement à ce que permet the Weglot extension...

Mais, c’est un mal pour un bien, car vous n’aurez aucun frais… Voyons comment faire avec Divi…

1. Page d’accueil : Polylang a d’office créé une page d’accueil dans la langue que vous avez ajouté (ici EN_GB). Cliquez sur le petit drapeau de traduction pour commencer à traduire cette page.
2. Commencez par traduire le titre de cette page dans la langue appropriée. Par exemple : Accueil = Home (ou Homepage).
3. Activez le Divi Builder si vous le souhaitez.

4. Lors de l’activation du constructeur, des options vous sont proposées, choisissez Clone existing page pour dupliquer une mise en page déjà existante.
5. Recherchez votre page dans l’onglet Your existing page. Si vous ne la trouvez pas, vous pouvez alors enregistrer (en amont) la mise en page de votre page d’accueil au sein de la bibliothèque Divi, pour la récupérer ensuite dans l’onglet Your saved layouts.
6. Sélectionnez ensuite votre mise en page et importez-la.

7. Ensuite, lorsque vous éditez la page avec Divi, traduisez tous les textes et changez les images si besoin. Sauvegardez vos changements.
8. Renouvelez le travail pour chaque publication. Pour ajouter une traduction, cliquez sur le « + » situé à côté du drapeau de votre langue par défaut. Cela crée une nouvelle publication avec le drapeau de la langue de traduction.
9. N’oubliez pas de traduire tous vos contenus, même les articles ! Enfin, rien ne vous y oblige, vous pouvez décider de ne pas traduire certaines publications si vous le souhaitez.

3 – Traduire les menus du site

Une fois que votre contenu est traduit, vous pourrez traduire les menus de votre site. Là aussi, rien de bien compliqué !

1. Allez à l’onglet Apparence > Menus, puis cliquez sur Créer un nouveau menu.
2. Nommez votre menu dans la langue traduite, histoire de le repérer facilement.
3. Assignez ce menu à son emplacement idéal. Par exemple Menu Principal English.
4. Validez en cliquant sur Créer le menu.
5. Placez ensuite toutes les pages traduites que vous souhaitez faire apparaître dans ce menu. Puis sauvegardez vos modifications.

6. Faites de même pour vos autres menus. Par exemple, créez un menu pour le pied de page anglais si vous en avez un en français.
7. Placez également les pages traduites.
8. Assignez le menu adéquat.

9. Toujours dans l’écran des menus, ouvrez les options de l’écran (en haut à droite).
10. Cochez l’option Liste des langues pour la faire apparaitre.
11. Un peu plu bas, vous verrez un nouvel onglet qui vous permet d’ajouter les langues à votre menu.
12. Placez cela au sein de votre menu et activez les options de votre choix. N’oubliez pas de sauvegarder avant de quitter.

Et voilà ! Lorsque vous visitez votre site, vous pouvez facilement naviguer de page en page et de langue en langue !

4 – Traduire les modèles du Divi Theme Builder avec Polylang

Vous avez pu voir qu’il était assez simple de traduire les pages ou les articles de votre site ainsi que les menus… C’est facile, car Polylang vous permet de traduire les « contenus » de vos publications… Mais si votre site utilise le Theme Builder, l’histoire pourrait un peu se compliquer…

4.1 – L’erreur à ne pas commettre

Vous ne pouvez pas créer 2 modèles pour une même publication. C’est assez logique. Cela signifie que vous ne pouvez pas assigner un modèle de Page d’accueil pour le FR et un autre pour le EN. Dans ce cas précis, il sera plus judicieux de créer un modèle qui sera assigné autant pour la page FR que pour la page EN. Choisissez alors « Spécifique pages » et attribuez toutes ses variantes de langue.

Cela fonctionne si le modèle fait appel au contenu (corps) de chaque page seulement. Mais comment faire lorsque chaque langue partage des éléments communs comme l’En-tête or the Pied de page ?

En effet, c’est là que les choses se compliquent !

Lorsque vous créez un footer (pied de page), vous ajoutez des éléments qui sont forcément attribués à une langue en particulier. Par exemple, si vous ajoutez le menu du pied de page, il faudra choisir entre le menu FR ou le menu EN. Du coup, il y aura une dissonance sur l’une ou l’autre de vos traductions…

4.2 – Traduire les éléments de modèle communs aux diverses langues

Malheureusement, les développeurs de Divi n’ont pas pensé à cette hypothèse. Il n’y a aucune solution de prévue pour traduire les parties communes à toutes les langues au sein d’un modèle de thème du Theme Builder.

On pourrait jouer avec les catégories, les étiquettes ou autres taxonomies pour essayer de filtrer certains contenus en fonction de la langue, mais le souci est que cela va générer du duplicate content, ce n’est pas idéal pour votre natural referencing.

Je vous propose alors une astuce de Ninja ! Disons que c’est une astuce qui permet de contourner le problème le plus proprement possible avec les options qui sont à notre disposition, à l’heure où j’écris cet article.

L’idée est de filtrer les conditions d’affichage en fonction des auteurs (et de la langue).

Je vous donne alors rendez-vous à l’onglet Comptes > Ajouter. Il vous suffit d’ajouter un nouveau compte avec une autre de vos adresses e-mail. Qui n’a qu’une seule adresse e-mail de nos jours ?

Par mesure de sécurité, vous pouvez assigner le rôle d’auteur à ce nouveau compte, plutôt que le rôle d’administrateur.

Ensuite, rendez-vous dans Divi > Theme Builder pour éditer le modèle que vous souhaitez, par exemple : le Pied de page Global (celui-ci agit sur tout le site).

Créez le pied de page idéal au sein d’une section, puis dupliquez-le et traduisez-le en fonction de vos langues actives. Dans la capture d’écran ci-dessus, le pied de page rose affiche la version FR et le pied de page bleu affiche la version EN.

Ensuite, faites les actions suivantes :

1. Éditez les réglages de la première section (ici la FR)
2. Allez à l’onglet Avancé > Conditions (je vous avais déjà parlé des conditions dans mon tuto pour créer un calendrier de l’Avent avec Divi). Cliquez sur l’icône « + ».
3. Choisissez la condition Auteur.

4. Choisissez la condition « afficher uniquement si l’auteur est » et là, vous définissez l’auteur de votre langue par défaut (ici Lycia = FR).
5. Allez ensuite éditer les réglages de vos autres sections de langue et attribuez les auteurs adéquats (ici, Fanny = EN). Renouvelez l’action avec autant de sections et d’auteurs que vous avez de langues.

6. Je suppose que vous avez déjà anticipé la suite : retournez à la liste de vos publications et assignez chaque auteur à sa langue. Vous pouvez faire cela rapidement, sans entrer dans chaque publication, en faisant une « modification rapide ».
7. Comme vous pouvez le constater sur ma capture d’écran, chaque publication FR a été attribuée à l’auteur Lycia (en rose) et chaque publication EN a été attribuée à l’auteur Fanny (en bleu). Cela permettra de filtrer la condition d’affichage dans la bonne langue.

Et voilà le résultat :

Comme vous pouvez le voir ci-dessus, lorsqu’on visite la page À propos en FR, le pied de page est en FR – lorsqu’on visite en EN, le pied de page a bien été traduit.

4.3 – Traduction des éléments dynamiques au sein des modèles du Theme Builder

Il y a une dernière question que vous pouvez vous poser : que se passe-t-il si on crée des modèles composés de modules dynamiques tels que le module Titre du poste ou le module Publier un contenu ?

Pas de crainte à avoir !

Comme vous pouvez le remarquer dans la capture d’écran ci-dessus, tous les éléments dynamiques qui composent vos modèles de Theme Builder sont correctement traduits sans action de votre part.

Par exemple, si vous créez un corps personnalisé au sein du modèle assigné aux pages d’archive de catégorie, il suffira d’utiliser le module « Titre du poste » pour que le nom de la catégorie s’affiche dans sa langue appropriée. Idem pour le module « Blog » ou tous les modules dynamiques proposés par le builder.

Don't delay! Discover the Divi theme here !

5 – Un site Divi entièrement traduit avec Polylang ?

Vous avez vu dans cet article qu’il était possible de traduire la totalité de votre site créé avec Divi à l’aide de Polylang.

Certes, l’histoire de l’assignation via l’auteur peut paraître un peu tirée par les cheveux, mais croyez-moi, c’est la façon la plus simple et propre de traduire toutes les parties de votre site. Disons que si les développeurs de Divi avaient pensé à ajouter une condition en fonction de la langue, nous n’aurions pas eu à créer un nouvel auteur pour filtrer cela…

Peut-être que cela sera pris en compte dans la version de 5 de Divi, espérons-le ! Mais en attendant, vous avez une solution pour continuer d’exploiter le multilingue via Polylang et Divi.

PS : Je suis très curieuse de savoir si vous utilisez le multilingue sur votre site, si oui, avec quel plugin ? Avez-vous rencontré des soucis ?… Bref, dites-le en commentaire !

PPS : je suis hyper confuse, car en relisant mon tuto, je m’aperçois – et comprends un peu trop tard – que le prénom Fanny n’est pas approprié pour la version anglophone de cet article. Vous m’en voyez désolée ! Il vaut mieux en rire qu’en pleurer 🤣

Need to master Divi? Discover my training which will guide you step by step in the understanding and use of Divi! Learn more about Divi training.