Un sélecteur de langue permet aux visiteurs de sélectionner la langue dans laquelle ils souhaitent lire votre contenu. WPML vous permet d’ajouter un sélecteur de langue de différentes manières : dans un menu, sous forme de widget ou dans le pied de page du site. Vous pouvez également l’utiliser pour afficher des liens au-dessus ou au-dessous de vos messages, afin de les proposer dans d’autres langues.

Les sélecteurs de langue ajoutés à l’aide de WPML présentent bien sur la plupart des thèmes. Si le sélecteur de langue ne s’affiche pas correctement dans votre thème, il peut y avoir un conflit CSS. Lisez notre guide sur la résolution des problèmes de style pour les sélecteurs de langue.

Pour ajouter et personnaliser les sélecteurs de langue, allez dans WPML > Languagesdans le tableau de bord WordPress.

Options du sélecteur de langue global

La première section relative aux sélecteurs de langue est celle des paramètres généraux, comme l’ordre des langues. Veuillez noter que ces options sont appliquées à 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

La section principale Options du sélecteur de langue

La section des options de sélecteur de langue présente l’optionConserver les arguments dans une URL.

Les arguments dans une URL peuvent être nécessaires à certains plug-in et vous pouvez les conserver lors du changement de langue – c’est le but de cette fonctionnalité. Les arguments que vous souhaitez conserver doivent être ajoutés ici sous forme de liste séparée par des virgules.

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.
  • Boîte de dialogue « Conserver les arguments dans une URL »
  • Dans le front-end, ouvrez le message « Hello world » et ajoutez-le à la fin de l’URL : ?bar=10&foo=100&lost=1000(remarquez que nous avons ajouté les deux arguments + celui qui a été perdu)
  • Changez de langue – l’URL ne se terminera que par ?bar=10&foo=100

Séparez les sections pour différents types de sélecteurs de langue

Chaque type de sélecteur de langue a sa propre section. Les options sélectionnées pour différents types de sélecteurs de langue sont appliquées à chaque sélecteur, respectivement. La page Langues affiche un aperçu du fonctionnement des différents sélecteurs de langue actifs sur votre site, comme illustré dans 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 possède son propre bouton « Ajouter » (pour ajouter un autre sélecteur de langue de ce type), une icône « Crayon » pour modifier le sélecteur existant et une icône « Corbeille ».

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

Chaque type de sélecteur de langue a ses propres paramètres. Cela vous permet un contrôle total et indépendant de ce qu’il comprend et à quoi il ressemble.

Par exemple, l’image suivante affiche une boîte de dialogue avec les paramètres du sélecteur de langue du menu.

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

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

Lorsque vous modifiez les paramètres du sélecteur de langue, l’aperçu est mis à jour. L’aperçu est « schématique ». Il ne charge pas le CSS frontal (ce n’est pas une bonne idée de le charger dans l’administrateur de WordPress), donc le style du sélecteur de langue réel sera différent. Cependant, il vous montre l’effet des différentes options, les paramètres de couleur, l’ordre et le contenu.

Contrôle total sur chaque sélecteur de langue

Depuis la version 3.6, WPML n’affiche pas les sélecteurs de langue avec leur propre HTML. Au lieu de cela, il injecte les éléments de « sélecteur de langue » dans la structure du menu. Ainsi, votre thème affiche le sélecteur de langue exactement comme les autres éléments de menu.

Fondamentalement, cela permet au sélecteur de langue de se fondre visuellement dans les autres éléments de votre site en reprenant l’aspect des règles CSS de votre thème.

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

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

La version 3.6 de WPML a ajouté une nouvelle classe CSS – wpml-ls-menu-item spécialement pour les sélecteurs de langue du menu. Cela simplifie la personnalisation de vos éléments de sélecteur du menu (liens).

Par exemple, si votre site utilise le thème Twenty Sixteen et que votre sélecteur de menu n’affiche que les drapeaux des langues, le rendu ne sera guère convaincant. Comme vous pouvez le voir dans l’image suivante, la largeur des éléments de menu est étrangement grande.

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

Nul besoin de modifier le fichier CSS de votre thème, ajoutez simplement des règles personnalisées à la section CSS supplémentaire sous les options de sélecteur de langue.

Maintenant, la largeur des éléments de la liste est améliorée, comme indiqué dans 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é

Menu du sélecteur de langue en front-end

Parfois, vous devez ajouter un sélecteur de langue dans un emplacement personnalisé spécifique. Vous pouvez le faire dans les modèles PHP de votre thème ou directement dans les pages et les publications.

Notez que les paramètres généraux pour les sélecteurs de langue dans des emplacements personnalisés sont configurés là où le sont ceux des autres sélecteurs de votre site – dans la section Options du sélecteur de langue, sur la page Langues.

Utilisation des actions PHP

Pour afficher le sélecteur de langue dans les fichiers de modèle PHP de votre thème, vous pouvez utiliser les deux actions suivantes :

  • do_action('wpml_add_language_selector'); – Génère le sélecteur de langue en fonction des options définies dans la section Sélecteurs de langue personnalisé.
  • do_action( 'wpml_footer_language_selector'); – Génère le sélecteur de langue en fonction des options définies dans la section Sélecteurs de langue du pied de page, même si l’option Afficher le sélecteur de langue dans le pied de page est désactivée.

Utiliser les codes courts de WPML

À l’intérieur des publications et des pages, vous pouvez utiliser l’un des deux codes courts WPML ci-dessous. Encore une fois, la différence réside dans l’affichage du sélecteur de langue.

  • [wpml_language_selector_widget] génère le sélecteur de langue en fonction des options définies dans la section Sélecteurs de langue personnalisés.
  • [wpml_language_selector_footer] génère le sélecteur de langue en fonction des options définies dans la section Sélecteur de langue du pied de page, même si l’option Afficher le commutateur de langue dans le pied de page est désactivée.

Affichage d’un sélecteur de langues dans le menu

Si nécessaire, vous pouvez également créer votre propre sélecteur de langue unique. Un sélecteur de langue personnalisé vous permettra d’inclure toutes les options de votre choix. Souvent, les gens l’utilisent pour afficher leurs propres drapeaux de langue ou pour hiérarchiser des langues de manière particulière.

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

Vous pouvez le faire de deux manières : en utilisant des modèles Twig ou en utilisant une API PHP.

Depuis la version 3.6, WPML prend en charge la création de sélectteurs de langue personnalisés à l’aide de modèles Twig. C’est l’approche préférée et la plus simple, et n’inclut aucune programmation PHP. La meilleure chose quant à l’utilisation des modèles Twig est que vous pouvez facilement les inclure dans des thèmes et ils apparaîtront comme des options pour les utilisateurs.

L’autre méthode consiste à créer des sélecteurs de langue personnalisés à l’aide de l’API PHP. Cette approche nécessite des connaissances en PHP.