Mantener la compatibilidad de WPBakery Page Builder con WPML

La compatibilidad de WPBakery Page Builder con WPML se garantiza mediante el archivo de configuración de idioma. Aprenda a usar este archivo para mantener la compatibilidad.

Esta página está dirigida al equipo de desarrollo de WPBakery, a los desarrolladores que ofrecen una versión personalizada del maquetador visual, a los autores que desarrollan complementos para WPBakery y a los desarrolladores web que utilizan WPBakery Page Builder.

Si usted es un cliente que busca traducir un sitio creado con WPBakery, consulte nuestra documentación detallada para obtener más información sobre cómo crear sitios multilingües con WPBakery Page Builder y WPML (se abre en una pestaña nueva).

Cómo funciona la integración de WPBakery Page Builder con WPML

Para entender cómo funciona WPBakery Page Builder con WPML, comenzaremos creando una página sencilla usando WPBakery Page Builder. Incluiremos algunos módulos, como un Bloque de texto, un Cuadro de mensaje y un Cuadro con efecto hover.

Para traducir la página que hemos creado, haga clic en el icono del signo más que se encuentra en la caja meta Idioma en la barra lateral derecha.

Esto le llevará a la pantalla del Editor de traducción avanzado, donde podrá traducir su página. Rellene las traducciones para cada oración y confírmelas haciendo clic en la marca de verificación verde. Una vez que esté satisfecho con todas sus traducciones, haga clic en Guardar y completar.

Actualizar el archivo de configuración de idioma

Es posible que deba actualizar los shortcodes del maquetador visual en el archivo de configuración de idioma por diferentes motivos:

1. Añadir un nuevo shortcode al maquetador visual
2. Añadir un nuevo atributo a un shortcode existente
3. Eliminar un shortcode obsoleto

Puede descargar el archivo de configuración de idioma desde nuestro repositorio (se abre en una pestaña nueva). Añada los shortcodes o atributos a los shortcodes existentes dentro del archivo de configuración de idioma.

Para los autores que incluyen una versión personalizada de WPBakery Page Builder en su tema, tengan en cuenta que tendrán que actualizar el archivo de configuración de idioma de la versión personalizada del plugin.

Estructura de los shortcodes del maquetador visual en el archivo de configuración de idioma

Para extraer las cadenas de las páginas creadas con WPBakery Page Builder y cargarlas en la pantalla del Editor de traducción, necesitamos configurar WPML para que identifique los shortcodes y atributos que contienen las cadenas que requieren traducción. Esto se hace añadiendo un archivo, llamado wpml-config.xml, que normalmente se coloca en la carpeta raíz de su tema. Para WPBakery Page Builder, alojamos el archivo de configuración de idioma (se abre en una pestaña nueva) en nuestros servidores. WPBakery Page Builder no incluye su propio archivo wpml-config.xml. WPML descarga este archivo de nuestros servidores, por lo que su sitio siempre utiliza la última versión.

El archivo wpml-config.xml también se utiliza para configurar los siguientes elementos:

1. Campos personalizados
2. Taxonomías personalizadas
3. Textos de administración / wp_options
4. Configuración del selector de idiomas
5. Shortcodes del maquetador visual

Consulte nuestra documentación detallada para obtener más información sobre la estructura y sintaxis del archivo de configuración de idioma.

Como ejemplo, veamos cómo añadimos el shortcode Tabs (pestañas) al archivo wpml-config.xml.

<shortcode>
         <tag>vc_tta_tabs</tag>
         <attributes>
            <attribute encoding="allow_html_tags">title</attribute>
         </attributes>
</shortcode>

La estructura del ejemplo anterior se puede desglosar de la siguiente manera:

• Todos los shortcodes están envueltos con la etiqueta principal shortcodes (en plural).
• La etiqueta shortcode envuelve todas las etiquetas que pertenecen a un único shortcode.
• La etiqueta tag define el nombre del shortcode, que en este caso es vc_tta_tabs.
• Los shortcodes pueden tener uno o más atributos; por lo tanto, los envolvemos en la etiqueta attributes (en plural) y usamos la etiqueta attribute (en singular) para definir el título de cada atributo. En este caso, tenemos el atributo title.

Para los shortcodes que incluyen atributos de enlace, puede hacer que los enlaces internos apunten automáticamente a la versión traducida de esa entrada utilizando la opción type para el atributo. Aquí tiene un ejemplo:

<shortcode>
         <tag>vc_button</tag>
         <attributes>
            <attribute encoding="allow_html_tags">title</attribute>
            <attribute encoding="vc_link" type="link">href</attribute>
         </attributes>
</shortcode>

Probar el archivo de configuración de idioma

Para probar el archivo de configuración de idioma actualizado, siga estos pasos:

1. Configure una instalación que tenga activados tanto WPBakery Page Builder como WPML. Descargue y active los complementos Traducción de cadenas y Traducción de medios.
2. Tendrá que anular el archivo de configuración de idioma remoto con el actualizado. Para ello, vaya a la página WPML → Configuración y haga clic en la pestaña Configuración XML personalizada. Copie el contenido de su archivo de configuración de idioma actualizado en el editor y luego haga clic en Guardar.

3. Cree una nueva página y añádale los nuevos módulos. En caso de que haya actualizado algunos atributos para módulos existentes, añádalos también a la página. En este ejemplo, supondremos que el módulo Call To Action (Llamada a la acción) se ha añadido recientemente a WPBakery Page Builder. Añádalo a la página y haga clic en Publicar.

4. Haga clic en el icono del signo más para traducir la página. Esto le llevará a la pantalla del Editor de traducción avanzado.
5. Asegúrese de que los elementos textuales del módulo se muestran en el Editor de traducción avanzado.
6. Rellene sus traducciones y confírmelas con la marca de verificación verde. Una vez que haya terminado, haga clic en el botón Guardar y completar.

7. Compruebe la página traducida en el front-end.

La página traducida muestra todas las cadenas traducidas, lo que implica que el archivo de configuración de idioma actualizado funciona correctamente.

Tenga en cuenta que los estilos CSS de los elementos de la página del idioma original se copian al idioma de traducción. Esto garantiza que todo se vea correctamente entre idiomas. Si desea deshabilitar esta característica, consulte este artículo para obtener instrucciones.

Si encuentra algún problema, póngase en contacto con nuestro equipo de desarrollo de compatibilidad. Estarán encantados de revisar los problemas relacionados con el archivo de configuración de idioma.

Una vez terminadas las pruebas, envíe una solicitud de fusión (merge request) a nuestro repositorio (se abre en una pestaña nueva). Nuestros desarrolladores de compatibilidad recibirán su solicitud y la revisarán.

Tenga en cuenta que el archivo de configuración de idioma alojado en nuestro repositorio es para la versión predeterminada de WPBakery Page Builder. En caso de que esté actualizando el archivo de configuración de idioma de una versión personalizada de WPBakery Page Builder, aplique los cambios al archivo de configuración dentro de la carpeta raíz de su plugin.