Sauter la navigation
Accueil » Documentation WPML » Projets connexes » Advanced Custom Fields (ACF) Multilingue – Traduisez tous les champs avec WPML » Utilisation de WPML pour traduire des sites conçus avec ACF et Elementor Pro

Utilisation de WPML pour traduire des sites conçus avec ACF et Elementor Pro

Kathy Banach
Mis à jour
janvier 23, 2025

Elementor Pro vous permet d’insérer dynamiquement des données de champs personnalisés ACF directement dans vos conceptions Elementor. WPML vous permet de rendre tout le contenu multilingue.

Pour savoir quels types de champs ACF sont pris en charge par Elementor, veuillez consulter la page de documentation sur l’intégration de Elementor avec ACF.

Sur cette Page :

Pour commencer

Commencez par installer et activer les extensions suivantes :

Sélection d’une option de traduction multilingue de l’ACF

ACF multilingue 2.0 est accompagné d’un assistant de configuration multilingue qui vous permet de choisir parmi trois options de traduction :

  • Mêmes champs dans toutes les langues
  • Des champs différents d’une langue à l’autre
  • Expert

En savoir plus sur les options de traduction.

Sur un site existant avec ACF, Elementor Pro, et WPML, l’option Expert sera sélectionnée pour vos groupes de champs existants.

Il est important de noter que vous devez définir les options de traduction par groupe de champs. Pour ce faire, vous devez éditer chaque groupe de champs et sélectionner une option de traduction pour les champs qu’il contient. Si vous ne définissez pas d’option de traduction pour un groupe de champs, vous ne pourrez pas traduire les champs qui en font partie.

Traduisez les choix des champs de type sélection, case à cocher et bouton radio.

WPML vous permet de traduire et d’afficher les choix que vous ajoutez aux types de champs select, checkbox, et Radio button sur l’interface frontale.

Cependant, Elementor n’affiche que les valeurs des champs. Ainsi, lorsque vous ajoutez ces types de champs dans les champs personnalisés, vous devez saisir chaque choix sur une nouvelle ligne dans la section Choix.

Entrée de chaque choix sur une nouvelle ligne

Utilisation de l’option de traduction « Mêmes champs dans toutes les langues ».

Une fois que vous avez sélectionné l’option Mêmes champs dans toutes les langues, vous pouvez rendre vos champs personnalisés multilingues en suivant une procédure en deux étapes :

Traduction d’un article ou d’un type d’article personnalisé avec des champs personnalisés ACF assignés

Si vous avez activé le mode tout traduire automatiquement, votre article, les champs qui lui sont assignés, et vos étiquettes de champs seront traduits automatiquement.

Dans le mode traduire ce que vous choisissez, vous pouvez traduire l’article, les champs personnalisés qu’il contient, et vos étiquettes de champs et étiquettes de choix de la même manière que vous traduiriez tout autre article ou page.

Ici, nous allons vous montrer rapidement comment traduire un article et les valeurs des champs par vous-même :

  1. Modifiez l’Article que vous souhaitez traduire. Dans la zone Langue, cliquez sur l’icône plus à côté de la langue dans laquelle vous souhaitez traduire l’Article.
Cliquez sur l’icône plus pour traduire l’article
  1. Vous serez dirigé vers l’éditeur de traduction avancé. Si vous disposez de crédits de traduction, vous verrez les traductions automatiques remplies. Vous pouvez les relire et les accepter. Si vous n’avez pas de crédits et que vous traduisez votre contenu manuellement, cliquez sur les icônes plus et entrez les traductions pour chaque ligne. Une fois que vous avez terminé, cliquez sur le bouton Terminer.
Traduction d’un article avec des champs personnalisés dans l’éditeur de traduction avancé

Traduction du modèle Elementor

Une fois que vous avez inséré dynamiquement les données de champs personnalisés ACF dans un modèle d’article unique, vous pouvez le traduire dans les langues secondaires de votre site. Pour en savoir plus, consultez notre guide de traduction des modèles Elementor.

Utilisation de l’option de traduction « Champs différents d’une langue à l’autre

Lorsque vous utilisez Elementor et ACF avec WPML, vous pouvez avoir le même nombre de champs dans chacune des langues de votre site tout en ayant des valeurs de champs différentes.

Prenons l’exemple d’un blog sur le cinéma. Le contenu de votre site est disponible en deux langues – anglais et espagnol. Vous souhaitez avoir un article sur le meilleur film de cette année. Cependant, vos publics anglophone et hispanophone ont voté pour deux films différents.

Vous souhaitez utiliser les mêmes champs personnalisés, comme le titre du film, la description du film, l’image du film et le genre du film dans les deux langues. Mais vous voulez que les valeurs soient différentes. Vous voulez également que les deux articles utilisent des modèles Elementor différents.

