Advertisement
  1. Web Design
  2. WordPress Themes

Cómo hacer que tu tema o plugin de WordPress esté preparado para su traducción a multiples idiomas

by
Read Time:9 minsLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

La compatibilidad con varios idiomas es actualmente un requisito básico para cualquier tema premium de WordPress. Hay muchos plugins que ofrecen herramientas multilingües, pero posiblemente las más populares sean WPML y Polylang. ¡Vamos a investigarlos!

Conoce a los jugadores

WPML es un plugin premium únicamente que facilita la creación y ejecución de sitios en varios idiomas. Es lo suficientemente potente para sitios corporativos, pero lo suficientemente simple a su vez para blogs, y es muy popular entre los usuarios de WordPress. Su rango de precios va desde $29 hasta los $159 en el momento en el que escribimos este artículo. WPML ofrece los llamados programas "GoGlobal" para que los autores de temas preparen sus productos para una futura traducción mediante WPML. Es fácil argumentar que WPML es el líder del mercado en la esfera de plugins multiidiomas.

"Go-Global de WPML ayuda a convertir los temas de WordPress en temas completamente preparados para su traducción a varios idiomas. Cuando hayamos terminado, tus clientes podrán usar el tema en sitios disponibles en varios idiomas, de forma fácil y sin problemas." – WPML

A pesar de su completa lista de características, es posible que WPML no sea una opción para todos, en parte debido a la falta de una versión gratuita. El plugin Polylang, que utiliza el modelo freemium, llena ese vacío. Ofrece una versión gratuita y una versión premium. Con más de 400k instalaciones activas, Polylang es el segundo plugin multidioma en cuanto a popularidad.

WPML and PolylangWPML and PolylangWPML and Polylang
WPML y Polylang

Próximamente

En este tutorial voy a mostrar cómo puedes hacer que tu tema de WordPress esté preparado para multidiomas. Afortunadamente, este es un proceso único que permitirá que tu tema sea totalmente compatible con ambos plugins.

WPML es el más antiguo de los dos, viendo por primera vez la luz en 2007. Polylang, que también ha estado en desarrollo durante mucho tiempo, soporta deliberadamente la mayoría de las API de WPML para evitar que los autores de temas y plugins tengan que trabajar el doble. Este hecho significa que al crear un tema listo para WPML, en general, también estarás preparando tu tema para Polylang.

Cadenas traducibles

Para que un tema o plugin sea traducible, cualquier cadena codificada debe estar envuelta en una de las funciones de traducción de WordPress. Por ejemplo, en lugar de Similar products: deberías utilizar <? php _e(‘Similar products:’, ‘textdomain’) ?> Tenemos a nuestra disposición varias de estas funciones, cada una de las cual se comporta de forma ligeramente diferente. Las hemos cubierto en otros anteriores tutoriales de Tuts+, no dudes en echar un vistazo a esta completa guía si necesita ponerte al día:

Sin embargo, en este tutorial, nos centraremos en los aspectos dinámicos de tu tema o plugin, que WPML y Polylang tendrán que identificar como aquellos que requieren traducción.

Configuración

En primer lugar, asegúrate de que tu tema no tenga problemas usando Envato Theme Check plugin, y de que tenga un único dominio de texto o "text-domain".

A continuación, crea un archivo XML en la carpeta principal del tema y asígnale el nombre wpml-config.xml. Aquí, guiaremos a WPML a través de todos nuestros campos personalizados, tipos de entradas personalizadas, taxonomías, opciones, shortcodes e instruiremos a WPML sobre cómo gestionar todos sus datos.

Nota: los archivos de configuración para temas también funcionan para plugins. Así que si estás trabajando en un plugin y todos tus campos personalizados, opciones, etc. están basados en plugins, en lugar de la carpeta anterior, añade el archivo de configuración a la carpeta principal del plugin.

Configuración de campos personalizados

En el archivo wpml-config.xml, crea etiquetas de apertura y cierre <wpml-config></wpml-config>. Todos los datos serán colocados dentro de estas etiquetas. Comenzaremos con campos personalizados. Crea una etiqueta <custom-fields>. Y coloca dentro de esta lista de etiquetas todos tus campos personalizados, de la siguiente forma:

