Enregistrez les widgets personnalisés du constructeur de pages pour la traduction

Pour enregistrer les widgets personnalisés de constructeurs de pages pour la traduction, vous devez utiliser le fichier wpml-config.xml. Suivez ce tutoriel pour apprendre à l’utiliser.

Ce guide s’adresse aux développeurs qui créent des thèmes et des extensions ou qui ajoutent du code personnalisé de constructeur de pages à leur site.

Si vous utilisez un constructeur de pages tiers et que vous ne parvenez pas à traduire les widgets personnalisés de votre site, veuillez contacter l’assistance de WPML.

Les constructeurs de pages comme Elementor, Beaver Builder, SiteOrigin et Cornerstone sont fournis avec leur propre suite de widgets. Ces widgets par défaut fonctionnent parfaitement avec WPML.

Parfois, vous pouvez être amené à créer des widgets personnalisés destinés à être utilisés avec ces constructeurs de pages ou d’autres.

Un widget personnalisé est tout widget unique et supplémentaire qui n’est pas fourni avec un constructeur de pages. Ceux-ci peuvent être créés par votre équipe de développement, par des développeurs tiers, ou provenir d’autres extensions et thèmes.

Un widget personnalisé est également tout widget provenant de modules complémentaires développés spécifiquement pour un constructeur de pages, comme Elementor, par des développeurs externes.

Quand dois-je enregistrer des widgets personnalisés pour la traduction ?

Vous devez enregistrer votre widget personnalisé pour la traduction :

S’il s’agit d’un widget qui n’est pas fourni à l’origine par un constructeur de pages
Si vous l’avez créé et ajouté via une autre extension ou un autre thème
S’il est développé pour vos sites WordPress ou pour un constructeur de pages spécifique par votre équipe ou par des tiers

Auparavant, la méthode la plus courante pour enregistrer des widgets personnalisés pour la traduction consistait à utiliser du code PHP personnalisé. Désormais, vous pouvez facilement enregistrer le widget pour la traduction à l’aide de wpml-config.xml, le fichier de configuration de WPML.

Enregistrement de widgets Elementor personnalisés pour la traduction dans WPML 4.9+

Dans WPML 4.9 et versions ultérieures, WPML reconnaît automatiquement les widgets Elementor personnalisés et les rend traduisibles. Cependant, il peut enregistrer des chaînes que vous ne souhaitez pas traduire.

C’est pourquoi nous vous recommandons vivement de configurer manuellement le fichier wpml-config.xml tel que décrit sur cette page. Cela vous permet de contrôler quels champs sont traduisibles.

Comment enregistrer des widgets Elementor et des blocs Gutenberg personnalisés pour la traduction à l’aide de l’extension Multilingual Tools

Notre extension Multilingual Tools inclut un WPML – Config Generator pour les blocs Elementor et Gutenberg. Cette fonctionnalité vous permet d’ajouter à une page n’importe quel widget Elementor ou bloc Gutenberg personnalisé que vous souhaitez enregistrer pour la traduction. Elle génère ensuite automatiquement la première version du code XML dont vous avez besoin.

Découvrez comment enregistrer des widgets Elementor personnalisés pour la traduction et comment rendre les blocs Gutenberg traduisibles.

Pour pouvoir enregistrer un widget personnalisé dans le fichier wpml-config.xml , vous devez d’abord trouver quelques informations de base à son sujet.

Vous pouvez facilement obtenir ces informations en utilisant une extension comme JSM Show Post Metadata. Cette extension affiche les métadonnées de l’article et leurs valeurs non sérialisées dans une boîte de métadonnées au bas des pages d’édition d’articles.

Vous pouvez également suivre les étapes suivantes pour obtenir ces informations :

Accédez à la page WPML → Paramètres, faites défiler jusqu’à la section Traduction des champs personnalisés et cliquez sur le lien Afficher les champs système.
Réglez le champ personnalisé _elementor_data sur Traduire.
Créez une nouvelle page et ajoutez uniquement le widget Elementor que vous souhaitez enregistrer. Enregistrez la page.
Allez dans WPML → Paramètres et dans la section Éditeur de traduction , activez temporairement l’option Éditeur de traduction classique.
Essayez de traduire la page que vous avez créée à l’étape 3 à l’aide de l’Éditeur de traduction classique et vous remarquerez un tableau sérialisé, comme ceci :

Copie des données du widget dans l’éditeur classique — Tableau sérialisé du widget Elementor exposé dans l’Éditeur de traduction classique de WPML

