Découvrez comment enregistrer le contenu personnalisé des constructeurs de pages pour la traduction à l’aide du fichier wpml-config.xml. Enregistrez des chaînes de texte, des médias, des widgets de constructeurs de pages, des ID de shortcodes et bien plus encore.
Ce guide s’adresse aux développeurs qui créent des thèmes et des extensions, ou qui ajoutent du code de constructeur de pages personnalisé à 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 le Support WPML.
Vous avez besoin de générer un fichier wpml-config.xml ? Consultez notre guide étape par étape pour générer automatiquement un fichier de configuration à l’aide de l’extension Multilingual Tools.
Traduire les chaînes de texte
Prenons l’exemple d’un séparateur de texte ajouté à une page à l’aide de Visual Composer. Ce séparateur possède un titre et son shortcode ressemble à ceci :
[vc_text_separator title="Separator Title"]
Afin de traduire le titre de ce séparateur de texte, vous devez ajouter quelques lignes à votre fichier wpml-config.xml. Ainsi, WPML « saura » que le titre de ce séparateur nécessite une traduction.
Le code suivant est un exemple de ce que vous devez ajouter au fichier wpml-config.xml dans ce cas.
Exemple d’ajout d’un shortcode de constructeur de pages au fichier wpml-config.xml
<wpml-config>
<shortcodes>
<shortcode>
<tag>vc_text_separator</tag>
<attributes>
<attribute>title</attribute>
</attributes>
</shortcode>
</shortcodes>
</wpml-config>Examinons la structure de l’exemple ci-dessus :
- Commencez par la balise shortcodes. Tous les shortcodes de votre site qui doivent être traduits doivent être placés sous cette balise.
- Utilisez la balise shortcode pour envelopper toutes les balises appartenant à un seul et même shortcode.
- Utilisez la balise nommée tag pour définir le nom du shortcode. Dans ce cas, il s’agit de vc_text_separator. Si vous le souhaitez, vous pouvez ajouter des libellés personnalisés facultatifs aux balises. Ces libellés s’afficheront à côté du texte dans l’Éditeur de traduction avancé et l’Éditeur de traduction classique. Les fichiers XLIFF exportés incluent également ces libellés. Consultez l’exemple ci-dessous pour savoir comment ajouter des libellés aux balises et aux attributs.
- Les shortcodes peuvent avoir un ou plusieurs attributs, vous devez donc les envelopper dans la balise attributes (au pluriel) et utiliser la balise attribute (au singulier) pour définir le titre de chaque attribut.
Les constructeurs de pages incluent (parfois) des éléments de conception qui possèdent des attributs de lien.
Vous pouvez faire en sorte que les liens internes pointent automatiquement vers la version traduite de cet article en utilisant l’option de lien : type="link".
Vous pouvez utiliser l’attribut encoding avec celle-ci. Il gère le codage spécial utilisé par divers constructeurs de pages. L’attribut de codage est généralement spécifique au constructeur de pages que vous utilisez. Il accepte les valeurs suivantes :
- base64 – Shortcode HTML brut de Visual Composer. Le shortcode stocke le code HTML sous forme de chaîne base64.
- vc_link – Formatage de lien spécial pour Visual Composer.
- vc_values – Codage spécial de Visual Composer pour les valeurs des widgets progress-bar, pie-chart et line-chart.
- av_link – Formatage de lien spécial pour Enfold.
- allow_html_tags – Habituellement, les balises HTML sont supprimées des attributs de shortcode. Définissez le codage sur allow_html_tags si l’attribut de shortcode doit autoriser les balises HTML. Utilisez ceci avec prudence, car autoriser les balises HTML dans certaines situations peut perturber le formatage et poser un problème de sécurité.
Exemple d’ajout d’un attribut de lien de shortcode : type="link"
<wpml-config>
<shortcodes>
<shortcode>
<tag>av_button</tag>
<attributes>
<attribute>label</attribute>
<attribute type="link" encoding="av_link">link</attribute>
</attributes>
</shortcode>
</shortcodes>
</wpml-config>Si vous envisagez d’utiliser des shortcodes urlencoded, assurez-vous de lire la page sur la traduction des shortcodes urlencoded.
Exemple d’ajout de libellés de balise et d’attribut
<wpml-config>
<shortcodes>
<shortcode>
<tag label="My shortcode label">my_shortcode</tag>
<attributes>
<attribute label="Shortcode title">title</attribute>
</attributes>
</shortcode>
</shortcodes>
</wpml-config>L’ajout de libellés aux balises et aux attributs vous permet d’afficher des libellés personnalisés dans l’Éditeur de traduction avancé ou l’Éditeur de traduction classique. Cela peut aider le traducteur à mieux comprendre le contexte de la chaîne de texte.
Regrouper les champs pour une meilleure organisation
Pour améliorer la clarté et l’organisation de votre configuration XML, vous pouvez préfixer les libellés de champ avec le nom du groupe. Prenons cet exemple d’un bouton d’appel à l’action (CTA) :
<wpml-config>
<shortcodes>
<shortcode>
<tag label="Call To Action: Content">et_pb_cta</tag>
<attributes>
<attribute label="Call To Action: Title">title</attribute>
<attribute label="Call To Action: Button Text">button_text</attribute>
<attribute label="Call To Action: Button URL" type="link">button_url</attribute>
</attributes>
</shortcode>
</shortcodes>
</wpml-config>
Ici, chaque attribut du shortcode et_pb_cta porte un libellé Call To Action: . WPML ne transmet pas ces libellés à l’Éditeur de traduction avancé : le traducteur voit chaque attribut comme un champ distinct, regroupé sous le shortcode, et différencie les champs par le texte que chacun contient. L’attribut label fait toujours partie du format de configuration et il est toujours utile de le définir :
Traduire les médias
Vous pouvez utiliser Traduction des médias de WPML pour utiliser différentes images pour différentes langues dans le contenu du constructeur de pages. Cela se fait en convertissant les ID d’image et les URL d’image. Vous devez « indiquer » au constructeur de pages qui utilise des shortcodes comment effectuer cette conversion. Le code suivant est un exemple de ce que vous devez ajouter au fichier wpml-config.xml dans ce cas.
Exemple d’ajout d’un shortcode de constructeur de pages au fichier wpml-config.xml pour la traduction d’images
<wpml-config>
<shortcodes>
<shortcode>
<!-- Convert media IDs in `gallery_ids` attribute, and ignore the shortcode content -->
<tag ignore-content="1">et_pb_gallery</tag>
<attributes>
<attribute type="media-ids">gallery_ids</attribute>
<attributes>
</shortcode>
<shortcode>
<!-- Convert the media URL in the content, translate some string attributes for `title` and `alt`, convert media URL in `src` attribute -->
<tag type="media-url">et_pb_image</tag>
<attributes>
<attribute>title_text</attribute>
<attribute>alt</attribute>
<attribute type="media-url">src</attribute>
</attributes>
</shortcode>
</shortcodes>
</wpml-config>Vous pouvez utiliser les valeurs suivantes :
- ignore-content – Vous pouvez l’utiliser au sein d’un élément tag. Cette valeur est facultative et peut être 0 ou 1. Vous pouvez utiliser cet attribut pour assurer une rétrocompatibilité avec les nouveaux shortcodes de médias. Si la valeur est définie sur 1, le contenu du shortcode ne sera pas traité.
- type – Vous pouvez l’utiliser au sein d’un élément tag. Vous pouvez également utiliser le contenu du shortcode qui contient l’URL du média comme valeur facultative dans media-url.
- type – Vous pouvez également l’utiliser au sein d’un élément attribute. Dans ce cas, il peut avoir l’une des valeurs facultatives suivantes :
- media-ids – une liste d’ID de médias séparés par des virgules.
- media-url – URL du média
- link – pointe vers une autre page du site et WPML la convertira automatiquement en URL de la page traduite
Traduire les médias dans les attributs de bloc
Vous pouvez également utiliser les types d’attributs media-url et media-ids avec les blocs Gutenberg pour traduire des médias tels que des images d’arrière-plan. Cela fonctionne de la même manière que pour les shortcodes, mais utilise l’élément <gutenberg-block> avec des éléments <key> imbriqués pour définir type="media-url" et type="media-ids".
L’utilisation de cet élément permet à notre module complémentaire Traduction des médias de WPML de traduire les images d’arrière-plan.
Cela fonctionne à la fois pour les blocs Gutenberg et Divi 5. Cette version de Divi utilise des blocs pour stocker le contenu, l’élément <gutenberg-block> fonctionne donc pour ajouter la traduction des médias.
Voici un exemple d’ajout de la traduction des médias pour les attributs de bloc Gutenberg :
<wpml-config>
<gutenberg-blocks>
<gutenberg-block type="divi/section" translate="1">
<key name="module">
<key name="decoration">
<key name="background">
<key name="desktop">
<key name="value">
<key name="image">
<key name="url" type="media-url" />
</key>
</key>
</key>
</key>
</key>
</key>
</gutenberg-block>
</gutenberg-blocks>
</wpml-config>
Traduire les widgets des constructeurs de pages
WPML vous permet d’enregistrer les widgets des constructeurs de pages dans votre fichier de configuration de langue. Pour des informations détaillées, consultez notre page de documentation sur la façon d’enregistrer les widgets des constructeurs de pages pour la traduction.
Convertir automatiquement les ID de shortcodes
Depuis WPML 4.5.9, vous pouvez déclarer les ID des articles ou des termes de taxonomie situés dans les attributs de shortcode. Ces ID peuvent ensuite être convertis automatiquement sur le front-end de votre site.
Depuis WPML 4.8, cette même logique s’étend aux ID d’objets stockés dans les textes d’administration, ainsi qu’aux ID dans les champs personnalisés d’articles et les champs de termes de taxonomie personnalisés.
Par exemple, considérez le shortcode suivant :
[foo_product_list product_ids="12,34,56"]
Vous pouvez déclarer que l’attribut product_ids contient des ID d’articles avec la configuration suivante :
Déclarer que l’attribut product_ids contient des ID d’articles
<shortcode>
<tag ignore-content="1">foo_product_list</tag>
<attributes>
<attribute type="post-ids" sub-type="product">product_ids</attribute>
</attributes>
</shortcode>Sur le front-end, le shortcode se convertit automatiquement en :
[foo_product_list product_ids="13,35,57"]
Vous pouvez utiliser les attributs de configuration suivants :
- type – soit post-ids, soit taxonomy-ids
- sub-type (facultatif) – une entité spécifique du type si elle est déjà connue. Par exemple, product pour le type de publication personnalisé Product provenant de WooCommerce. S’il n’est pas défini, l’entité spécifique sera devinée.
La conversion d’ID est polyvalente et tente de s’adapter à la plupart des formats d’ID possibles (ID unique, liste d’ID, tableau sérialisé, tableau encodé en JSON).
Noms d’attributs avec un caractère générique
Certains shortcodes stockent des ID dans de nombreux attributs avec des noms similaires, par exemple include_category, include_portfolio_category et include_product_cat. Une seule ligne <attribute> peut tous les couvrir. Mettez * dans le nom de l’attribut :
Déclarer tous les attributs include_ et exclude_ comme contenant des ID de taxonomie
<shortcode>
<tag>fusion_post_cards</tag>
<attributes>
<attribute type="taxonomy-ids" exclude="include_product_skus">include_*</attribute>
<attribute type="taxonomy-ids" exclude="exclude_product_skus">exclude_*</attribute>
</attributes>
</shortcode>- * correspond à une ou plusieurs lettres, chiffres, _ ou -.
- * fonctionne uniquement avec type="post-ids" et type="taxonomy-ids".
- WPML fait correspondre le reste du nom exactement. WPML n’accepte pas les expressions régulières dans les noms d’attributs.
- exclude (facultatif) – une liste de noms complets d’attributs séparés par des virgules. WPML ne convertit pas les ID dans ces attributs. Utilisez ceci pour les attributs qui correspondent au nom mais ne contiennent pas d’ID, tels que include_product_skus.
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 guides supplémentaires :
- Enregistrer les widgets de constructeurs de pages personnalisés 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 de WPML
- Enregistrer les termes, types et taxonomies personnalisés comme traduisibles
- Rendre les blocs Gutenberg personnalisés traduisibles
- Traduire les textes que le thème et les extensions enregistrent dans wp_options
- Personnaliser le sélecteur de langue WPML à l’aide du fichier de configuration de WPML
