Sauter la navigation
Mis à jour
mai 22, 2024

Lorsque tu développes des sites multilingues avec WPML, tu peux avoir besoin d’un sélecteur de langue personnalisé. Apprends à le faire avec un peu de PHP et de CSS.

WPML te permet d’ajouter des sélecteurs de langue à tes menus, widgets, pieds de page et aux sites utilisant l’éditeur de site (anciennement connu sous le nom de Full Site Editing) complet avec des options de personnalisation et des drapeaux intégrés. Mais il se peut que tu aies besoin de quelque chose de plus spécial pour ton site.

Dans ce tutoriel, nous allons voir comment ajouter un sélecteur de langue flottant. Un sélecteur de langue flottant a fière allure et permet à tes clients de consulter plus facilement ton site dans leur langue.

Un site utilisant le sélecteur de langue flottant.

Suis ces trois étapes principales :

  1. Ajoute le code PHP qui rend le sélecteur de langue.
  2. Style ton sélecteur de langue avec CSS
  3. Mets à jour les paramètres de ton sélecteur de langue.

La partie PHP

La première étape consiste à ajouter le module PHP responsable du rendu du sélecteur de langue sur ta Page. Pour cela, tu crées une fonction qui ajoute un conteneur div avec le sélecteur de langue à l’intérieur. Nous pouvons utiliser le L’action wpml_add_language_selector pour rendre le sélecteur de langue.

Dans cet exemple, nous voulons que le nouveau sélecteur de langue soit affiché dans le pied de page, nous utilisons donc notre nouvelle fonction avec le crochet wp_footer propre à WordPress.

Le code PHP complet ressemblera à ceci.

Language switcher PHP
//WPML - Add a floating language switcher to the footer
 add_action('wp_footer', 'wpml_floating_language_switcher'); 
 
 function wpml_floating_language_switcher() { 
    echo '<div class="wpml-floating-language-switcher">';
        //PHP action to display the language switcher (see https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/#using-php-actions)
        do_action('wpml_add_language_selector');
    echo '</div>'; 
}

Tu peux le copier et l’ajouter au fichier functions.php de ton thème (enfant).

La partie stylistique

Avec le code précédent en place, nous avons déjà un nouveau sélecteur de langue ajouté au pied de page de notre site web. Maintenant, il est temps de le personnaliser pour qu’il flotte dans le coin inférieur droit du site web. Tu peux le faire en utilisant l’attribut CSS position : fixed.

Utilise les étapes suivantes pour ajouter le code CSS :

  1. Va dans WPML → Langues.
  2. Fais défiler vers le bas jusqu’aux options du sélecteur de langue et développe la section CSS supplémentaire .

Tu peux aussi ajouter ce code CSS en allant dans Apparence → Personnaliser et en cliquant sur CSS supplémentaires.

L’exemple suivant ajoute quelques personnalisations supplémentaires comme des bordures arrondies et un box-shadow. Bien sûr, tu peux le personnaliser comme tu le souhaites.

Language Switcher Styling
/*Removing some default CSS from our language switcher*/
.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions {
  margin-bottom: 0;
}
 
.wpml-floating-language-switcher  .wpml-ls-statics-shortcode_actions a {
  background-color: transparent !important;
}
 
.wpml-floating-language-switcher .wpml-ls-legacy-list-horizontal a {
  padding: 5px;
}
 
 
/*Customize this if you want*/
.wpml-floating-language-switcher {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: #f8f8f8; /*background color*/
  border: 1px solid; /*border settings*/
  border-color: #eee; /*color of the border*/
  padding: 0px; /*padding of container*/
  border-radius: 6px; /*rounded border*/
  /*Box Shadow*/
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
}

La partie réglages

Enfin, tu dois ajuster certains paramètres pour que le sélecteur de langue n’affiche que les drapeaux.

Utilise les étapes suivantes :

  1. Va dans WPML → Langues.
  2. Fais défiler jusqu’à Sélecteurs de langues personnalisés et clique sur Activer.
  3. Clique sur le bouton Personnaliser.
  4. Pour Ce qu’il faut inclure dans le sélecteur de langue, sélectionne Drapeau et décoche les autres options.
  5. Clique sur Enregistrer.
Language switcher options
Afficher uniquement le drapeau dans le sélecteur de langue flottant.

C’est ça ! Tu devrais maintenant avoir un joli sélecteur de langue personnalisé sur le site web :

Horizontal language switcher
Le sélecteur de langue sur le front-office.

Bonus : sélecteur de langue flottant à la verticale.

Tu pourrais aussi créer à la place un sélecteur de langue vertical, comme la capture d’écran ci-dessous :

Vertical language switcher
Sélecteur de langue vertical

Pour cela, il suffit de remplacer le CSS précédent par le code suivant :

Vertical Language Switcher CSS
/*Removing some default CSS our language switcher*/
.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions {
  margin-bottom: 0;
}
 
.wpml-floating-language-switcher  .wpml-ls-statics-shortcode_actions a {
  background-color: transparent !important;
}
 
.wpml-floating-language-switcher .wpml-ls-legacy-list-horizontal a {
  padding: 5px;
}
 
.wpml-floating-language-switcher .wpml-ls-item {
  display: block;
}
 
/*Customize this if you want*/
.wpml-floating-language-switcher {
  position: fixed;
  bottom: 20px;
  right: 0px;
  background: #f8f8f8; /*background color*/
  border: 1px solid; /*border settings*/
  border-color: #eee; /*color of the border*/
  padding: 0px; /*padding of container*/
  border-radius: 6px 0 0 6px; /*rounded border*/
  /*Box Shadow*/
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  z-index: 999;
}