Skip Navigation
Mis à jour
décembre 28, 2023

Lorsque vous développez des sites multilingues avec WPML, il se peut que vous ayez besoin d’un sélecteur de langue personnalisé. Apprenez à le faire à l’aide de PHP et CSS simples.

WPML vous permet d’ajouter des sélecteurs de langue à vos menus, vos widgets, vos 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 vous ayez besoin de quelque chose de plus spécial pour votre site.

Dans ce tutoriel, nous allons vous montrer comment ajouter un sélecteur de langue flottant. Un sélecteur de langue flottant est particulièrement attrayant et permet à vos clients d’afficher plus facilement votre site dans leur langue.

Un site utilisant le sélecteur de langue flottant.

Suivez ces trois étapes clés :

  1. Ajouter le code PHP qui rend le sélecteur de langue.
  2. Styler votre sélecteur de langue avec du CSS
  3. Mettre à jour les paramètres de votre sélecteur de langue.

En ce qui concerne le PHP

La première étape consiste à ajouter le module PHP responsable du rendu du sélecteur de langue sur votre page. Pour cela, vous créez une fonction qui ajoute un conteneur div avec le sélecteur de langue à l’intérieur. Nous pouvons utiliser l’action wpml_add_language_selector pour faire apparaitre 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 hook 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>'; 
}

Vous pouvez le copier et l’ajouter au fichier functions.php de votre thème (enfant).

Parlons du style

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. Vous pouvez le faire en utilisant l’attribut CSS position : fixed.

Suivez les étapes suivantes pour ajouter le code CSS :

  1. Allez dans WPML → Langues.
  2. Descendez jusqu’aux options du sélecteur de langue et ouvrez la section CSS additionnel.

Vous pouvez aussi ajouter ce code CSS en allant dans Apparence → Personnaliser et en cliquant sur CSS additionnel.

L’exemple suivant présente quelques personnalisations supplémentaires, comme des bordures arrondies et une ombre de boîte. Bien entendu, vous pouvez le personnaliser à votre goût.

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

Passons aux réglages

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

Suivez les étapes suivantes :

  1. Allez dans WPML → Langues.
  2. Faites défiler jusqu’à Sélecteurs de langue personnalisés et cliquez sur Activer.
  3. Cliquez sur le bouton Personnaliser.
  4. Pour Que faut-il inclure dans le sélecteur de langue, sélectionnez Drapeau et décochez les autres options.
  5. Cliquez sur Appliquer.
Language switcher options
Afficher uniquement le drapeau dans le sélecteur de langue flottant.

C’est tout ! Le site Web devrait maintenant comporter un super sélecteur de langue personnalisé :

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

Bonus : Sélecteur de langue flottant vertical

Vous pouvez également créer un sélecteur de langue vertical, comme dans 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;
}