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

Pour enregistrer des 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 sur votre site, veuillez contacter l’assistance WPML.

Les constructeurs de pages tels qu’Elementor (s'ouvre dans un nouvel onglet), Beaver Builder (s'ouvre dans un nouvel onglet), SiteOrigin (s'ouvre dans un nouvel onglet) et Cornerstone (s'ouvre dans un nouvel onglet) sont fournis avec leur propre suite de widgets. Ces widgets par défaut fonctionnent de manière transparente avec WPML.

Parfois, vous pouvez 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, 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 a été développé pour vos sites WordPress ou un constructeur de pages spécifique par votre équipe ou des tiers

Par le passé, 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 en utilisant wpml-config.xml, le fichier de configuration de WPML.

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 comprend un WPML – Config Generator pour Elementor et les blocs Gutenberg. Cette fonctionnalité vous permet d’ajouter à une page tout 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.

Comment trouver les informations d’enregistrement d’un widget

Pour pouvoir enregistrer un widget personnalisé dans le fichier wpml-config.xml, vous devez d’abord trouver quelques informations de base le concernant : le nom du type du widget et les noms des champs que vous souhaitez traduire.

Ajoutez le widget seul à une nouvelle page et enregistrez la page. Elementor stocke les widgets de la page dans le champ de métadonnée de publication _elementor_data, et une extension comme JSM Show Post Metadata (s'ouvre dans un nouvel onglet) affiche ce champ dans une boîte de métadonnées au bas de l’éditeur de page, afin que vous puissiez y lire les données du widget.

Dans ces données :

• widgetType est le nom à utiliser dans l’attribut name du widget.
• Les clés sous settings sont les champs du widget. Une clé qui contient un texte que vous souhaitez traduire, comme title, est un nom de champ à enregistrer.
• Un champ répéteur contient un tableau de lignes. La clé qui contient ce tableau, comme contents, est le nom « items of ».

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

Pour vérifier votre travail, ouvrez une page qui utilise le widget dans l’éditeur de traduction. Les champs que vous avez enregistrés y apparaissent par leur nom, avec les textes du widget à côté. Un widget qui n’est pas enregistré n’apporte rien à la tâche, donc si aucun de ses textes n’apparaît, c’est que l’enregistrement n’a pas pris effet.

Enregistrer des widgets simples

La vidéo suivante vous guide à travers 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 n’a 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>

Passons en revue la structure de l’exemple donné :

1. Commencez par la balise <elementor-widgets>. Cela indique à WPML quels widgets de constructeurs de pages vous allez enregistrer. Il peut s’agir de l’une des balises suivantes :
   • <elementor-widgets> : ceci doit être utilisé si vous utilisez Elementor, Elementor PRO ou tout autre module complémentaire Elementor.
   • <beaver-builder-widgets> : ceci doit être utilisé si vous utilisez Beaver Builder Lite, Beaver Builder premium ou tout autre module complémentaire Beaver Builder.
   • <siteorigin-widgets> : ceci doit être utilisé si vous utilisez le constructeur de pages SiteOrigin.
   • <cornerstone-widgets> : et ceci doit être utilisé pour le constructeur de pages Cornerstone qui est fourni avec le thème X ou le thème PRO.
2. 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 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.

3. 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. La valeur par défaut est 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.

Enregistrer des champs avec des ID de publication ou de taxonomie

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 de publication ou des ID de taxonomie (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 de publication
• type="term-ids" – pour les champs contenant des ID de taxonomie/terme

Lorsque vous utilisez ces valeurs de types :

• Le champ n’apparaîtra pas dans l’éditeur de traduction
• WPML convertit automatiquement les ID pour qu’ils pointent vers le contenu traduit correspondant
• Les ID uniques ainsi que 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 sub-type facultatif spécifie le type de publication ou la taxonomie exact(e) 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 de base de données supplémentaires pour déterminer le type de contenu.

Pour plus d’exemples, consultez le fichier de configuration d’Elementor (s'ouvre dans un nouvel onglet) et recherchez post-ids.

Enregistrer des widgets avec des champs répéteurs

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

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 :

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>

Enregistrer des widgets avec à la fois des champs simples et des champs 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>

Regrouper les 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 de widget 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 dans le widget hotspot est préfixé avec l’étiquette Hotspot:. Ce préfixe apparaît également dans l’Éditeur de traduction avancé : les champs du widget se trouvent dans une boîte Hotspot et chacun porte sa propre étiquette, ce qui facilite l’identification et la traduction de chaque champ :

Enregistrer d’autres types de contenus de constructeurs de pages

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

Ressources supplémentaires

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

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

• Enregistrer le contenu du constructeur de pages pour la traduction
• Traduire des shortcodes personnalisés avec WPML
• Définir les options de traduction pour les champs personnalisés à l’aide du fichier de configuration WPML
• Enregistrer des termes, types et taxonomies personnalisés comme traduisibles
• Rendre les blocs Gutenberg personnalisés traduisibles
• Traduire les textes que les thèmes et les extensions enregistrent dans wp_options
• Personnaliser le sélecteur de langue WPML à l’aide du fichier de configuration WPML