Mantener la compatibilidad de Divi Builder con WPML

Aprenda a mantener la compatibilidad de los módulos de Divi con WPML mediante el archivo de configuración de idioma wpml-config.xml.

Esta documentación está dirigida al equipo de desarrollo de Divi y a los desarrolladores web que utilizan Divi. Explica el proceso para mantener la compatibilidad de Divi Builder con WPML, lo cual se hace actualizando el archivo de configuración de idioma.

Esta página se refiere a Divi 5, que almacena el contenido como bloques compatibles con Gutenberg (Divi 4 solía usar shortcodes).

Cómo funciona la integración de Divi Builder con WPML

Para entender cómo funciona Divi Builder con WPML, comencemos creando una página sencilla con Divi Builder. En nuestro ejemplo a continuación hemos añadido algunos módulos, como Texto, un Contador numérico, un Icono, etc.

Para traducir, vaya a WPML → Escritorio de traducción y busque la página en la sección Páginas. Selecciónela y haga clic en Traducir su contenido para seleccionar el método de traducción. Si tiene créditos de traducción automática, puede traducir esta página automáticamente en minutos.

Uso del archivo de configuración de idioma

En el archivo wpml-config.xml, puede configurar los siguientes elementos:

• Bloques del maquetador visual
• Campos personalizados
• Taxonomías personalizadas
• Textos de administración / wp_options
• Configuración del selector de idiomas

Para obtener más información sobre la estructura y la sintaxis, consulte nuestra guía del archivo de configuración de idioma.

Obtener el archivo de configuración para Divi

La configuración del archivo wpml-config.xml extrae las cadenas de las páginas creadas con Divi Builder y las carga en el Editor de traducción avanzado. Utilice este archivo para añadir nuevos tipos de bloques y atributos, así como para eliminar los tipos de bloques obsoletos.

Puede descargar el archivo de configuración de idioma desde nuestro repositorio y colocarlo en la carpeta raíz de su tema una vez configurado.

Alojamos el archivo de configuración de idioma para Divi en nuestros servidores, por lo que anula el archivo de configuración local situado en la carpeta raíz de Divi. Esto garantiza que el archivo de configuración esté siempre actualizado.

Configurar bloques en el archivo de configuración de idioma

Divi 5 utiliza la sintaxis de bloques, por lo que el registro de módulos de Divi para su traducción es similar al proceso para traducir bloques de Gutenberg:

• Todas las definiciones de bloques se envuelven dentro de un elemento principal <gutenberg-blocks>.
• Cada bloque individual se declara con un elemento <gutenberg-block>, donde el atributo type corresponde al nombre registrado del bloque.
• Los campos traducibles se declaran como elementos secundarios <key>.

Tomemos el ejemplo de un módulo de llamada a la acción de Divi:

<!-- wp:divi/cta {"module":{"title":"CTA","button_text":"Contact Us","button_url":"https://example.com/contact/"}} /-->

Así es como se configura en wpml-config.xml:

<gutenberg-blocks>
    <gutenberg-block type="divi/cta" translate="1">
       <key name="module">
         <key name="title" />
         <key name="button_text" />
         <key name="button_url" type="link" />
       </key>
    </gutenberg-block>
</gutenberg-blocks>

La estructura se desglosa de la siguiente manera:

• El elemento <gutenberg-blocks> envuelve todas las definiciones de bloques.
• Un elemento <gutenberg-block> define un único tipo de bloque, identificado por el atributo type. El translate="1" le indica a WPML que lo procese.
• Cada elemento <key> identifica un campo traducible: title y button_text para los campos de texto sin formato, y button_url para un enlace.
• El atributo type="link" le indica a WPML que reemplace automáticamente la URL con la versión traducida de la entrada o página enlazada.

Probar el archivo de configuración de idioma

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

1. Configure un sitio con Divi y WPML activados. Asegúrese de activar también los complementos Traducción de cadenas y Traducción de medios.

2. Para anular el archivo de configuración de idioma remoto con la versión actualizada, vaya a 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. Si actualizó algunos atributos de módulos existentes, añádalos también a la página. En este ejemplo, asumiremos que el módulo Botón se acaba de añadir a Divi Builder. Añádalo a la página y luego haga clic en Publicar.

4. Para traducir la página con el botón, puede utilizar el Escritorio de traducción. Una alternativa es usar el Editor de traducción avanzado (ATE), que puede ser útil al realizar pruebas, ya que le permite ver la etiqueta del módulo para cada elemento de Divi en la página. Para abrir el ATE, vaya a Editar la página y haga clic en el icono más en la caja Idiomas de la barra lateral derecha.

5. Compruebe los elementos y añada sus traducciones, o permita que el ATE traduzca automáticamente.

Ahora, puede echar un vistazo a la página traducida en el front-end. La página traducida debería mostrar todas las cadenas traducidas, lo que implica que el archivo de configuración de idioma actualizado funciona correctamente.

En caso de que encuentre 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. Nuestros desarrolladores de compatibilidad recibirán su solicitud y la revisarán.