Aprenda a registrar el contenido personalizado del maquetador visual para su traducción mediante el archivo wpml-config.xml. Registre cadenas, medios, widgets de maquetadores visuales, ID de shortcodes y más.
Esta guía es para desarrolladores que crean temas y plugins o añaden código personalizado de maquetadores visuales a su sitio.
Si usa 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 usando el plugin Herramientas multilingües.
Traducir cadenas
Consideremos un ejemplo en el que tiene un separador de texto añadido a una página usando 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, debe añadir unas 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 un shortcode de 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.
- Use la etiqueta shortcode para envolver todas las etiquetas que pertenecen a un único shortcode.
- Use 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 ejemplo a continuación 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 usando la opción de enlace: type="link".
Puede usar el atributo encoding con este. Este maneja la codificación especial que usan 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: normalmente 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. Use 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 un atributo de enlace 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 está pensando en usar shortcodes con urlencoded, asegúrese de leer la página sobre traducir shortcodes con urlencoded.
Ejemplo de cómo añadir etiquetas a 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 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 del shortcode et_pb_cta lleva una etiqueta Call To Action: . WPML no pasa esas etiquetas al Editor de traducción avanzado: el traductor ve cada atributo como un campo propio, agrupado bajo el shortcode, y distingue los campos por el texto que contiene cada uno. El atributo label sigue siendo parte del formato de configuración y todavía vale la pena configurarlo:
Traducir medios
Puede usar 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 imagen y las URL de imagen. Debe «decirle» al maquetador visual que usa 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 un shortcode de 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 usar los siguientes valores:
- ignore-content: puede usarlo dentro de un elemento tag. Este valor es opcional y puede ser 0 o 1. Puede usar este atributo para lograr compatibilidad con versiones anteriores para los nuevos shortcodes de medios. Si el valor se establece en 1, el contenido del shortcode no se procesará.
- type: puede usarlo dentro de un elemento tag. También puede usar el contenido del shortcode que contiene la URL del medio como valor opcional dentro de media-url.
- type: también puede usarlo dentro de un elemento attribute. En este caso, puede tener uno de los siguientes valores opcionales:
- media-ids: una lista separada por comas de ID de medios.
- media-url: 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 los atributos de bloque
También puede usar los tipos de atributos media-url y media-ids con los bloques de Gutenberg para traducir medios como imágenes de fondo. Esto funciona de manera similar a los shortcodes, pero usa 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 usa bloques para almacenar contenido, por lo que el elemento <gutenberg-block> funciona para añadir la traducción de medios.
Aquí hay 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 de maquetadores visuales
WPML le permite registrar widgets de maquetadores visuales 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 widgets de maquetadores visuales para su traducción.
Convertir automáticamente los ID de shortcodes
A partir de WPML 4.5.9, puede declarar los ID de las entradas o los términos de taxonomía ubicados en los atributos del shortcode. 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 los campos de términos de taxonomías personalizadas.
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_ids</attribute>
</attributes>
</shortcode>En el frontend, el shortcode se convierte automáticamente a:
[foo_product_list product_ids="13,35,57"]
Puede usar los siguientes atributos de configuración:
- type: ya sea 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 que proviene 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).
Nombres de atributos con un comodín
Algunos shortcodes almacenan ID en muchos atributos con nombres similares, por ejemplo include_category, include_portfolio_category e include_product_cat. Una línea <attribute> puede cubrirlos todos. Ponga * en el nombre del atributo:
Declarar todos los atributos include_ y exclude_ como contenedores de ID de taxonomía
<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>- * coincide con una o más letras, dígitos, _ o -.
- * funciona solo con type="post-ids" y type="taxonomy-ids".
- WPML coincide exactamente con el resto del nombre. WPML no acepta expresiones regulares en los nombres de los atributos.
- exclude (opcional): una lista separada por comas de nombres de atributos completos. WPML no convierte los ID en estos atributos. Úselo para atributos que coinciden con el nombre pero que no contienen ID, como include_product_skus.
Recursos adicionales
Para obtener más información sobre el archivo wpml-config.xml, visite la guía de Archivos de configuración de idioma.
Para personalizar otros elementos usando el archivo wpml-config.xml, visite nuestras guías adicionales:
- Registrar widgets personalizados de maquetadores visuales para su traducción
- Traducir shortcodes personalizados con WPML
- Establecer opciones de traducción para campos personalizados mediante el archivo de configuración de WPML
- Registrar términos, tipos y taxonomías personalizados como traducibles
- Hacer traducibles los bloques personalizados de Gutenberg
- Traducir los textos que el tema y los plugins guardan en wp_options
- Personalizar el selector de idiomas de WPML mediante el archivo de configuración de WPML
