Comment corriger les problèmes de style et de CSS pour les sélecteurs de langue

Certains thèmes qui intègrent des générateurs de menus personnalisés peuvent ne pas afficher correctement les sélecteurs de langue de WPML. Nous fournissons ici des étapes de dépannage pour les problèmes liés au style des sélecteurs de langue.

Pour votre commodité, nous présentons également une description détaillée du CSS utilisé dans le sélecteur de langue du menu de WPML, au cas où vous rechercheriez des personnalisations avancées.

Comment dépanner les problèmes d’affichage avec les sélecteurs de langue déroulants et de menu

Comme dans tout processus de débogage, il existe quelques étapes initiales pour détecter si quelque chose interfère avec le rendu correct de votre sélecteur de langue.

1. Ajoutez temporairement un sélecteur de langue de pied de page qui possède un CSS très simple et fonctionnera sur presque tous les sites.
2. Supprimez temporairement tout CSS personnalisé et utilisez le sélecteur de langue de WPML avec ses paramètres par défaut
3. Utilisez le débogueur CSS de votre navigateur et voyez s’il y a des conflits CSS évidents. Si vous en trouvez la cause, vous pouvez remplacer le style CSS sur la page WPML → Langues, dans la section Options du sélecteur de langue. À cet endroit, cliquez sur le lien CSS supplémentaire.

S’il y a des problèmes entre le thème et WPML, l’équipe d’assistance de WPML travaillera avec notre équipe de compatibilité et l’auteur de thème afin de vous fournir une solution appropriée.

Classes CSS par langue

Voici la liste des classes CSS pour chaque langue :

• wpml-ls-slot-{slug} : par ex. « wpml-ls-slot-sidebar-1 ».
• wpml-ls-item.
• wpml-ls-item-{language_code} : par ex. « wpml-ls-item-en ».
• wpml-ls-current-language : uniquement pour l’élément de la langue actuelle.
• wpml-ls-menu-item : uniquement pour les sélecteurs de langue dans les menus.
• wpml-ls-first-item : pour cibler le premier élément de langue de la liste.
• wpml-ls-last-item : pour cibler le dernier élément de langue de la liste)

S’il est nécessaire de modifier les classes CSS pour chaque langue, WPML propose le hook de filtre wpml_ls_model_language_css_classes.

Par exemple, disons que vous devez ajouter une classe my-custom-item-class pour chaque langue. Dans ce cas, vous pouvez ajouter un code comme le suivant au fichier functions.php de votre thème :

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;
}

Classes CSS du conteneur de sélecteur de langue

Voici la liste des classes CSS pour le conteneur du sélecteur de langue :

• wpml-ls
• wpml-ls-{group}-{slug} : par ex. « wpml-ls-statics-footer ».
• wpml-ls-{template-slug} : par ex. « wpml-ls-legacy-dropdown-click ».
• wpml-ls-rtl : pour les langues de droite à gauche (RTL).
• wpml-ls-touch-device : cette classe est ajoutée pour les appareils mobiles et les tablettes.

Dans le tableau suivant, nous montrons comment les classes CSS sont construites en fonction du {group} et du {slug} :

Comme précédemment, si vous devez ajouter une classe CSS personnalisée pour le conteneur de votre sélecteur de langue, vous pouvez utiliser notre hook de filtre wpml_ls_model_css_classes. Un code comme le suivant dans le fichier functions.php de votre thème ajoutera une classe 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;
}

Remarque : WPML n’injecte que certains éléments pour l’option de sélecteur de langue dans les menus. Par conséquent, il n’a aucune classe de conteneur.

Personnaliser un sélecteur de langue avec CSS

Nous pouvons facilement ajouter des styles CSS personnalisés sur la page WPML → Langues, dans la section Options du sélecteur de langue. À cet endroit, cliquez sur le lien CSS supplémentaire.

Exemple 1 : Afficher la langue actuelle en gras

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

Exemple 2 : Modifier la taille de la police uniquement pour le sélecteur de langue dans le pied de page

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

Exemple 3 : Ajouter une marge à droite après le dernier élément de langue

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

Vous pouvez également combiner les sélecteurs pour avoir un meilleur ciblage.

Exemple 4 : Ajouter du texte en gras pour la langue actuelle du sélecteur de langue dans le pied de page

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

Exemple 5 : Corriger la largeur d’un sélecteur de langue dans un menu

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;
}