Dans ce cas, vous ne pouvez pas utiliser la traduction automatique ou l’éditeur de traduction avancé, car cela nécessite que vous traduisiez directement le contenu de l’article et les valeurs des champs. Toutefois, vous pouvez choisir l’option de traduction Différents champs à travers les langues pour votre groupe de champs et :

  1. Traduisez vos images dans WPML Media Translation
  2. Traduisez manuellement l’article et les valeurs des champs dans la langue secondaire de votre site
  3. Traduisez les valeurs du type de champ select dans le String Translation de WPML
  4. Assignez différents modèles Elementor aux articles dans les langues par défaut et secondaire

Dans les sections ci-dessous, nous vous guiderons à travers le processus de traduction de tous les différents éléments.

Traduction d’images à l’aide de Media Translation

Si vous disposez d’un champ de type ACF Image, il se peut que vous souhaitiez utiliser des images différentes pour des articles rédigés dans des langues différentes.

Pour commencer, installez et activez le module complémentaire WPML Media Translation.

Ensuite, suivez les étapes ci-dessous :

  1. Allez dans WPML → Media Translation.
  2. Localisez l’image que vous souhaitez « traduire » et cliquez sur l’icône du crayon sous la langue pour laquelle vous souhaitez utiliser une image différente.
  3. Téléchargez une autre image et cliquez sur le bouton Enregistrer la traduction des médias.
Téléchargement d’une autre image et enregistrement de la traduction des médias

Traduction des valeurs du contenu et des champs ACF dans l’éditeur WordPress

Désormais, vous pouvez traduire votre contenu et les valeurs des champs dans l’option de traduction champs différents selon les langues. Veuillez noter que pour cette option de traduction, vous ne pouvez utiliser que l’éditeur WordPress pour traduire votre contenu.

  1. Modifiez l’article sur la langue par défaut. Dans la zone Langue, cliquez sur l’icône plus à côté de la langue dans laquelle vous souhaitez traduire l’Article.
Cliquez sur l’icône plus dans la case Langue
  1. Vous devriez voir des champs personnalisés vides et l’image que vous avez déjà traduite en utilisant Media Translation. À présent, il ne reste plus qu’à saisir manuellement le contenu du billet et les valeurs des champs dans la langue secondaire du site, puis cliquer sur publier.
Saisissez manuellement les valeurs des champs dans la langue secondaire de votre site

Traduisez les choix pour les champs de type sélection, case à cocher et bouton radio.

Dans l’option de traduction champs différents selon les langues, vous devez traduire les choix pour les types de champs de sélection en utilisant String Translation.

Pour ce faire :

  1. Allez dans WPML → String Translation.
  2. Utilisez le filtre d’affichage en haut de la page String Translation pour déterminer quelles chaînes afficher. Vous pouvez rechercher des chaînes dans le domaine acf-field-group, ou rechercher les textes exacts.
Détermination des chaînes à afficher
  1. Une fois que vous avez localisé le texte à traduire, cliquez sur l’icône plus située sous la langue dans laquelle vous souhaitez le traduire. Entrée pour enregistrer la traduction.
Cliquez sur l’icône plus pour traduire les chaînes

Création de modèles Elementor différents pour les billets en langue par défaut et en langue secondaire

Une fois que vous avez terminé la traduction de tout le contenu du billet et des valeurs des champs, vous pouvez créer des modèles différents pour chacun des billets et insérer dynamiquement les valeurs des champs.

Vous pouvez en apprendre davantage dans notre documentation sur la création de modèles Elementor différents pour des billets et des pages spécifiques dans les langues secondaires.

Traduire et afficher les libellés des champs personnalisés de l’ACF

Parfois, vous pourriez souhaiter afficher à la fois l’étiquette du champ et les valeurs de vos champs personnalisés ACF.

Prenons l’exemple de notre Article sur les films. Nous voulons afficher le libellé du champ, Genre de film, et la valeur du champ, Action, sur le Front-office.

WPML vous permet de traduire les étiquettes des champs ACF, mais Elementor n’offre pas de moyen d’afficher dynamiquement les étiquettes des champs sur l’interface publique. Par défaut, Elementor ne peut afficher dynamiquement que les valeurs des champs.
Pour afficher dynamiquement les étiquettes, vous devez utiliser les options dans l’onglet Avancé et ajouter manuellement le texte de votre choix avant ou après les valeurs des champs.

Ajout manuel de texte avant la valeur du champ dans l’onglet Avancé

Pour traduire le texte que vous avez ajouté Avant ou Après la valeur du champ personnalisé, il vous suffit de traduire le modèle Elementor. Si vous traduisez le modèle vous-même, vous verrez le texte dans l’Advanced Translation Editor.

Traduction du texte ajouté au modèle dans l’éditeur de traduction avancé

Une fois que vous avez traduit à la fois le billet et le modèle, vous verrez les traductions à l’endroit approprié sur l’interface publique.

Le texte ajouté avant le champ personnalisé traduit sur l’interface publique