Maintenir la compatibilité du Divi Builder avec WPML

Découvrez comment maintenir la compatibilité des modules Divi avec WPML grâce au fichier de configuration de langue wpml-config.xml.

Cette documentation est destinée à l’équipe de développement de Divi et aux développeurs web utilisant Divi. Elle explique le processus de maintien de la compatibilité du Divi Builder avec WPML, qui s’effectue en mettant à jour le fichier de configuration de langue.

Cette page fait référence à Divi 5, qui stocke le contenu sous forme de blocs compatibles avec Gutenberg (Divi 4 utilisait des shortcodes).

Comment fonctionne l’intégration du Divi Builder avec WPML

Pour comprendre comment le Divi Builder fonctionne avec WPML, commençons par créer une page simple à l’aide du Divi Builder. Nous avons ajouté quelques modules dans notre exemple ci-dessous, tels que Texte, un Compteur de nombres, une Icône, etc.

Pour traduire, accédez à WPML → Tableau de bord de traduction et trouvez la page dans la section Pages. Sélectionnez-la et cliquez sur Traduire votre contenu pour sélectionner la méthode de traduction. Si vous avez des crédits de traduction automatique, vous pouvez traduire cette page automatiquement en quelques minutes.

Utiliser le fichier de configuration de langue

Dans le fichier wpml-config.xml, vous pouvez configurer les éléments suivants :

• Blocs de constructeur de pages
• Champs personnalisés
• Taxonomies personnalisées
• Textes d’administration / wp_options
• Configuration du sélecteur de langue

Pour plus d’informations sur la structure et la syntaxe, consultez notre guide sur le fichier de configuration de langue.

Obtenir le fichier de configuration pour Divi

La configuration du fichier wpml-config.xml extrait les chaînes de texte des pages construites à l’aide du Divi Builder et les charge dans l’Éditeur de traduction avancé. Utilisez ce fichier pour ajouter de nouveaux types de blocs et attributs, ainsi que pour supprimer les types de blocs obsolètes.

Vous pouvez télécharger le fichier de configuration de langue depuis notre dépôt et le placer dans le dossier racine de votre thème une fois configuré.

Nous hébergeons le fichier de configuration de langue pour Divi sur nos serveurs, de sorte qu’il remplace le fichier de configuration local placé dans le dossier racine de Divi. Cela garantit que le fichier de configuration est toujours à jour.

Configurer les blocs dans le fichier de configuration de langue

Divi 5 utilise la syntaxe des blocs, l’enregistrement des modules Divi pour la traduction est donc similaire au processus de traduction des blocs Gutenberg :

• Toutes les définitions de blocs sont enveloppées dans un élément parent <gutenberg-blocks>.
• Chaque bloc individuel est déclaré avec un élément <gutenberg-block>, où l’attribut type correspond au nom enregistré du bloc.
• Les champs traduisibles sont déclarés comme des éléments enfants <key>.

Prenons l’exemple d’un module d’appel à l’action (Call to Action) Divi :

<!-- wp:divi/cta {"module":{"title":"CTA","button_text":"Contact Us","button_url":"https://example.com/contact/"}} /-->

Voici comment il est configuré dans wpml-config.xml :

<gutenberg-blocks>
    <gutenberg-block type="divi/cta" translate="1">
       <key name="module">
         <key name="title" />
         <key name="button_text" />
         <key name="button_url" type="link" />
       </key>
    </gutenberg-block>
</gutenberg-blocks>

La structure se décompose comme suit :

• L’élément <gutenberg-blocks> enveloppe toutes les définitions de blocs.
• Un élément <gutenberg-block> définit un type de bloc unique, identifié par l’attribut type. Le translate="1" indique à WPML de le traiter.
• Chaque élément <key> identifie un champ traduisible : title et button_text pour les champs de texte brut, et button_url pour un lien.
• L’attribut type="link" indique à WPML de remplacer automatiquement l’URL par la version traduite de l’article ou de la page lié(e).

Tester le fichier de configuration de langue

Pour tester le fichier de configuration de langue mis à jour, suivez ces étapes :

1. Configurez un site avec Divi et WPML activés. Assurez-vous d’activer également les modules complémentaires Traduction de chaînes et Traduction des médias.

2. Pour remplacer le fichier de configuration de langue distant par la version mise à jour, accédez à WPML → Paramètres et cliquez sur l’onglet Configuration XML personnalisée. Copiez le contenu de votre fichier de configuration de langue mis à jour dans l’éditeur, puis cliquez sur Enregistrer.

3. Créez une nouvelle page et ajoutez-y le ou les nouveaux modules. Si vous avez mis à jour certains attributs pour des modules existants, ajoutez-les également à la page. Dans cet exemple, nous supposerons que le module Bouton a été récemment ajouté au Divi Builder. Ajoutez-le à la page, puis cliquez sur Publier.

4. Pour traduire la page avec le bouton, vous pouvez utiliser le Tableau de bord de traduction. Une alternative consiste à utiliser l’Éditeur de traduction avancé (ATE), ce qui peut être utile lors des tests — cela vous permet de voir la balise de module pour chaque élément Divi sur la page. Pour ouvrir l’ATE, accédez à Modifier la page et cliquez sur l’icône plus sous la Boîte de langue dans la barre latérale droite.

5. Vérifiez les éléments et ajoutez vos traductions ou laissez l’ATE traduire automatiquement.

Vous pouvez maintenant jeter un coup d’œil à la page traduite sur l’interface publique. La page traduite doit afficher toutes les chaînes de texte traduites, ce qui implique que le fichier de configuration de langue mis à jour fonctionne correctement.

Si vous rencontrez des problèmes, veuillez contacter notre équipe de développement de compatibilité. Elle se fera un plaisir de vérifier les problèmes liés au fichier de configuration de langue.

Une fois les tests terminés, veuillez soumettre une demande de fusion sur notre dépôt. Nos développeurs de compatibilité recevront votre demande et l’examineront.