Traduire son site Divi avec Polylang - Divi Community

Ca y est, c’est arrivé ! Vous raccrochez à peine de votre dernier échange avec votre client où la voix faussement assurée vous lui avez dit que cela ne poserait pas de problème de faire évoluer son site Divi en multilingue.
Et pourtant, pourtant vous ne savez pas du tout comment vous y prendre… Vous n’avez encore jamais été confronté à cette nouvelle épreuve !
Vous vous jetez sur votre moteur de recherches préféré et les doigts tremblants (quoi, j’en rajoute ?) vous tentez désespérément de trouver un tutoriel sur la façon de procéder…
Et vous voilà. Mais pas d’inquiétude, je vais vous expliquer étape par étape comment ajouter cette fonctionnalité à votre site.

Téléchargez et installez Polylang

Télécharger le plugin Polylang pour traduire votre site Divi

Pour commencer, je vous propose de télécharger le plugin Polylang (dans sa version gratuite) sur le répertoire d’extensions de WordPress.
Installez-le comme n’importe quel plugin, puis activez-le.

Configurez Polylang

Nous allons commencer la configuration de notre extension.
Pour cela je vous guiderai pas à pas.

Pour commencer…

Rendez-vous sur le page “Langues”

Vous trouverez la page “Langues” dans votre barre de menu d’administration de WordPress. Celle-ci vous permet d’ajouter toutes les langues que vous souhaitez utiliser sur votre site.

Lors de l’ajout de votre première langue, vous verrez le message suivant apparaître en haut de votre page : “Il y a des articles, pages, catégories ou étiquettes sans jeu de langue. Vous pouvez leur attribuer la langue par défaut“.
Finissez d’abord par ajouter toutes les langues que vous souhaitez et définissez la langue par défaut en cliquant sur la petite étoile.

Ceci fait, cliquez sur le lien du message d’avertissement afin de vous garantir que tous les éléments déjà existants sur votre site (articles, mots clés, catégories, pages, etc.) sont bien attribués à la langue par défaut (en général le français).

Allez sur la page “Réglages”

Option “Modifications des adresses web”

Vérifiez ou ajuster les paramètres de cette option. Ceux-ci sont suffisamment explicites pour que vous puissiez facilement faire votre choix.

Je vous suggère de cocher l’option “L’URL de la page d’accueil contient le code de la langue au lieu du nom ou de l’ID de la page” afin que les différentes pages d’accueil de votre site contiennent uniquement le nom de la langue.
Par exemple, pour atteindre la page d’accueil en version anglaise, l’URL se présentera sous la forme https://www.nom-de-domaine.fr/en/

Option “Détecter la langue du navigateur”

Laissez cochée cette option si vous souhaitez que l’extension dirige automatiquement vos utilisateurs en fonction de la langue de leur navigateur (ce qui est très pratique).

Option “Médias”

Cette option est utile si vous souhaitez personnaliser les images de vos articles et de vos pages en fonction de la langue.

Imaginez que l’on souhaite traduire Divi Community. Il nous faudrait alors modifier les captures d’écran de tous les tutoriels pour qu’ils soient compréhensibles facilement dans la langue du visiteur.

Cependant, si vous n’en avez pas l’utilité car vous n’avez aucun texte apparent sur vos images, ne l’activez pas car cela oblige, pour chacune des images, à envoyer son équivalent dans la langue à traduire.

Option “Types de contenus personnalisés et taxinomies”

Comme pour les médias, Polylang permet de définir tous les types de contenus que vous souhaitez traduire .

Option “Synchronisation”

L’option de synchronisation permet de conserver les mêmes valeurs de certains champs ou options, pour les pages ou articles, d’une langue à une autre.
Vous n’aurez ainsi pas besoin d’intervenir dessus.

Je vous suggère de cocher ici toutes les cases, sauf peut-être “Champs personnalisés” si vous les utilisez car les informations qu’ils peuvent contenir pourraient nécessiter une traduction et l’image à la Une si elle contient du texte.

Les autres champs comme la date, le modèle de page, etc seront identiques entre toutes les langues.

Option “Compatibilité avec WPML”

Celle-ci n’étant pas modifiable, nous passons à l’option suivante.

Option “Partage des slugs”

Cette option permet, lorsque vous avez acquis la version premium du plugin, de partager les slugs (chemin d’accès) de vos pages entre les différentes langues.

