Un sélecteur de langue permet à vos visiteurs de choisir la langue dans laquelle ils veulent lire le contenu que vous proposez. WPML vous permet d’ajouter un sélecteur de langue de différentes façons : dans un menu, comme widget ou en pied de page d’un site. Vous pouvez aussi l’utiliser pour afficher des liens au-dessus ou en dessous de vos publications afin de le proposer dans une autre langue.

Les sélecteurs de langue ajoutés à l’aide de WPML fonctionneront bien et auront un bel aspect avec n’importe quel thème.

Vos sélecteurs de langue sont ajoutés et personnalisés sur WPML -> page Langues.

Options du sélecteur de langue global

La première section liée aux sélecteurs de langue est celles des paramètres globaux, par exemple l’ordre des langues. Veuillez noter que ces options s’appliquent à tous les sélecteurs de langue que vous ajoutez.

La section principale Options du sélecteur de langue
La section principale Options du sélecteur de langue

Paramètres pour conserver les arguments dans une URL

La section Options du sélecteur de langue présente une boîte de dialogue appelée conserver les arguments dans une URL.

Les arguments d’une URL peuvent être nécessaires pour certains modules d’extension et il se pourrait que vous souhaitiez les garder lorsque vous changez de langue (c’est l’objet de cette fonctionnalité). Les arguments que vous souhaitez conserver doivent être ajoutés ici sous forme de liste séparée par une virgule.

Boîte de dialogue « Conserver les arguments dans une URL »
Boîte de dialogue « Conserver les arguments dans une URL »

Prenons l’exemple suivant d’utilisation de cette fonctionnalité :

  • Supposons que vous ajoutiez les arguments suivants : bar, foo.
  • Vous traduisez la publication « Hello world ».
  • Ouvrez la publication « Hello world » en front-end et ajoutez ceci à la fin de l’ URL : ?bar=10&foo=100&lost=1000 (vous remarquerez que nous avons ajouté les deux arguments + celui qui a été perdu)
  • Changez de langue – l’URL finira seulement par  ?bar=10&foo=100

Séparer les sections pour les sélecteurs de langue de type différents

Chaque type de sélecteur de langue a sa propre section séparée. Les options sélectionnées pour les différents types de sélecteurs de langue sont respectivement appliquées à chaque sélecteur de langue. La page des Langues affiche une zone de prévisualisation pour les différents sélecteurs de langue actifs sur votre site. Voyez plutôt sur l’image suivante.

Sections séparées pour chaque type de sélecteur de langue
Sections séparées pour chaque type de sélecteur de langue

Chaque section dispose de son propre bouton « Ajouter » (pour ajouter un sélecteur de langue de ce type), d’une icône « crayon » pour modifier le sélecteur existant, et d’une icône « Corbeille ».

Contrôle total sur chaque sélecteur de langue

Chaque type de sélecteur de langue a ses propres paramètres. Cela vous permet de contrôler totalement et en toute indépendance son contenu ainsi que son apparence.

Par exemple, la boîte de dialogue suivante montre une boîte de dialogue avec des paramètres pour menu du sélecteur de langue.

Paramètres pour menu du sélecteur de langue.
Paramètres pour menu du sélecteur de langue

Prévisualisation dynamique affichant les options du sélecteur de langue

Lorsque vous changez les paramètres du sélecteur de langue, la prévisualisation se met à jour. La prévisualisation est « schématique ». Elle ne charge pas le fichier CSS front-end (il faut éviter de charger dans l’admin. WordPress), par conséquent, le sélecteur de langue actuel sera stylisé différemment. Cela donne toutefois une idée de l’effet des différentes options, paramètres couleur et contenus.

Structure HTML du menu des sélecteurs de langue

Depuis la version 3.6, WPML ne restitue pas le sélecteur de langue avec son propre HTML. À la place, il injecte les éléments du sélecteur de langue dans la structure du menu. Ainsi, votre thème restitue le sélecteur de langue exactement comme les autres éléments de menu.

Le sélecteur de langue prend l’aspect des règles CSS de votre thème, ce qui lui permet essentiellement d’avoir une meilleure apparence sur votre site.

