Registrar contenido del maquetador visual para su traducción

Aprenda a registrar el contenido personalizado del maquetador visual para su traducción mediante el archivo wpml-config.xml. Registre cadenas, medios, widgets del maquetador visual, ID de shortcodes y mucho más.

Esta guía es para desarrolladores que crean temas y plugins o añaden código personalizado del maquetador visual a su sitio.

Si utiliza un maquetador visual de terceros y no puede traducir los widgets personalizados de su sitio web, contacte con el soporte de WPML.

¿Necesita generar un archivo wpml-config.xml? Visite nuestra guía paso a paso para generar automáticamente un archivo de configuración utilizando el plugin Herramientas multilingües.

Traducir cadenas

Consideremos un ejemplo en el que tiene un separador de texto añadido a una página utilizando Visual Composer. Ese separador tiene un título y su shortcode se ve así:

[vc_text_separator title="Separator Title"]

Para traducir el título de este separador de texto, necesita añadir unas cuantas líneas a su archivo wpml-config.xml. De esta manera, WPML «sabrá» que el título de ese separador necesita traducción.

El siguiente código es un ejemplo de lo que debe añadir al archivo wpml-config.xml en este caso.

Ejemplo de cómo añadir el shortcode de un maquetador visual al archivo wpml-config.xml

<wpml-config>
  <shortcodes>
    <shortcode>
        <tag>vc_text_separator</tag>
        <attributes>
            <attribute>title</attribute>
        </attributes>
    </shortcode>
  </shortcodes>
</wpml-config>

Repasemos la estructura del ejemplo anterior:

Comience con la etiqueta shortcodes. Cualquier shortcode de su sitio que necesite ser traducido debe colocarse bajo esta etiqueta.
Utilice la etiqueta shortcode para envolver todas las etiquetas que pertenezcan a un único shortcode.
Utilice la etiqueta llamada tag para definir el nombre del shortcode. En este caso, es vc_text_separator. Si lo prefiere, puede añadir etiquetas personalizadas opcionales a las etiquetas. Estas etiquetas se mostrarán junto al texto tanto en el Editor de traducción avanzado como en el Editor de traducción clásico. Los archivos XLIFF exportados también incluyen estas etiquetas. Vea el siguiente ejemplo sobre cómo añadir etiquetas a las etiquetas y atributos.
Los shortcodes pueden tener uno o más atributos, por lo que debe envolverlos en la etiqueta attributes (plural) y usar la etiqueta attribute (singular) para definir el título de cada atributo.

Los maquetadores visuales (a veces) incluyen elementos de diseño que tienen atributos de enlace.

Puede hacer que los enlaces internos apunten automáticamente a la versión traducida de esa entrada utilizando la opción de enlace: type="link".

Puede utilizar el atributo encoding con esta opción. Este gestiona la codificación especial que utilizan varios maquetadores visuales. El atributo de codificación suele ser específico del maquetador visual que utilice. Acepta los siguientes valores:

base64: shortcode de HTML sin procesar de Visual Composer. El shortcode almacena el HTML como una cadena base64.
vc_link: formato de enlace especial para Visual Composer.
vc_values: codificación especial de Visual Composer para los valores en los widgets de barra de progreso, gráfico circular y gráfico de líneas.
av_link: formato de enlace especial para Enfold.
allow_html_tags: por lo general, las etiquetas HTML se eliminan de los atributos del shortcode. Establezca la codificación en allow_html_tags si el atributo del shortcode debe permitir etiquetas HTML. Utilice esto con precaución, ya que permitir etiquetas HTML en algunas situaciones puede estropear el formato y podría suponer un problema de seguridad.

Ejemplo de cómo añadir el atributo de enlace del 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 está pensando en utilizar shortcodes con codificación urlencoded, asegúrese de leer la página sobre traducir shortcodes urlencoded.

Ejemplo de cómo añadir etiquetas personalizadas a las etiquetas y atributos

<wpml-config>
    <shortcodes>
        <shortcode>
            <tag label="My shortcode label">my_shortcode</tag>
            <attributes>
                <attribute label="Shortcode title">title</attribute>
            </attributes>
        </shortcode>
    </shortcodes>
</wpml-config>

Añadir etiquetas personalizadas a las etiquetas y atributos le permite mostrar etiquetas personalizadas en el Editor de traducción avanzado o en el Editor de traducción clásico. Esto puede ayudar al traductor a comprender mejor el contexto de la cadena.

Agrupar campos para una mejor organización