Un exemple concret serait la page “Contact”.
La première page que vous créerez avec ce nom aura un permalien de la forme : “https://www.nom-de-domaine.fr/contact/”
Mais si vous créez d’autres pages de contact, elles se présenteront comme ceci :

  • https://www.nom-de-domaine.fr/en/contact-2/,
  • https://www.nom-de-domaine.fr/de/contact-3/…

On est d’accord, ça ne fait pas très pro.

Hormis la version Premium qui permet de gérer cela, sachez qu’il existe un petit plugin gratuit nommé Polylang Slug qui fait très bien le job.
Pour l’utiliser, il vous suffit de l’installer et de l’activer. L’extension n’a aucun paramètre.

Option “Traduction des slugs”

Elle permet, quand vous possédez la version Premium, de traduire les slugs des contenus personnalisés et des taxinomies.

Par exemple, en version française, votre libellé de catégorie sera “categorie”, en anglais “category”, etc.
Cette option permet également de traduire les taxonomies de vos Custom Post Types.

Option “Outils”

Celle-ci ne contient qu’une option permettant, lorsqu’elle est sélectionnée, d’effacer toutes les informations liées au plugin quand vous le supprimez de votre installation WordPress.

Option “Clés de licence”

Cette option permet, comme son nom l’indique de saisir votre clé, lorsque vous possédez la version Premium de l’extension ou d’un module complémentaire.

Ca y est la partie configuration est finie !
Passons maintenant à l’utilisation de notre nouvelle interface !

Utilisez l’interface de Polylang

Préparez-vous à la traduction

Si vous vous rendez dans les rubriques “Articles” et “Pages”, vous noterez maintenant la présence de petits drapeaux symbolisant les langues que vous avez installées sur votre site.

J’ai ici par exemple deux langues:

  • L’anglais
  • le français

On voit aussi différents icônes affichés sous les drapeaux. Voici leur signification:

  • Icône de validation: la traduction pour cette page existe
  • Icône de stylo: éditer la page dans la langue actuelle
  • Icône + : la traduction n’existe pas encore dans la langue. Vous pouvez la créer en cliquant sur l’icône.

Par exemple, sur la capture d’écran ci-dessus, la première page de contact est la version française et la traduction existe (vous pouvez la voir juste en dessous).

Avant de démarrer, je vous conseille de commencer par traduire tous les mots-clés et catégories que vous avez créés, pour un véritable gain de temps pour les traductions à venir.

Pour cela, rendez-vous dans votre back-office dans Articles -> Catégories puis dans Articles -> Étiquettes.

Commencez à traduire

Nous allons commencer par traduire un de nos articles.

Sachez que Polylang vous permet de filtrer les contenus de l’administration suivant la langue de votre choix. Cela permet d’y voir un peu plus clair et de s’y retrouver plus facilement lorsque le nombre d’articles ou de pages devient important.

Pour ceci, rendez-vous dans la barre d’administration dans l’onglet “Afficher toutes les langues”:

  • “Afficher toutes langues” qui permettra d’afficher toutes les pages et articles dans toutes les langues (un peu lourd).
  • Ou sélectionnez uniquement la langue souhaitée. Ainsi seul les contenus existants dans cette langue seront affichés.

Dans la liste de vos articles ou pages, il vous suffit ensuite de cliquer sur l’icône “+” pour ajouter la traduction de votre contenu dans la langue que vous aurez choisi.

Vous constaterez, en entrant dans le mode édition de votre article, que dans la barre latérale, la métabox “Langues” vous précise dans quelle langue d’édition vous vous trouvez actuellement.
Vous avez également la possibilité de créer une traduction dans une autre langue juste en dessous en cliquant sur l’icône “+” et en définissant un titre.

Ici la langue est l’anglais et je peux créer une traduction française en cliquant sur le “+” en dessous

Rappel:
Quand une page est déjà traduite, le “+” est remplacé par une petite coche.

Astuce pour gagner du temps

Par défaut, lorsque l’on traduit une page existante avec l’extension Polylang, on repart d’une page vierge, mais c’est sans compter l’excellente astuce de Fabrice Esquirol qui permet par défaut de copier tout le contenu existant depuis la langue d’origine vers le nouvel élément.

Pour ce faire, il vous suffit de copier/coller les lignes de code ci-dessous dans le fichier functions.php de votre thème enfant (ne copiez pas la ligne 1, elle nous sert juste à obtenir la bonne coloration syntaxique pour afficher du code dans l’article).

