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 produit 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 de manière facultative (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 dans un bloc pour l’éditeur Gutenberg pour n’importe quelle 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 rendu HTML pour des chargements de page rapides.

La plupart des sites utilisent les emplacements intégrés et les valeurs par défaut. Les développeurs 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 WPML > Paramètres > Sé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 dispose d’une zone de glisser-déposer répertoriant chaque langue active. L’ordre ici détermine l’ordre dans chaque sélecteur sur le site. Faites glisser les langues vers le haut ou vers le bas et enregistrez.

Dans la même carte, choisissez :

• Libellé natif ou dans la 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.
• Drapeaux activés ou désactivés, et le format du drapeau.

Que se passe-t-il 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écide de 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. L’expérience utilisateur la plus propre ; 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ù le sélecteur apparaît

Cinq emplacements, chacun 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 obtient sa propre ligne d’aperçu indiquant où il se trouve.
• 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 seule 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 développeurs de thèmes peuvent appeler l’API du sélecteur de WPML depuis n’importe quel fichier de modèle. La page des paramètres expose un bouton Personnaliser pour les options de rendu.

Masquez le sélecteur sur des pages spécifiques

Certaines pages n’ont pas besoin d’un 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 Paramètres > Sélecteurs de langue. Choisissez les pages sur lesquelles vous souhaitez que le sélecteur soit masqué ; la règle s’applique à tous les emplacements de sélecteur en même temps.

Conservez 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, les paramètres de filtre, etc.) sont supprimés. Cela casse les campagnes d’analyse et les listes filtrées.

Le champ Conserver les arguments de l’URL répertorie les clés de requête que vous souhaitez conserver lors du changement. Tout ce que vous mettez ici (une 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

La carte Performances comporte une seule case à cocher : Mettre en cache les modèles de sélecteur de langue. Lorsqu’elle est activée, WPML met en cache le rendu HTML de chaque emplacement de sélecteur, ce qui accélère les chargements de page sur un site très fréquenté.

Le piège : lorsque vous modifiez une option de 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. Désactivez-le, rechargez, et vos modifications apparaissent. Réactivez ensuite la mise en cache pour la production.

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 WordPress ou d’une zone de widget), WPML expose une API qui permet aux développeurs de thèmes de créer un sélecteur personnalisé.

La carte Sélecteurs de langue personnalisés comporte 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.