Personalizar el selector de idiomas de WPML: ubicación, estilo y comportamiento

Qué puede hacer el selector de idiomas de WPML

Desde el primer momento, WPML produce un selector que:

• Muestra todos los idiomas activos en su sitio, en el orden que usted elija.
• Etiqueta cada idioma con su nombre nativo (Deutsch, Français) o en el idioma actual del sitio (alemán, francés), según su elección.
• Muestra banderas de forma opcional (un sprite que se adapta a su tema).
• Maneja las traducciones que faltan de forma elegante: omite el idioma o enlaza a la página de inicio de ese idioma.
• Se puede colocar en cualquier menú de WordPress, en cualquier área de widgets, en el pie de página o en línea por encima y por debajo de las entradas.
• Viene en un bloque de Gutenberg para cualquier diseño de maquetador visual.
• Se puede ocultar en páginas específicas donde estorbaría (404, finalizar compra, cuenta).
• Almacena en caché su HTML renderizado para que las páginas carguen rápido.

La mayoría de los sitios utilizan las ubicaciones integradas y los valores predeterminados. Los desarrolladores de temas que necesiten más control pueden crear un selector personalizado en el código utilizando la API de WPML.

Dónde se encuentra la configuración

Abra WPML > Configuración > Selectores de idiomas. La página está agrupada por preguntas, no por pestañas de la interfaz de usuario. Elija la sección que coincida con lo que quiera cambiar.

Qué idiomas aparecen y en qué orden

La tarjeta Opciones del selector de idiomas tiene un área de arrastrar y soltar que enumera todos los idiomas activos. El orden aquí determina el orden en cada selector del sitio. Arrastre los idiomas hacia arriba o hacia abajo y guarde.

En la misma tarjeta, elija:

• Etiqueta nativa frente a idioma actual. Mostrar Deutsch (nativo) o alemán (idioma actual). El nombre nativo es más atractivo para los hablantes de ese idioma; el idioma actual es más claro para quienes visitan el sitio por primera vez.
• Banderas activadas o desactivadas, y el formato de la bandera.

Qué sucede cuando falta una traducción

No todas las páginas se traducen a todos los idiomas. La opción Cómo manejar los idiomas sin traducción decide qué hace el selector para un idioma que no tiene traducción de la página actual:

• Omitir idioma (predeterminado). El idioma desaparece del selector para esta página. Es la experiencia de usuario más limpia; los visitantes solo ven los idiomas que realmente pueden leer.
• Enlazar a la página de inicio del idioma para las traducciones que faltan. En su lugar, la entrada del selector muestra la página de inicio del idioma. Es útil cuando quiere que todos los idiomas estén siempre accesibles desde cualquier página, pero los visitantes pueden llegar a un contenido que no esperaban.

La elección tiene implicaciones en la experiencia de usuario en las que vale la pena pensar detenidamente.

Dónde aparece el selector

Cinco ubicaciones, cada una de las cuales se activa de forma independiente en la misma página de Configuración:

• Selector de idiomas del menú. Coloque el selector en cualquier menú de WordPress (cabecera, pie de página, barra lateral o donde su tema asigne los menús). Añada varios si quiere diferentes ubicaciones por menú. Cada selector de menú tiene su propia fila de vista previa que muestra dónde se encuentra.
• Selector de idiomas del widget. Añada el selector a cualquier área de widgets que registre su tema: barras laterales, zonas de cabecera, columnas de pie de página.
• Selector de idiomas del pie de página. Un único interruptor global que renderiza automáticamente el selector en la parte inferior de cada página.
• Enlaces en línea a traducciones de entradas. Una única casilla de verificación que muestra enlaces del tipo «esta entrada está disponible en X» por encima o por debajo de cada entrada.
• Selectores personalizados. Cuando las ubicaciones integradas no son suficientes, los desarrolladores de temas pueden llamar a la API del selector de WPML desde cualquier archivo de plantilla. La página de Configuración expone un botón Personalizar para las opciones de renderizado.

Ocultar el selector en páginas específicas

Algunas páginas no necesitan un selector: su página 404, las pantallas de la cuenta, la página de finalizar compra. Las reglas de visualización condicional de WPML le permiten ocultar el selector por página sin recurrir a CSS display:none en su tema.

Las reglas por página se configuran en la misma página de Configuración > Selectores de idiomas. Elija las páginas en las que quiera ocultar el selector; la regla se aplica a todas las ubicaciones del selector a la vez.

Conservar los parámetros de URL

Cuando un visitante hace clic en el selector, WPML reconstruye la URL para el idioma de destino. De forma predeterminada, los parámetros de la cadena de consulta (?utm_source=newsletter, parámetros de filtro, etc.) se descartan. Esto rompe las campañas de análisis y los listados filtrados.

El campo Conservar argumentos de URL enumera las claves de consulta que quiere conservar durante el cambio. Todo lo que ponga aquí (uno por línea) viaja con el visitante a la URL traducida.

CSS personalizado para el selector

Una única área de texto en CSS adicional aplica estilo a todos los selectores del sitio a la vez. Es útil para adaptar el selector a su tema sin tocar los archivos del tema.

Almacenar en caché la plantilla del selector

La tarjeta Rendimiento tiene una única casilla de verificación: Almacenar en caché las plantillas del selector de idiomas. Si está activada, WPML almacena en caché el HTML renderizado de cada ubicación del selector, lo que acelera la carga de las páginas en un sitio con mucho tráfico.

A tener en cuenta: cuando cambie una opción del selector y no vea su cambio reflejado en el front-end, la caché es el primer lugar que debe revisar. Desactívela, vuelva a cargar y aparecerán sus cambios. Luego, vuelva a activar el almacenamiento en caché para la producción.

Selectores personalizados en el código del tema

Para los sitios donde las ubicaciones integradas no encajan (un selector en una posición específica dentro de la cabecera de la página, un menú desplegable personalizado renderizado por su tema, cualquier cosa fuera de un menú de WordPress o un área de widgets), WPML expone una API que permite a los desarrolladores de temas crear un selector personalizado.

La tarjeta Selectores de idiomas personalizados tiene un interruptor Activar y un botón Personalizar. Una vez activado, el código de la plantilla del tema puede renderizar el selector en cualquier lugar utilizando la API de PHP documentada de WPML.