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

Ciertos temas que incluyen generadores de menús personalizados pueden no mostrar correctamente los selectores de idiomas de WPML. 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 en selectores de idiomas desplegables y de menú

Como en todo proceso de depuración, existen 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, el cual tiene un CSS muy sencillo y funcionará 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 WPMLConfiguraciónSelectores de 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}: por ejemplo, “wpml-ls-slot-sidebar-1”.
• wpml-ls-item.
• wpml-ls-item-{language_code}: por ejemplo, “wpml-ls-item-en”.
• wpml-ls-current-language: solo para el elemento del idioma actual.
• wpml-ls-menu-item: solo para los selectores de idiomas en los 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}: por ejemplo, “wpml-ls-statics-footer”.
• wpml-ls-{template-slug}: por ejemplo, “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 del {group} y el {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 de contenedor.

Personalizar un selector de idiomas con CSS

Podemos añadir fácilmente algunos estilos CSS personalizados en la página WPMLConfiguraciónSelectores de 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 del pie de página

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

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

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

También puede combinar selectores para apuntar mejor a los elementos.

Ejemplo 4: Añadir texto en negrita para el idioma actual del selector de idiomas del 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;
}