Cómo solucionar problemas de estilo y CSS de los selectores de idiomas

Es posible que ciertos temas que cuentan con generadores de menús personalizados no muestren los selectores de idiomas de WPML correctamente. Aquí proporcionamos los pasos para la solución de problemas relacionados con el estilo de los selectores de idiomas.

Para su comodidad, también presentamos una descripción detallada del CSS utilizado en el selector de idiomas del menú de WPML, en caso de que busque personalizaciones avanzadas.

Cómo solucionar problemas de visualización con los selectores de idiomas desplegables y de menú

Como en todo proceso de depuración, hay algunos pasos iniciales para detectar si algo interfiere con la correcta visualización de su selector de idiomas.

1. Añada temporalmente un selector de idiomas del pie de página que tenga un CSS muy sencillo y funcione en casi cualquier sitio.
2. Elimine temporalmente cualquier CSS personalizado y utilice el selector de idiomas de WPML con su configuración predeterminada
3. Utilice el depurador CSS de su navegador y compruebe si hay conflictos CSS evidentes. Si encuentra la causa, puede anular el estilo CSS en la página WPML → Idiomas, en la sección Opciones del selector de idiomas. Allí, haga clic en el enlace CSS adicional.

Si hay problemas entre el tema y WPML, el equipo de soporte de WPML trabajará con nuestro equipo de compatibilidad y el autor del tema para ofrecerle una solución adecuada.

Clases CSS por idioma

La siguiente es la lista de las clases CSS para cada idioma:

• wpml-ls-slot-{slug}: p. ej. “wpml-ls-slot-sidebar-1”.
• wpml-ls-item.
• wpml-ls-item-{language_code}: p. ej. “wpml-ls-item-en”.
• wpml-ls-current-language: solo para el elemento del idioma actual.
• wpml-ls-menu-item: solo para selectores de idiomas en menús.
• wpml-ls-first-item: para apuntar al primer elemento de idioma de la lista.
• wpml-ls-last-item: para apuntar al último elemento de idioma de la lista)

Si es necesario alterar las clases CSS para cada idioma, WPML ofrece el hook de filtro wpml_ls_model_language_css_classes.

Por ejemplo, supongamos que necesita añadir una clase my-custom-item-class para cada idioma. En ese caso, puede añadir un código como el siguiente al archivo functions.php de su tema:

add_filter( 'wpml_ls_model_language_css_classes', 'my_custom_ls_item_css_classes' );
function my_custom_ls_item_css_classes( $classes ) {
    $classes[] = 'my-custom-item-class';
    return $classes;
}

Clases CSS del contenedor del selector de idiomas

La siguiente es la lista de las clases CSS para el contenedor del selector de idiomas:

• wpml-ls
• wpml-ls-{group}-{slug}: p. ej. “wpml-ls-statics-footer”.
• wpml-ls-{template-slug}: p. ej. “wpml-ls-legacy-dropdown-click”.
• wpml-ls-rtl: para idiomas RTL.
• wpml-ls-touch-device: esta clase se añade para dispositivos móviles y tabletas.

En la siguiente tabla mostramos cómo se construyen las clases CSS dependiendo de {group} y {slug}:

Como antes, si necesita añadir una clase CSS personalizada para el contenedor de su selector de idiomas, puede utilizar nuestro hook de filtro wpml_ls_model_css_classes . Un código como el siguiente en el archivo functions.php de su tema añadirá una clase CSS my-custom-wrapper-class:

add_filter( 'wpml_ls_model_css_classes', 'my_custom_ls_wrapper_css_classes' );
function my_custom_ls_wrapper_css_classes( $classes ) {
    $classes[] = 'my-custom-wrapper-class';
    return $classes;
}

Nota: WPML solo inyecta algunos elementos para la opción del selector de idiomas en los menús. Como consecuencia, no tiene ninguna clase contenedora.

Personalizar un selector de idiomas con CSS

Podemos añadir fácilmente algunos estilos CSS personalizados en la página WPML → Idiomas, en la sección Opciones del selector de idiomas. Allí, haga clic en el enlace CSS adicional.

Ejemplo 1: Mostrar el idioma actual en negrita

.wpml-ls-current-language {
font-weight: bold;
}

Ejemplo 2: Cambiar el tamaño de fuente solo para el selector de idiomas en el pie de página

.wpml-ls-statics-footer {
    font-size: 18px;
}

Ejemplo 3: Dar cierto margen a la derecha después del último elemento de idioma

.wpml-ls-last-item {
    margin-right: 10px;
}

También puede combinar selectores para lograr una selección más precisa.

Ejemplo 4: Añadir texto en negrita para el idioma actual del selector de idiomas en el pie de página

.wpml-ls-statics-footer .wpml-ls-current-language {
   font-weight: bold;
}

Ejemplo 5: Fijar el ancho de un selector de idiomas en un menú

nav ul[class*="menu"] li.wpml-ls-menu-item ul.sub-menu,
nav ul[class*="menu"] li.wpml-ls-menu-item ul.sub-menu li a {
  width: auto;
  min-width: 30px;
}