Si vous n’avez pas de thème enfant, vous pouvez télécharger gratuitement le thème enfant de Divi Community.
Et si vous voulez en savoir plus sur les thèmes enfants, je vous invite à lire notre article Tout savoir sur les thèmes enfants pour Divi.

PHP

Il ne vous restera plus qu’à cliquer sur le bouton “Utiliser le générateur Divi” et chaque section, rangée, module retrouvera sa disposition.

Vous constaterez alors avec joie que les équivalents de “Catégories”, “Étiquettes” et “Image à la une” seront déjà renseignés.

Modifiez votre menu

Il va maintenant falloir modifier vos menus dans toutes les langues pour que tout soit parfaitement traduit.

Pour cela rendez-vous dans Apparence -> Menus.

Pour ajouter la liste déroulante de drapeaux permettant la sélection de la langue dans votre menu, il va falloir activer l’option “Liste de langues”.

Pour ceci, cliquez tout en haut sur “Options de l’écran” et cochez la case “Liste de langue” à droite.

Vous découvrirez alors une nouvelle metabox “Liste de langues” à gauche dans la barre d’options du menu.

Ajoutez-la à votre menu et vos drapeaux seront automatiquement ajoutés.

Les différentes options proposées sont :

  • “Afficher en liste déroulante”
  • “Afficher le nom des langues”
  • “Afficher les drapeaux”
  • “Forcer le lien vers la page d’accueil”
  • “Cacher la langue courante”
  • “Cacher les langues sans traduction”

Vous pouvez en cocher plusieurs et essayez les différents affichages pour voir ce qui vous convient le mieux.

Vous noterez ensuite la présence en pied de page d’un “Menu Principal”, “Menu secondaire” et “Menu du pied de page” disponibles dans chacune des langues configurées.

Sélectionnez bien l’emplacement et la langue assignée à votre menu et enregistrez.

Voilà, vous savez maintenant traduire tous vos contenus et menus dans n’importe quelle langue facilement.

Astuces diverses

Menu

Si vous avez plusieurs pages ayant le même titre (par exemple Contact), pensez à sélectionner une langue dans la barre d’administration pour n’afficher les contenus que dans celle-ci.
Vous serez ainsi sûr de n’ajouter au menu que les éléments dans la bonne langue.
Faites de même pour chacune des langues configurées sur le site.

Custom Post Types

Si au cours de votre développement vous ajoutez des CPT, n’oubliez pas de les ajouter dans les réglages de Polylang afin d’avoir la possibilité de les traduire eux-aussi.
Ils apparaîtront dans “Types de contenus personnalisés et taxinomies”.

Une catégorie avec le même nom dans toutes les langues

Par défaut, Polylang ne vous laissera pas définir une catégorie portant le même nom d’une langue à une autre.
Je vous propose donc une petite astuce pour contourner cette contrainte.

Imaginons donc que vous ayez besoin de créer une catégorie “Interviews”.
Nous allons donc commencer par la créer en français.

  • Rendez-vous dans Articles -> Catégories
  • Renseignez le champ Nom avec le mot “Interviews”
  • Cliquez sur le bouton “Ajouter une nouvelle catégorie” pour la créer en français
  • Cliquez maintenant dans la barre horizontal noire et choisissez la langue anglaise.
    En ajoutant le même mot, vous vous rendrez compte que WordPress l’a bien ajoutée, mais le slug pour atteindre cette catégorie est devenu “interviews-en”… Pas bien !

Pour corriger cela, il vous suffit de cliquer sur le lien “Modification rapide” sous la catégorie concernée et renommer “interviews-en” en “interviews”.
Et voilà, c’est fait !

Pour conclure

Vous avez maintenant les connaissances nécessaires pour bien utiliser le plugin Polylang avec Divi.
Celui-ci vous permettra enfin de créer pour vos clients de vrais sites Divi multilingues afin de les aider à conquérir le monde !

Sachez qu’il existe une version premium à 99€ permettant de traduire les slugs, de partager les permaliens, de traduire les champs ACFs ou encore de dupliquer automatiquement les articles ou pages lors de la traduction afin de ne pas repartir d’un modèle vierge.

De même, si vous avez une boutique WooCommerce, l’add-on Polylang for WooCommerce sera nécessaire pour traduire vos produits et pages de vente.

Et vous, qu’utilisez-vous pour traduire votre site ?