Sauter la navigation
Accueil » Documentation WPML » Guide de démarrage » Configuration de la langue » Comment ajouter un sélecteur de langue à votre site WordPress » Sélecteur de langue personnalisé

Sélecteur de langue personnalisé

Amir
Mis à jour
mai 24, 2024

Lorsque vous développez des sites multilingues avec WPML, vous pourriez avoir besoin d’un sélecteur de langue personnalisé. Apprenez à le faire avec un peu de PHP et de CSS.

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

Dans ce tutoriel, nous verrons comment ajouter un sélecteur de langue flottant. Un sélecteur de langue flottant est très esthétique et permet à vos clients de consulter plus facilement votre site dans leur langue.

Un site utilisant le sélecteur de langue flottant

Suivez ces trois étapes principales :

  1. Ajoutez le code PHP qui rend le sélecteur de langue.
  2. Donnez du style à votre sélecteur de langue avec CSS
  3. Mettez à jour les paramètres de votre sélecteur de langue

La partie PHP

La première étape consiste à ajouter le code 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 le L’action 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 se présente comme suit.

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).

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. Il est maintenant 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 à WPML → Langues.
  2. Faites défiler la page jusqu’aux options du sélecteur de langue et développez la section Additional CSS .

Vous pouvez également ajouter ce code CSS en vous rendant dans Apparence → Personnaliser et en cliquant sur CSS supplémentaire.

L’exemple suivant ajoute quelques personnalisations supplémentaires, comme des bordures arrondies et un ombrage de la boîte. Bien entendu, vous pouvez le personnaliser à votre guise.

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, vous devez ajuster certains paramètres pour que le sélecteur de langue n’affiche que les drapeaux.

Procédez comme suit :

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

C’est tout ! Vous devriez maintenant avoir un 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 vertical flottant

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