Copiez le contenu du tableau sérialisé.
Utilisez votre outil de désérialisation préféré pour mieux voir comment le widget affiche son contenu. Dans notre cas, nous avons utilisé le site Unserialize.

Voici l’explication du contenu du tableau que vous verrez :

[widgetType] contient le nom inséré dans l’attribut name de la balise du widget.
Les champs réels se trouveront à l’intérieur d’un tableau (Array) et vous pouvez les trouver en recherchant [0], ce qui affichera le contenu du premier élément du tableau.
La valeur du champ (field) sera le nom entre crochets qui contiendra le nom du champ. Par exemple : [title] => this is a field title. Dans ce cas, « title » est le texte dont vous avez besoin.
L’élément « Items of » obtiendra sa valeur de l’élément qui crée le tableau. Par exemple : [contents]=> array. Dans ce cas, « contents » est le texte dont vous avez besoin.

Une fois que vous disposez de ces informations, vous pouvez procéder à l’enregistrement proprement dit du widget pour la traduction.

Enregistrement de widgets simples

La vidéo suivante vous présente un exemple d’enregistrement d’un widget Elementor simple :

L’exemple suivant illustre comment enregistrer un widget simple. Un widget simple signifie ici que le widget ne possède pas de champs répéteurs.

<wpml-config>
	<elementor-widgets>
		<widget name="heading">
			<conditions>
				<condition key="widgetType">heading</condition>
			</conditions>
			<fields>
				<field type="Heading" editor_type="LINE">title</field>
				<field type="Heading: Link URL" editor_type="LINK">link>url</field>
			</fields>
		</widget>
	</elementor-widgets>
</wpml-config>

Examinons la structure de l’exemple donné :

Commencez par la balise <elementor-widgets>. Cela indique à WPML quels widgets de constructeur de pages vous allez enregistrer. Il peut s’agir de l’un des éléments suivants :
- <elementor-widgets> : ceci doit être utilisé si vous utilisez Elementor, Elementor PRO ou tout autre module complémentaire d’Elementor.
- <beaver-builder-widgets> : ceci doit être utilisé si vous utilisez Beaver Builder Lite, Beaver Builder premium ou tout autre module complémentaire de Beaver Builder.
- <siteorigin-widgets> : ceci doit être utilisé si vous utilisez le constructeur de pages SiteOrigin.
- <cornerstone-widgets> : et celui-ci doit être utilisé pour le constructeur de pages Cornerstone fourni avec le thème X ou le thème PRO.
Ajoutez vos widgets :
- <widget name="widget_name"> où widget_name est le nom utilisé pour enregistrer le widget dans le constructeur de pages.
- <conditions> (facultatif) : sous les conditions, vous ajoutez une condition avec une clé égale au nom du widget. Cela peut être utilisé lorsque le nom du widget est différent de la clé du widget dans les données, mais ce n’est généralement pas nécessaire.

Ajoutez les champs des widgets en les enveloppant dans une balise <fields> :
- field : l’ID du champ. Il s’agit du même ID que celui utilisé lors de l’ajout d’un contrôle via la fonction Control_stack::add_control.
- type (facultatif) : le type de champ. Il s’agit du texte affiché dans l’Éditeur de traduction avancé ou l’Éditeur de traduction classique de WPML pour aider le traducteur à savoir quel champ est en cours de traduction.
- editor_type (facultatif) : il s’agit du type de champ de texte utilisé dans l’Éditeur de traduction classique de WPML. Les valeurs valides sont LINE, AREA, LINK et VISUAL. Par défaut, il s’agit de LINE s’il est manquant.
- key_of (facultatif) : ceci est uniquement utilisé pour les balises <field> qui ont un tableau à l’intérieur d’une balise <fields-in-item>.

Vous pouvez utiliser ces éléments pour enregistrer un widget simple avec n’importe quel nombre de champs.

Enregistrement de champs avec des ID d’articles ou de taxonomies

Dans la section ci-dessus, vous avez appris que l’attribut type est généralement utilisé pour afficher un texte descriptif dans l’Éditeur de traduction.

Cependant, lorsque les champs de votre widget stockent des ID d’articles ou des ID de taxonomies (tels que des images sélectionnées, des articles liés ou des catégories choisies), vous utilisez des valeurs spéciales qui déclenchent une conversion automatique :

type="post-ids" – pour les champs contenant des ID d’articles
type="term-ids" – pour les champs contenant des ID de taxonomies/termes

Lorsque vous utilisez ces valeurs de types :

