Sélecteur de langue personnalisé

Lors du développement de sites multilingues avec WPML, vous pourriez avoir besoin d’un sélecteur de langue personnalisé. Découvrez comment procéder 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 Édition complète du site), avec des options de personnalisation et des drapeaux intégrés. Mais vous pourriez avoir besoin de quelque chose de plus spécifique pour votre site.

Dans ce tutoriel, nous allons vous montrer comment ajouter un sélecteur de langue flottant. Un sélecteur de langue flottant rend très bien et permet à vos clients de consulter plus facilement votre site dans leur langue.

Suivez ces trois étapes principales :

1. Ajoutez le code PHP qui génère le sélecteur de langue
2. Personnalisez votre sélecteur de langue avec du 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 chargé d’afficher le sélecteur de langue sur votre page. Pour ce faire, créez une fonction qui ajoute un conteneur div contenant le sélecteur de langue. Nous pouvons utiliser l’action wpml_add_language_selector pour générer le sélecteur de langue.

Dans cet exemple, nous souhaitons 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.

//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 style

Une fois le code précédent en place, un nouveau sélecteur de langue est déjà ajouté au pied de page de notre site. Il est maintenant temps de le personnaliser pour qu’il flotte dans le coin inférieur droit du site. Vous pouvez le faire en utilisant l’attribut CSS position: fixed.

Procédez comme suit pour ajouter le code CSS :

1. Accédez à WPML → Paramètres → Sélecteurs de langue.
2. Dans la carte Options du sélecteur de langue, développez 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 ajoute quelques personnalisations supplémentaires comme des bordures arrondies et une ombre portée (box-shadow). Bien sûr, vous pouvez le personnaliser comme vous le souhaitez.

/*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 paramètres

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

Procédez comme suit :

1. Accédez à WPML → Paramètres → Sélecteurs de langue → Sélecteurs de langue personnalisés.
2. Faites défiler jusqu’à Sélecteurs de langue personnalisés et cliquez sur Activer.
3. Cliquez sur le bouton Personnaliser.
4. Sous Ce qu’il faut inclure dans le sélecteur de langue, laissez Drapeau coché et décochez Nom natif de la langue, Nom de la langue dans la langue actuelle et Langue actuelle.
5. Cliquez sur Enregistrer.

C’est tout ! Vous devriez maintenant avoir un beau sélecteur de langue personnalisé sur le site :

Bonus : sélecteur de langue flottant vertical

Vous pouvez également créer un sélecteur de langue vertical à la place, comme sur la capture d’écran ci-dessous :

Pour ce faire, remplacez simplement le CSS précédent par le code suivant :

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