Menu du sélecteur de langue en front-end
Menu du sélecteur de langue en front-end

Personnaliser le menu des sélecteurs de langue

Pour le menu des sélecteurs de langue en particulier, la version WPML 3.6 s’est enrichie d’une nouvelle classe CSS – wpml-ls-menu-item. La personnalisation de vos éléments de sélecteur de menu est ainsi simplifiée (liens).

Par exemple, si votre site utilise le thème Twenty Sixteen et que votre sélecteur de menu affiche uniquement les indicateurs de langue, le rendu front-end sera bizarre. Comme vous pouvez le voir dans l’image suivante, les éléments de menu sont trop larges et le rendu est bizarre.

Sélecteur de langue Flags-only avec un thème Twenty Sixteen
Sélecteur de langue Flags-only avec un thème Twenty Sixteen

Vous pouvez facilement résoudre ce problème en utilisant la classe CSS wpml-ls-menu-item.


li.wpml-ls-menu-item ul li a {

width: auto;

}

Inutile d’éditer le fichier CSS de votre thème. Ajoutez simplement des règles de personnalisation à la section CSS complémentaire sous l’option Sélecteur de langue.

La largeur des éléments de la liste est maintenant améliorée comme sur l’image suivante.

Menu du sélecteur de langue après avoir appliqué le fichier CSS personnalisé
Menu du sélecteur de langue après avoir appliqué le fichier CSS personnalisé

Affichage des sélecteurs de langues WPML dans les emplacements personnalisés

Il faut parfois ajouter un sélecteur de langue à un emplacement spécifique personnalisé. Vous avez la possibilité de le faire dans les templates PHP de votre thème ou directement dans les pages et les publications.

Veuillez noter que les paramètres globaux des sélecteurs de langue personnalisés (à un emplacement spécifique) sont définis au même endroit que ceux des autres sélecteurs de votre site – dans la section options du sélecteur de langue, sur la page Langues.

Recourir à des actions PHP

Pour afficher le sélecteur de langue dans les fichiers templates PHP de votre thème, vous pouvez procéder de deux façons.

  • do_action(‘wpml_add_language_selector’);– sort les données du sélecteur de langue en se basant sur les options définies dans la section Sélecteurs de langue personnalisés.
  • do_action( ‘wpml_footer_language_selector’ );– sort les données du sélecteur en se basant sur les options définies dans la section Sélecteur de langue en pied de page, même si l’option Afficher le sélecteur de langue en pied de page est désactivée.

Utiliser des codes abrégés WPML

Dans les publications, vous pouvez utiliser un ou deux des codes abrégés WPML ci-dessous. La différence réside dans le type de sélecteur de langue affiché.

  • [wpml_language_selector_widget] – sort les données du sélecteur de langue en se basant sur les options définies dans la section Sélecteur de langue personnalisé.
  • [wpml_language_selector_footer] – sort les données du sélecteur en se basant sur les options définies dans la section Sélecteur de langue en pied de page, même si l’option Afficher le sélecteur de page en pied de page est désactivée.

Vos sélecteurs de langue personnalisés

Il existe une autre option qui consiste à créer votre propre sélecteur de langue. Un sélecteur de langue personnalisé vous permettra d’inclure toutes les options que vous voulez, comme vous le souhaitez. Souvent, les gens l’utilisent pour afficher leurs propres drapeaux linguistiques et commander les langues comme bon leur semble.

Un sélecteur de langue personnalisé
Un sélecteur de langue personnalisé

Il existe de façon de le faire : utiliser des Twig templates ou PHP API.

Depuis la version 3.6, WPML propose une assistance pour créer des sélecteurs de langue personnalisés à l’aide de templates Twig. Il s’agit de la meilleure approche mais aussi de la plus simple, et ce, sans aucune programmation PHP. L’atout principal des templates Twig est qu’elles peuvent être facilement intégrées aux thèmes et apparaîtront comme optionnelles pour les utilisateurs.

Sinon, vous pouvez créer des sélecteurs de langue personnalisés à l’aide de PHP API. Cette méthode demande quelques connaissance en langage PHP.