Habrás notado la presencia de action="action-name" en nuestro campo personalizado. Existen cuatro tipos de acciones que le indican a WPML cómo gestionar nuestros campos:

  1. translate: permite al usuario traducir el valor del campo personalizado. Estos campos se muestran en la pantalla Editor de traducción y pueden enviarse a cualquiera de los servicios de traducción profesionales que se ofrecen.
  2. copy: esta acción copia el valor de campo personalizado del idioma predeterminado en los idiomas secundarios. Esto significa que la actualización del valor del campo personalizado del idioma predeterminado siempre se copiará en el idioma secundario. Los campos personalizados configurados para copiar no se muestran en la pantalla Editor de traducciones.
  3. copy-once: el valor del campo personalizado se copia en el idioma secundario en el proceso de traducción inicial. Los campos personalizados que utilizan la acción copy-once no aparecerán en la pantalla Editor de traducciones. Sin embargo, el usuario puede cambiar el valor del campo personalizado del idioma secundario para que sea diferente del  del idioma predeterminado mediante la pantalla de edición de las entradas. Es preferible establecer los campos personalizados que contienen ajustes como color de fondo, color de fuente, tamaño de fuente y otros, en copy-once. Esto le permitirá al usuario establecer una configuración distinta para el contenido traducido que las establecidas para las entradas y páginas del idioma predeterminado. Por ejemplo, el usuario desea establecer el color de fondo de un elemento para que sea amarillo en el idioma predeterminado y azul en el idioma secundario. Ten en cuenta que la edición de un conjunto de campos en copy-once no marcará el campo como que necesita actualización. Esto se debe a que el campo no se copiará en una traducción existente, solo se copia en el momento de crear la traducción.
  4. ignore: esta acción elimina el campo personalizado de la copia para el idioma secundario. Es útil para campos personalizados ocultos o campos personalizados con datos que no sean relativos a los usuarios (solo para uso de desarrolladores).

Los plugins WPML y Polyland son compatibles con Advanced Custom Fields (ACF) y CMB2 (Custom Metaboxes and Fields 2).

Configuración de tipos de entradas personalizadas

Una vez hayas acabado con los campos personalizados, pasemos a los tipos de entradas personalizadas. Crea una etiqueta <custom-types> y enumera todos tus tipos de entradas personalizadas con la estructura:

Nota: 1 significa traducir, 0 significa ignorar.

También puedes añadir un atributo display-as-translated a la etiqueta para mostrar los tipos de entradas en el idioma predeterminado en el caso de que no exista traducción, de esta forma:

Configuración de taxonomías

Pasemos a las taxonomías. De la misma manera que antes, crea una etiqueta <taxonomies> y enumera todas las taxonomías personalizadas con la siguiente estructura:

Una vez más, puedes añadir el atributo display-as-translated a la etiqueta para mostrar las taxonomías en el idioma predeterminado en el caso de que no exista traducción.

Configuración de opciones

A continuación, echemos un vistazo a las opciones (wp_options). Crea una etiqueta <admin-texts> y enumera todas las opciones personalizadas que deban ser traducidas. Aquí puedes traducir tanto opciones individuales como matrices serializadas de opciones.

Gutenberg

Desde el lanzamiento de WordPress 5.0 también debes incluir detalles de configuración para los bloques personalizados de Gutenberg que necesiten traducción. Para ello, crea una etiqueta <gutenberg-blocks> y enumera todos los bloques personalizados relevantes con la siguiente estructura:

Espera, ¿qué es XPath?! XPath se utiliza para localizar el texto que debe ser traducido. En primer lugar, tendrás que definir el tipo de bloque Gutenberg (puedes encontrar aquí todos los tipos de bloque). Por ejemplo, imagina que el tipo de bloque es imagen, para el cual el marcado tendría que ser el siguiente:

Tendremos que traducir el texto de figcaption (pie de imagen) y el texto alt de la etiqueta img. Así que nuestro bloque será así, con las etiquetas XPath localizando eficazmente los elementos para la traducción:

Shortcodes

A continuación: ¡los shortcodes! Crea una etiqueta <shortcodes> y enumera todos qué shortcodes necesitan traducción, de la siguiente forma:

Los shortcodes pueden tener muchos atributos, así que asegúrate de enumerar todos los atributos que deban traducirse.

