Un selector de idiomas permite a los visitantes seleccionar el idioma en el que desean leer el contenido. WPML le permite agregar un selector de idiomas de diferentes maneras: en un menú, como un widget, o en el pie de página del sitio. También puede utilizarlo para mostrar enlaces en la parte superior o inferior de sus entradas y ofrecerlas en otros idiomas.

Los selectores de idiomas que se agregan utilizando WPML van a funcionar y mostrarse de manera correcta con cualquier tema.

Los selectores de idiomas de su sitio se agregan y personalizan en la página WPML -> Idiomas .

Opciones generales del selector de idiomas

La primera sección relacionada con los selectores de idiomas es la de los ajustes globales, como el orden de los idiomas. Es importante tener en cuenta que estas opciones se aplican a todos los selectores de idiomas que agregue.

Sección principal de las opciones del selector de idiomas
Sección principal de las opciones del selector de idiomas

Sección principal de las opciones del selector de idiomas

La sección de Opciones del selector de idiomas contiene la opción Preservar argumentos de la URL .

Es posible que los argumentos de la dirección URL sean necesarios para algún plugin y usted desee conservarlos cuando cambia de idioma. Este es el propósito de esta función. Los argumentos que desea preservar deberán agregarse aquí, en una lista, separados por coma.

Cuadro de diálogo de
Cuadro de diálogo de “Preservar argumentos de la URL”

Tengamos en cuenta el siguiente ejemplo al utilizar esta función:

  • Supongamos que agrega los siguientes argumentos: bar, foo.
  • Usted traduce la entrada “Hola mundo”.
  • En la interfaz de usuario, abrir la entrada “Hola mundo” y agregar esto al final de la dirección URL: ?bar=10&foo=100&lost=1000 (agregamos dos argumentos + el lost)
  • Cambiar de idioma: la dirección URL solo finalizará con ?bar=10&foo=100

Secciones separadas para distintos tipos de selectores de idiomas

Cada tipo de selector de idiomas tiene su propia sección separada. Las opciones seleccionadas para distintos tipos de selectores de idiomas se aplican a cada selector respectivamente. La página de Idiomas muestra una vista previa para los distintos selectores de idiomas activos en su sitio, como se puede ver en la siguiente imagen.

Secciones diferentes para cada tipo de selector de idiomas.
Secciones diferentes para cada tipo de selector de idiomas.

Cada sección tiene su propio botón “agregar” (para agregar otro selector de idiomas de ese tipo), un icono de “lápiz” para editar el selector existente y un icono de “papelera”.

Control total sobre cada selector de idiomas

Cada tipo de selector de idiomas tiene sus propios ajustes. Esto le permite tener el control total y de manera independiente sobre su aspecto y lo que incluye.

Por ejemplo, la siguiente imagen muestra un cuadro de diálogo con ajustes para el selector de idiomas del menú.

Ajustes del selector de idiomas del menú
Ajustes del selector de idiomas del menú

Vista previa donde se muestran las opciones de selector de idiomas

A medida que cambie los ajustes del selector de idiomas, la vista previa se actualiza. La vista previa es “esquemática”. No carga el CSS de la interfaz de usuario (no es una buena idea cargarlo en el admin de WordPress), por eso el selector de idiomas real va a tener un estilo diferente. Sin embargo, muestra el efecto de las distintas opciones, ajustes de colores, orden y contenido.

Estructura HTML de los selectores de idiomas del menú

A partir de la versión 3.6, WPML no presenta selectores de idiomas con su propio HTML. En su lugar, inyecta los elementos del “selector de idiomas” en la estructura del menú. De esta manera, su tema representa al selector de idiomas al igual que otros elementos del menú.

Básicamente, esto permite que el selector de idiomas se vea mejor en su sitio ya que adquiere el aspecto de las reglas CSS del tema.

Selector de idiomas del menú en la interfaz de usuario
Selector de idiomas del menú en la interfaz de usuario

