Enregistrez le contenu du constructeur de pages pour la traduction

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, 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 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 de 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

Prenons un exemple où vous avez 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"]

Pour 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 unique shortcode.
Utilisez la balise appelé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 étiquettes personnalisées facultatives aux balises. Ces étiquettes 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 étiquettes. Consultez l’exemple ci-dessous pour savoir comment ajouter des étiquettes 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 cette option. Il gère l’encodage spécial utilisé par divers constructeurs de pages. L’attribut d’encodage 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 HTML sous forme de chaîne base64.
vc_link – Formatage de lien spécial pour Visual Composer.
vc_values – Encodage spécial de Visual Composer pour les valeurs dans les widgets de barre de progression, de graphique à secteurs et de graphique en courbes.
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 l’encodage sur allow_html_tags si l’attribut de shortcode doit autoriser les balises HTML. Utilisez cette option avec prudence, car l’autorisation des balises HTML dans certaines situations peut perturber le formatage et constituer 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 expliquant comment traduire les shortcodes encodés en URL.

Exemple d’ajout d’étiquettes 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 d’étiquettes aux balises et aux attributs vous permet d’afficher des étiquettes personnalisées 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.

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 champ avec le nom du groupe. Prenez 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 est préfixé par l’étiquette Call To Action: , qui s’affiche également dans l’Éditeur de traduction avancé :

Traduction du bouton CTA dans l’Éditeur de traduction avancé

Traduire les médias

Vous pouvez utiliser la Traduction des médias de WPML pour utiliser des images différentes pour différentes langues dans le contenu du constructeur de pages. Cela se fait en convertissant les ID et les URL des images. 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 soit 0, soit 1. Vous pouvez utiliser cet attribut pour assurer la rétrocompatibilité des 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 de shortcode contenant 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 – l’URL du média.
- link – pointe vers une autre page du site, et WPML la convertira automatiquement en l’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 manière similaire aux 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 traduction de 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 de constructeur de pages

WPML vous permet d’enregistrer des widgets de constructeur de pages dans votre fichier de configuration de langue. Pour des informations détaillées, consultez notre page de documentation expliquant comment enregistrer des widgets de constructeur 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</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é Produit provenant de WooCommerce. Si elle n’est pas définie, l’entité spécifique sera devinée.

La conversion des 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).

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 :