Personnalisez le sélecteur de langue WPML : emplacement, style et comportement

Ce que peut faire le sélecteur de langue de WPML

Prêt à l’emploi, WPML génère un sélecteur qui :

Affiche toutes les langues actives de votre site, dans l’ordre de votre choix.
Libelle chaque langue dans son nom natif (Deutsch, Français) ou dans la langue actuelle du site (allemand, français), selon votre choix.
Affiche des drapeaux en option (un sprite qui s’adapte à votre thème).
Gère les traductions manquantes de manière élégante : soit en ignorant la langue, soit en créant un lien vers la page d’accueil de cette langue.
Peut être placé dans n’importe quel menu WordPress, dans n’importe quelle zone de widget, dans le pied de page, ou en ligne au-dessus et en dessous des articles.
Est fourni sous forme de bloc pour l’éditeur Gutenberg pour toute mise en page de constructeur de pages.
Peut être masqué sur des pages spécifiques où il serait gênant (404, validation de commande, compte).
Met en cache son code HTML rendu pour un chargement rapide des pages.

La plupart des sites utilisent les emplacements intégrés et les paramètres par défaut. Les auteurs de thèmes qui ont besoin de plus de contrôle peuvent créer un sélecteur personnalisé dans le code à l’aide de l’API de WPML.

Où se trouvent les paramètres

Ouvrez WPMLParamètresSélecteurs de langue. La page est regroupée par question, et non par onglet d’interface utilisateur. Choisissez la section qui correspond à ce que vous souhaitez modifier.

Quelles langues apparaissent et dans quel ordre

La carte Options du sélecteur de langue comporte une zone de glisser-déposer répertoriant chaque langue active. L’ordre défini ici détermine l’ordre dans tous les sélecteurs du site. Faites glisser les langues vers le haut ou vers le bas et enregistrez.

Dans la même carte, choisissez :

Libellé natif ou langue actuelle. Affichez Deutsch (natif) ou allemand (langue actuelle). Le nom natif est plus invitant pour les locuteurs de cette langue ; la langue actuelle est plus claire pour les nouveaux visiteurs.
Activer ou désactiver les drapeaux, et le format du drapeau.

Ce qui se passe lorsqu’une traduction est manquante

Toutes les pages ne sont pas traduites dans toutes les langues. L’option Comment gérer les langues sans traduction détermine ce que fait le sélecteur pour une langue qui n’a pas de traduction de la page actuelle :

Ignorer la langue (par défaut). La langue disparaît du sélecteur pour cette page. C’est l’expérience utilisateur la plus épurée ; les visiteurs ne voient que les langues qu’ils peuvent réellement lire.
Lien vers la page d’accueil de la langue pour les traductions manquantes. L’entrée du sélecteur affiche à la place la page d’accueil de la langue. Utile lorsque vous souhaitez que chaque langue soit toujours accessible depuis n’importe quelle page, mais les visiteurs peuvent atterrir sur un contenu auquel ils ne s’attendaient pas.

Ce choix a des implications sur l’expérience utilisateur qui méritent d’être mûrement réfléchies.

Où apparaît le sélecteur

Cinq emplacements, chacun pouvant être activé indépendamment sur la même page de Paramètres :

Sélecteur de langue du menu. Déposez le sélecteur dans n’importe quel menu WordPress (en-tête, pied de page, barre latérale, partout où votre thème attribue des menus). Ajoutez-en plusieurs si vous souhaitez des emplacements différents par menu. Chaque sélecteur de menu dispose de sa propre ligne d’aperçu indiquant sa position.
Sélecteur de langue de widget. Ajoutez le sélecteur à n’importe quelle zone de widget enregistrée par votre thème : barres latérales, zones d’en-tête, colonnes de pied de page.
Sélecteur de langue de pied de page. Une bascule globale unique qui affiche automatiquement le sélecteur au bas de chaque page.
Liens en ligne vers les traductions des articles. Une simple case à cocher qui affiche les liens « cet article est disponible en X » au-dessus ou en dessous de chaque article.
Sélecteurs personnalisés. Lorsque les emplacements intégrés ne suffisent pas, les auteurs de thèmes peuvent appeler l’API du sélecteur de WPML depuis n’importe quel fichier de modèle. La page Paramètres présente un bouton Personnaliser pour les options de rendu.

Masquer le sélecteur sur des pages spécifiques

Certaines pages n’ont pas besoin de sélecteur : votre page 404, les écrans de compte, la validation de commande. Les règles d’affichage conditionnel de WPML vous permettent de masquer le sélecteur par page sans avoir recours au CSS display:none dans votre thème.

Vous définissez des règles par page sur la même page WPMLParamètresSélecteurs de langue. Choisissez les pages sur lesquelles vous souhaitez masquer le sélecteur ; la règle s’applique à tous les emplacements du sélecteur en même temps.

Conserver les paramètres d’URL

Lorsqu’un visiteur clique sur le sélecteur, WPML reconstruit l’URL pour la langue cible. Par défaut, les paramètres de chaîne de requête (?utm_source=newsletter, paramètres de filtre, etc.) sont supprimés. Cela casse les campagnes d’analyse et les listes filtrées.

Le champ Conserver les arguments d’URL répertorie les clés de requête que vous souhaitez conserver lors du changement. Tout ce que vous placez ici (un par ligne) accompagne le visiteur vers l’URL traduite.

CSS personnalisé pour le sélecteur

Une zone de texte unique sous CSS supplémentaire applique un style à tous les sélecteurs du site en même temps. Utile pour adapter le sélecteur à votre thème sans toucher aux fichiers du thème.

Mise en cache du modèle de sélecteur

WPML met en cache le code HTML rendu de chaque emplacement de sélecteur, ce qui accélère le chargement des pages sur un site très fréquenté. Depuis WPML 5.0, il n’y a aucun paramètre pour cela : le cache est activé chaque fois que le répertoire de cache de WPML est accessible en écriture.

Attention : lorsque vous modifiez une option du sélecteur et que vous ne voyez pas votre modification reflétée sur l’interface publique, le cache est le premier endroit à vérifier. Exécutez Vider le cache dans WPMLSupport, puis rechargez.

Sélecteurs personnalisés dans le code du thème

Pour les sites où les emplacements intégrés ne conviennent pas (un sélecteur dans une position spécifique à l’intérieur de l’en-tête de la page, une liste déroulante personnalisée rendue par votre thème, tout ce qui se trouve en dehors d’un menu ou d’une zone de widget WordPress), WPML expose une API qui permet aux auteurs de thèmes de créer un sélecteur personnalisé.

La carte Sélecteurs de langue personnalisés possède une bascule Activer et un bouton Personnaliser. Une fois activé, le code du modèle de thème peut afficher le sélecteur n’importe où à l’aide de l’API PHP documentée de WPML.