Personalizar selectores de idiomas del menú

Específicamente para los selectores de idiomas del menú, la versión 3.6 de WPML agregó una nueva clase de CSS: wpml-ls-menu-item. Esto simplifica la personalización de los elementos del selector del menú (enlaces).

Por ejemplo, si su sitio utiliza el tema Twenty Sixteen y el selector del menú muestra solo las banderas de los idiomas, la representación en la interfaz de usuario no será agradable. Como puede ver en la siguiente imagen, el ancho de los elementos del menú es demasiado extenso.

Selector de idiomas de banderas solamente con el tema Twenty Sixteen
Selector de idiomas de banderas solamente con el tema Twenty Sixteen

Esto se puede corregir de manera muy fácil utilizando la clase CSS wpml-ls-menu-item .

li.wpml-ls-menu-item ul li a {
width: auto;
}

No es necesario editar el archivo CSS de su tema, simplemente debe agregar reglas personalizadas a la sección CSS adicional debajo de las Opciones del selector de idiomas.

De esta manera, se mejora el ancho de los elementos de la lista, como puede verse en la siguiente imagen.

Selector de idiomas del menú luego de aplicar CSS personalizado
Selector de idiomas del menú luego de aplicar CSS personalizado

Mostrar selectores de idiomas de WPML en ubicaciones personalizadas

A veces, es necesario agregar un selector de idiomas en una ubicación determinada. Usted puede hacerlo dentro de las plantillas PHP de su tema o directamente dentro de páginas y entradas.

Hay que tener en cuenta que los ajustes globales para los selectores de idiomas en ubicaciones personalizadas se establecen en el mismo lugar que los otros selectores de su sitio, en la sección Opciones de selectores de idiomas , en la página Idiomas.

Uso de acciones PHP

Para mostrar el selector de idiomas dentro de los archivos de plantillas PHP de su tema, puede utilizar las siguientes acciones.

  • do_action('wpml_add_language_selector'); – coloca el selector de idiomas en base a las opciones establecidas en la sección Selectores de idiomas personalizados.
  • do_action( 'wpml_footer_language_selector'); – coloca el selector de idiomas en base a las opciones establecidas en la sección Selector de idiomas del pie de página , aún si la opción Mostrar selector de idiomas en el pie de página está desactivada.

Uso de atajos de WPML

Dentro de las entradas y las páginas, puede utilizar uno de los dos atajos de WPML que se muestran a continuación. Nuevamente, la diferencia yace en cuál selector de idiomas se muestra.

  • [wpml_language_selector_widget]: coloca el selector de idiomas en base a las opciones establecidas en la sección Selectores de idiomas personalizados .
  • [wpml_language_selector_footer]: coloca el selector de idiomas en base a las opciones establecidas en la sección Selector de idiomas del pie de página , aún si la opción Mostrar selector de idiomas en el pie de página está desactivada.

Sus propios selectores de idiomas personalizados

Si fuese necesario, usted también puede crear su propio selector de idiomas. Un selector de idiomas personalizado le permitirá incluir todas las opciones que desee, de la manera que prefiera. Generalmente, la gente lo utiliza para mostrar la bandera de su propio idioma o para ordenar los idiomas de manera específica.

Un selector de idiomas personalizado
Un selector de idiomas personalizado

Puede realizar esto de dos maneras: utilizando plantillas Twig o API de PHP.

A partir de la versión 3.6, WPML presenta soporte para crear selectores de idiomas personalizados utilizando plantillas Twig. Esta es la opción más simple y utilizada y no incluye ningún tipo de programación PHP. Lo mejor sobre el uso de plantllas Twig es que puede incluirlas fácilmente en temas y aparecen como opciones para los usuarios.

La otra opción es crear selectores de idiomas personalizados utilizando API de PHP . Esta opción requiere tener conocimientos sobre PHP.