Configuración del conmutador de idioma

¡Nuestro archivo de configuración está casi listo! Sin embargo, queda una última cosa a considerar: WPML también ofrece personalización para el conmutador de idioma que incorpora, algo requerido por el programa GoGlobal, por lo que tendremos que añadir estilos que coincidan con nuestro tema en la medida de lo posible. Esto se hace dentro de etiquetas como esta:

Existen un montón de ajustes que puedes añadir entre estas etiquetas, por lo que no voy a exponer todos ellos. Puedes encontrarlos en la documentación de WPML.

En la práctica, crear tu propio conmutador personalizado de idioma podría ser la opción más sabia, lo que te proporcionará mucho más control sobre el estilo y la salida. Lo cubriremos en un segundo.

Aplicar estilo al conmutador de idioma predeterminado

Como acabamos de discutir, WPML viene con un conmutador de idiomas. Puede utilizarse en varias ubicaciones; como parte de un menú, en áreas de widgets, el pie de página, etc. Puede ser en forma de lista desplegable o lista de elementos, mediante banderas o simplemente texto. Si planeas preparar tu tema para que sea compatible con WPML, debes probar cada versión del conmutador de idioma predeterminado en todas las ubicaciones. Y si tienes dificultades para realizar los cambios que necesitas, WPML te proporciona ayuda: solucionar problemas de estilo para los conmutadores de idioma.

Polylang viene con un conmutador de idioma predefinido que no tiene configuraciones basadas en el usuario y tiene dos ubicaciones posibles: áreas de widgets y en un menú. Una vez más, para asegurarte de que el tema admita correctamente Polylang, debes incluir estilos para el conmutador de idioma predeterminado.

Conmutador de idioma personalizado

En la práctica, los conmutadores de idioma predeterminados de WPML y Polylang tienen limitaciones en términos de diseño. Por lo cual, personalmente prefiero es usar un conmutador de idioma personalizado que funcione tanto a modo de shortcode, como en forma de widget, y que disponga de un conjunto universal de estilos tanto para WPML como para Polylang.

Puedes descargar el conmutador desde Github.

Crea un shortcode que se puede convertir en un widget con la función do_shortcode(). Incluye el conmutador de idioma personalizado en tu plugin vinculado al tema (los shortcodes y los widgets son territorio de plugin).

Aquí tienes una rápida explicación de lo que el código está haciendo:

  • Primero comprobaremos si el plugin WPML está activo con la función class_exists(), y si es así usaremos la función principal de WPML icl_get_languages() para obtener todos los idiomas en uso.
  • A continuación, si WPML no está activo, comprobamos el plugin Polylang usando function_exists(). Si Polylang está activo, obtenemos todos los idiomas que se utilizan con la función pll_the_languages().
  • Y si ninguno de los dos plugins está activo, alertamos al usuario.
  • Por último, si también necesitas la versión del widget, puedes crear un widget personalizado con do_shortcode('[custom_language_switcher extra_class""]');. Lo mismo se aplica si deseas añadir el conmutador de idioma a los archivos principales del tema.

Conclusión

Una vez que hayas terminado de añadir todo lo que necesitas al archivo wpml-config.xml y hayas cambiado el idioma predeterminado, el tema ya está listo para ser enviado al programa GoGlobal.

The GoGlobal ProgramThe GoGlobal ProgramThe GoGlobal Program

Al enviar el tema, WPML creará un sitio de demostración, para comprobación, al que deberás añadir contenido. Asegúrate de que en este momento tu tema tenga una demostración, de manera que puedas importar datos desde ella para ahorrarte tener que hacer el trabajo dos veces. También obtendrás acceso gratuito a una cuenta de desarrollador donde podrás descargar el último plugin WPML para pruebas.

Polylang toma automáticamente las configuraciones de wpml-config.xml, por lo que no es necesario añadir más detalles para cubrir los dos.

Y como hemos explicado, aunque no es obligatorio, el uso de un conmutador de idioma personalizado te dará más control sobre la estructura y la nomenclatura de clases.

¡Espero que hayas disfrutado de este tutorial y que te ayude durante el desarrollo de todos tus temas de WordPress de manera que sean multiliidioma!

Más tutoriales sobre WordPress multiidioma en Tuts+

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.