Skip Navigation
Accueil » Documentation WPML » Guide de démarrage » Configuration de la langue » Options de sélecteur de langue » Sélecteur de langue personnalisé

Sélecteur de langue personnalisé

Amir
Mis à jour
août 12, 2021

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.

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. Ajoutez le code PHP qui permet de générer le sélecteur de langue.
  2. Stylisez votre sélecteur de langue à l’aide de CSS
  3. Actualisez les paramètres du sélecteur de langue

En ce qui concerne le PHP

La première étape consiste à ajouter le code PHP responsable du rendu du sélecteur de langue sur votre page. Pour ce faire, vous devez créer une fonction qui ajoute un conteneur div dans lequel se trouve le sélecteur de langue. Nous pouvons utiliser la fonction wpml_add_language_selector pour afficher 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 de 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

Une fois le code précédent configuré, nous disposons déjà d’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. Pour cela, vous pouvez utiliser l’attribut CSS position: fixed.

Suivez les étapes suivantes pour ajouter le code CSS :

  1. Accédez à WPML → Langues.
  2. Faites défiler vers le bas les options du sélecteur de langue et développez la section CSS supplémentaire.

Vous pouvez également ajouter ce code CSS en accédant à Apparence → Personnaliser et en cliquant sur CSS supplémentaire.

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

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. Accédez à WPML → Langues.
  2. Faites défiler vers le bas jusqu’à Sélecteurs de langue personnalisés et cliquez sur Activer.
  3. Cliquez sur le bouton Personnaliser.
  4. Pour la section À inclure dans le sélecteur de langue, sélectionnez Drapeau et décochez les autres options.
  5. Cliquez sur Enregistrer.
Language switcher options
Affichage du drapeau uniquement dans le sélecteur de langue flottant

Voilà ! Le site Web devrait maintenant comporter un super sélecteur de langue personnalisé :

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

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