Para mejorar la claridad y la organización de su configuración XML, puede anteponer el nombre del grupo a las etiquetas de los campos. Considere este ejemplo de un botón de llamada a la acción (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>

Aquí, cada atributo dentro del shortcode et_pb_cta lleva el prefijo de la etiqueta Call To Action: , que también aparece en el Editor de traducción avanzado:

Traducir el botón CTA en el Editor de traducción avanzado

Traducir medios

Puede utilizar Traducción de medios de WPML para usar diferentes imágenes para diferentes idiomas en el contenido del maquetador visual. Esto se hace convirtiendo los ID de las imágenes y las URL de las imágenes. Debe «decirle» al maquetador visual que utiliza shortcodes cómo hacer esta conversión. El siguiente código es un ejemplo de lo que debe añadir al archivo wpml-config.xml en este caso.

Ejemplo de cómo añadir el shortcode de un maquetador visual al archivo wpml-config.xml para la traducción de imágenes

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

Puede utilizar los siguientes valores:

ignore-content: puede utilizarlo dentro de un elemento tag. Este valor es opcional y puede ser 0 o 1. Puede utilizar este atributo para lograr compatibilidad con versiones anteriores en los nuevos shortcodes de medios. Si el valor se establece en 1, el contenido del shortcode no se procesará.
type: puede utilizarlo dentro de un elemento tag. También puede utilizar el contenido del shortcode que contiene la URL del medio como valor opcional dentro de media-url.
type: también puede utilizarlo dentro de un elemento attribute. En este caso, puede tener uno de los siguientes valores opcionales:
- media-ids: una lista de ID de medios separados por comas.
- media-url: la URL del medio.
- link: apunta a otra página del sitio y WPML lo convertirá automáticamente a la URL de la página traducida.

Traducir medios en atributos de bloques

También puede utilizar los tipos de atributo media-url y media-ids con los bloques de Gutenberg para traducir medios como imágenes de fondo. Esto funciona de forma similar a los shortcodes, pero utiliza el elemento <gutenberg-block> con elementos <key> anidados para definir type="media-url" y type="media-ids".

El uso de este elemento permite que nuestro complemento Traducción de medios de WPML traduzca las imágenes de fondo.

Esto funciona tanto para los bloques de Gutenberg como para Divi 5. Esta versión de Divi utiliza bloques para almacenar contenido, por lo que el elemento <gutenberg-block> funciona para añadir la traducción de medios.

Aquí tiene un ejemplo de cómo añadir la traducción de medios para los atributos de los bloques de 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>

Traducir widgets del maquetador visual

WPML le permite registrar los widgets del maquetador visual dentro de su archivo de configuración de idioma. Para obtener información detallada, consulte nuestra página de documentación sobre cómo registrar los widgets del maquetador visual para su traducción.

Convertir automáticamente los ID de los shortcodes

A partir de WPML 4.5.9, puede declarar los ID de las entradas o de los términos de taxonomía ubicados en los atributos de los shortcodes. Estos ID se pueden convertir automáticamente en el frontend de su sitio.

A partir de WPML 4.8, esta misma lógica se extiende a los ID de objetos almacenados en los textos de administración, así como a los ID en los campos personalizados de las entradas y en los campos personalizados de los términos de taxonomía.

Por ejemplo, considere el siguiente shortcode:

[foo_product_list product_ids="12,34,56"]

Puede declarar que el atributo product_ids contiene ID de entradas con la siguiente configuración:

Declarar que el atributo product_ids contiene ID de entradas

<shortcode>
    <tag ignore-content="1">foo_product_list</tag>
    <attributes>
        <attribute type="post-ids" sub-type="product">product</attribute>
    </attributes>
</shortcode>

En el frontend, el shortcode se convierte automáticamente a:

[foo_product_list product_ids="13,35,57"]

Puede utilizar los siguientes atributos de configuración:

type: puede ser post-ids o taxonomy-ids
sub-type (opcional): una entidad específica del type si ya se conoce. Por ejemplo, product para el tipo de contenido personalizado Product proveniente de WooCommerce. Si no se define, se adivinará la entidad específica.

La conversión de ID es versátil e intenta adaptarse a la mayoría de los formatos posibles de ID (ID único, lista de ID, matriz serializada, matriz codificada en JSON).

Recursos adicionales

Para obtener más información sobre el archivo wpml-config.xml, visite la guía sobre archivos de configuración de idioma.

Para personalizar otros elementos mediante el archivo wpml-config.xml, visite nuestras guías adicionales: