Este artículo está orientado a aquellos desarrolladores que desean traducir constructores de páginas basados en shortcode por medio de WPML. Utilizamos Visual Composer como constructor de ejemplo pero es posible aprovechar la técnica descrita aquí para otros constructores similares.

¿Cómo obtener el plugin WPML?

Primeramente, deberá contar con una cuenta en WPML.org. Si aún no tiene una y es desarrollador de temas o plugines, póngase en contacto con nuestro programa Go Global y recibirá una cuenta complementaria y asistencia.

Una vez obtenida la cuenta, instale WPML, Translation Management y String Translation.

Página de descargas de WPML

Página de descargas de WPML

* El soporte para traducir constructores de páginas está implementado desde la versión 3.6.0 de WPML. Si está utilizando una versión anterior, deberá actualizarla.

¿Cómo trabaja?

Creemos una página de ejemplo utilizando el constructor de páginas. Para este ejemplo, utilizaremos Visual Composer. Usted puede utilizar su propio constructor de páginas basado en shortcode.

Cree una página nueva de WordPress y realice su diseño utilizando el constructor. Incluya elementos que contengan textos que deban ser traducidos. La mayoría de los constructores cuentan con elementos de “texto”. Otros elementos incluyen atributos de textos como, por ejemplo: “título”.

A continuación presentamos un ejemplo de página creado por medio de Visual Composer que utiliza celdas de texto y otros tipos diferentes de celdas con atributos de texto.

Ejemplo de página realizada con nuestro constructor de páginas.

Ejemplo de página realizada con nuestro constructor de páginas.

Cuando observamos la fuente de la página (en modo HTML) podemos apreciar los shortcode que conforman el diseño de la página y los textos.

Ejemplo de código HTML de la página

Ejemplo de código HTML de la página

Nuestro objetivo es configurar WPML para encontrar dichos textos en la página fuente.

Crear el archivo de configuración de idioma para el constructor de páginas

Afortunadamente, WPML puede extraer los textos de las páginas diseñadas con un constructor de páginas (que utilice shortcode). Solo será necesario configurar WPML para identificar aquellos shortcode y atributos que contengan textos que requieran traducción. Logramos esto utilizando un archivo denominado wpml-config.xml, el cual debe estar presente en la carpeta raíz del tema o plugin.

Crear el archivo de configuración de idioma para el constructor de páginas

Crear el archivo de configuración de idioma para el constructor de páginas

Este archivo de configuración de idioma también puede ser utilizado para informar a WPML acerca de otras acciones del tema o plugin.

Como ejemplo, puede ver el archivo de configuración de idioma para Visual Composer que hemos creado:

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

Incluye una entrada para cada shortcode que WPML debe identificar. En él se puede encontrar una entrada para atributos que contengan texto.

En el ejemplo de arriba, WPML extrae los textos de shortcode tales como:

[vc_column_text]Algún texto para traducir[/vc_column_text]

[vc_text_separator title=”Algún texto para traducir”]

Usted conoce tanto los shortcode utilizados por el constructor de páginas como los atributos con texto que requieren traducción. Cree un archivo XML que contenga dichos shortcode y atributos. Cuando el archivo XML esté completo, guárdelo en la carpeta raíz del tema o plugin. Su nombre debe ser wpml-config.xml.

Luego de crear o actualizar el archivo wpml-config.xml del tema o plugin, debe forzar a WPML a cargarlo. Inhabilite momentáneamente el tema o plugin y habilítelo nuevamente. WPML carga los archivos de configuración cuando el tema y los plugines están activados o actualizados.

Traducir páginas creadas con un constructor de páginas

Una vez creado el archivo wpml-config.xml, debe probar la traducción de contenido creado con el constructor de páginas.

Reproduzca el video siguiente para interiorizarse del proceso de traducción del ejemplo de Visual Composer.

 

Primero deberá configurar WPML para utilizar el editor de traducciones (el cual ofrece soporte para los constructores de páginas). Luego de instalar los plugines necesarios (WPML, Translation Management, String Translation) y configurar WPML, vaya a WPML -> Administración de traducciones -> Configuración del contenido multilingüe. Seleccione la opción “Usar el editor de traducciones” en la sección Cómo traducir entradas y páginas y guarde las modificaciones.

Seleccione la opción de usar el editor de traducciones.

Selección de la opción para usar el editor de traducciones

Ahora está todo pronto para traducir.

  1. Cree una página WordPress y modifique el diseño por medio del constructor de páginas. Guarde la página.
  2. Cuando desee editar la página, haga “clic” en el ícono “+” debajo de la casilla de idioma (esta acción crea un traducción nueva).

Traducción de la página de ejemplo

Iniciar la traducción de la página de ejemplo

  1. Ahora podrá ver la pantalla del editor de traducciones. Deberá poder identificar campos para cada uno de los textos de la página que ha creado. Ahí se podrá ver un campo “título” y campos para cada uno de los elementos de textos del diseño generado con el constructor de páginas.
  2. Agregue los textos traducidos en los campos y marque la opción Traducción completa.
  3. Haga “clic” en el botón Guardar y cerrar.

Traducción de los textos de las páginas

Traducción de los textos de las páginas

En el editor de páginas, el ícono “+” debería cambiar a un ícono de “lápiz”, lo cual indica que la traducción está completa (y ahora puede editarla).

Puede ver la página traducida en la interfaz de usuario y cambiar el idioma de la página.

Ejemplo de la página traducida en la interfaz de usuario

Ejemplo de la página traducida en la interfaz de usuario

Editemos la página para apreciar cómo trabaja el proceso de traducción. En la barra de administración, haga “clic” en “Editar página”. Luego, diríjase al modo HTML para ver la fuente de la página.

Ejemplo de código HTML de la página traducida

Ejemplo de código HTML de la página traducida

Distribución del constructor de páginas con soporte para WPML

Si su constructor de páginas utiliza shortcode, solo deberá agregar el archivo wpml-config.xml. El archivo no hace nada si WPML no está activo. Solo indica a WPML cómo traducir aquellas páginas creadas con un constructor.

¿Necesita ayuda?

Usted puede recibir ayuda de nuestro equipo de compatibilidad de WPML (utilice el contacto que recibió del programa Go Global). También puede aprovechar nuestro foro de soporte general.

Asimismo, estamos trabajando en la implementación de compatibilidad para aquellos constructores de páginas que no utilizan shortcode. Para obtener más detalles e información sobre las versiones de desarrollo, puede ponerse en contacto con nosotros.