Le champ n’apparaîtra pas dans l’éditeur de traduction
WPML convertit automatiquement les ID pour pointer vers le contenu traduit correspondant
Les ID uniques et les listes d’ID séparés par des virgules sont pris en charge

Exemple :

<wpml-config>
    <elementor-widgets>
        <widget name="the-widget-name">
            <fields>
                <field type="post-ids" sub-type="attachment">image_id</field>
                <field type="post-ids" sub-type="post">selected_posts</field>
                <field type="term-ids" sub-type="category">category_filter</field>
            </fields>
        </widget>
    </elementor-widgets>
</wpml-config>

Dans cet exemple, l’attribut facultatif sub-type spécifie le type de publication ou la taxonomie exact en cours de conversion :

Pour type="post-ids" : utilisez sub-type="attachment", sub-type="post", sub-type="page", ou le slug de votre type de publication personnalisé
Pour type="term-ids" : utilisez sub-type="category", sub-type="post_tag", ou le slug de votre taxonomie personnalisée

L’ajout de sub-type améliore les performances en évitant des requêtes supplémentaires dans la base de données pour déterminer le type de contenu.

Pour plus d’exemples, consultez le fichier de configuration d’Elementor et recherchez post-ids.

Enregistrement de widgets avec des champs répéteurs

La vidéo suivante vous présente un exemple d’enregistrement d’un widget Elementor avancé avec des champs répéteurs :

A hotspot widget's fields in the Advanced Translation Editor

Pour les widgets qui ont des champs répéteurs, vous devez envelopper les champs dans la balise <fields-in-item items_of="tabs"> (où tabs est le nom du widget avec des champs répétés). Consultez cet exemple :

<widget name="accordion">
	<fields-in-item items_of="tabs">
		<field type="Accordion: Title" editor_type="LINE">tab_title</field>
		<field type="Accordion: Content" editor_type="VISUAL">tab_content</field>
	</fields-in-item>
</widget>

Dans certains cas, le widget peut avoir plusieurs champs répéteurs. Considérez la structure de données suivante du widget Table d’Ultimate Addons for Elementor comme exemple :

La structure de données d’un widget Table d’Ultimate Addons for Elementor

Pour enregistrer ce widget, veuillez consulter l’exemple suivant :

<widget name="uael-table">
	<fields-in-item items_of="table_content">
		<field type="The Cell text" editor_type="LINE">cell_text</field>
	</fields-in-item>
	<fields-in-item items_of="table_headings">
		<field type="The Heading text" editor_type="LINE">heading_text</field>
	</fields-in-item>
</widget>

Enregistrement de widgets avec des champs simples et répéteurs

Notez que les widgets peuvent avoir les deux types : fields et fields-in-item. Consultez cet exemple pour un widget qui utilise les deux :

<widget name="price-table">
	<fields>
		<field type="Price Table: Heading" editor_type="LINE">heading</field>
		<!-- ... -->
	</fields>
	<fields-in-item items_of="features_list">
		<field type="Price table: text" editor_type="LINE">item_text</field>
	</fields-in-item>
</widget>

Regroupement de champs pour une meilleure organisation

Pour améliorer la clarté et l’organisation de votre configuration XML, vous pouvez préfixer les étiquettes de champs avec le nom du groupe. Considérez cet exemple d’un widget de point d’accès (hotspot) :

<widget name="hotspot">
    <fields-in-item items_of="hotspot">
        <field type="Hotspot: Label">hotspot_label</field>
        <field type="Hotspot: URL" key_of="hotspot_link">url</field>
        <field type="Hotspot: Content" editor_type="VISUAL">hotspot_tooltip_content</field>
    </fields-in-item>
</widget>

Ici, chaque champ du widget de point d’accès est préfixé par l’étiquette Hotspot:. Ce préfixe apparaît également dans l’Éditeur de traduction avancé, ce qui facilite l’identification et la traduction de chaque champ :

Traduction du widget de point d’accès dans l’Éditeur de traduction avancé

Enregistrement d’autres types de contenu de constructeur de pages

Consultez notre documentation sur l’enregistrement du contenu de constructeur de pages dans votre fichier de configuration de langue pour en savoir plus sur l’enregistrement de chaînes, de shortcodes, etc.

Ressources supplémentaires

Pour en savoir plus sur le fichier wpml-config.xml, consultez le guide sur les fichiers de configuration de langue.

Pour personnaliser d’autres éléments à l’aide du fichier wpml-config.xml, consultez nos autres guides :

Enregistrer les widgets personnalisés de constructeurs de pages pour la traduction