Contenu original
février 22, 2013
Mis à jour
mars 11, 2020

Les développeurs peuvent créer leurs propres sélecteurs de langue personnalisés en utilisant l’appel d’API icl_get_languages de WPML. Dans ce tutoriel, vous trouverez toutes les informations concernant icl_get_languages et des exemples de sélecteurs de langue personnalisés développés selon celui-ci.

Aperçu rapide :

  1. Appelez icl_get_languages pour obtenir la liste des traductions de la page affichée
  2. Écrivez votre propre fonction PHP pour afficher le sélecteur de langue
  3. Placez votre sélecteur de langue dans votre thème

Obtenir la liste des (autres) langues

Utilisez icl_get_languages() pour obtenir une liste de traductions pour n’importe quelle page. Si vous utilisez WPML 3.2 ou supérieur, vous devriez envisager d’utiliser le filtre de crochet similaire wpml_active_languages.

Utilisation :

icl_get_languages('skip_missing=N&orderby=KEY&order=DIR&link_empty_to=str')

* N=0/1
* KEY=id/code/name/custom (name -> translated_name), (default: id)
* DIR=asc/desc (default: asc)
* link_empty_to = str (par défaut : vide, fonctionne en conjonction avec skip_missing=0 et permet d’utiliser des liens personnalisés pour les langues qui n’ont pas de traduction pour l’élément actuel. {%lang} peut être utilisé comme placeholder pour le code de la langue)

Remarques :

  • Le paramètre skip_missing indique à la fonction comment traiter les langues sans traduction.
  • La combinaison de orderby et order permet de créer le sélecteur de langue déroulant ou les sélecteurs de langue où les langues s’affichent toujours dans le même ordre.
  • Vous pouvez configurer un ordre personnalisé dans l’admin de WordPress sous WPML >> Langues >> Options du sélecteur de langue

La fonction affichera un tableau avec des entrées par langue. Par exemple, pour un site WordPress fonctionnant en anglais, français et italien, elle affichera ceci :

Array
(
 [en] => Array
 (
 [id] => 1
 [active] => 1
 [native_name] => English
 [missing] => 0
 [translated_name] => English
 [language_code] => en
 [country_flag_url] => http://yourdomain/wpmlpath/res/flags/en.png
 [url] => http://yourdomain/about
 )

 [fr] => Array
 (
 [id] => 4
 [active] => 0
 [native_name] => Français
 [missing] => 0
 [translated_name] => French
 [language_code] => fr
 [country_flag_url] => http://yourdomain/wpmlpath/res/flags/fr.png
 [url] => http://yourdomain/fr/a-propos
 )

 [it] => Array
 (
 [id] => 27
 [active] => 0
 [native_name] => Italiano
 [missing] => 0
 [translated_name] => Italian
 [language_code] => it
 [country_flag_url] => http://yourdomain/wpmlpath/res/flags/it.png
 [url] => http://yourdomain/it/circa
 )
)

Chaque langue a son propre tableau de paramètres, que votre fonction de thème peut utiliser pour développer n’importe quel sélecteur de langue.

  • id : identifiant de référence interne
  • active : il s’agit de la langue actuellement active (une seule langue est active)
  • native_name : le nom natif de la langue (jamais traduit)
  • translated_name : le nom de la langue traduite dans la langue actuellement active
  • country_flag_url : l’URL d’une image PNG avec le drapeau du pays
  • url : le lien vers la traduction dans cette langue
  • missing: 1 si la traduction de cet élément est manquante, 0 si elle existe.

Gestion des traductions manquantes

Certaines pages peuvent ne pas être traduites dans toutes les langues. Vous pouvez dire à icl_get_languages ce qu’il faut afficher pour les langues sans traduction.

Si ‘skip_missing=1’, ces langues n’apparaîtront pas dans le rendu. Si ‘skip_missing=0’, toutes les langues apparaîtront et les langues avec des traductions manquantes seront associées à la page d’accueil dans cette langue.

Comment utiliser dans les fonctions de votre thème

Vous pouvez développer vos propres sélecteurs de langue comme bon vous semble. Ici, nous allons vous montrer deux utilisations populaires.

Les fonctions PHP d’exemple que nous montrons ici devraient aller dans votre fichier functions.php (dans le dossier du thème) – non pas être ajoutées au plug-in.

Cette publication est également disponible en…

Supposons que vous vouliez ajouter une ligne, en bas (ou en haut) de chaque publication, indiquant dans quelles autres langues elle est disponible. Cette fonction ne devrait permettre l’affichage que des publications traduites existantes et si aucune traduction n’est disponible, elle ne devrait rien afficher.

function icl_post_languages(){
 $languages = icl_get_languages('skip_missing=1');
 if(1 < count($languages)){
 echo __('Cette publication est également disponible en : ');
 foreach($languages as $l){
 if(!$l['active']) $langs[] = '<a href="'.$l['url'].'">'.$l['translated_name'].'</a>';
 }
 echo join(', ', $langs);
 }
}

Ce que fait cette fonction est :

  1. Récupérer la liste des langues de WPML –$languages = icl_get_languages(‘skip_missing=1’);
  2. Vérifier qu’il y a plus d’une langue pour cette publication – if(1 < count($languages))
  3. Créer la sortie, en sautant la langue actuellement affichée – if(!$l[‘active’])

Remarques :

  1. La publication passe par gettext. C’est très important pour que cette publication, que vous ajouterez aux publications en différentes langues, apparaisse dans la bonne langue : __(‘Cette publication est aussi disponible en :’) ;
  2. Les noms de langue utilisés sont les noms de langue traduits. Cela garantira que la phrase entière est écrite dans la bonne langue :$l[‘translated_name’]

Le résultat est le suivant :

Message concernant la publication disponible dans d'autres langues
Message concernant la publication disponible dans d’autres langues

Pour inclure cette publication dans les publications, ajoutez un appel à icl_post_languages() depuis single.php.

Liste des noms de langues et des drapeaux pour le pied de page

Même si vous avez un sélecteur de langue en haut de la page, c’est une bonne idée d’ajouter une liste de noms de langues et de drapeaux au pied de page. De nombreuses personnes font immédiatement défiler vers le bas de la page, pour avoir une meilleure idée de ce qui les attend, donc placer un sélecteur de langue bien en vue à cet endroit est susceptible d’aider vos visiteurs étrangers.

function languages_list_footer(){
 $languages = icl_get_languages('skip_missing=0&orderby=code');
 if(!empty($languages)){
 echo '<div id="footer_language_list"><ul>';
 foreach($languages as $l){
 echo '<li>';
 if($l['country_flag_url']){
 if(!$l['active']) echo '<a href="'.$l['url'].'">';
 echo '<img src="'.$l['country_flag_url'].'" height="12" alt="'.$l['language_code'].'" width="18" />';
 if(!$l['active']) echo '</a>';
 }
 if(!$l['active']) echo '<a href="'.$l['url'].'">';
 echo icl_disp_language($l['native_name'], $l['translated_name']);
 if(!$l['active']) echo '</a>';
 echo '</li>';
 }
 echo '</ul></div>';
 }
}

Cette fonction permet de faire ce qui suit :

  1. S’il y a une langue de traduction, elle crée une DIV et démarre une liste non ordonnée :if(!empty($languages)){ echo ‘<div id= »footer_language_list »><ul>’;
  2. Passe en revue chacune des langues et l’ajoute comme élément de liste.
  3. S’il ne s’agit pas de la langue active, elle crée aussi un lien vers cette page dans cette langue : if(!$l[‘active’]) echo ‘<a href= »‘.$l[‘url’].' »>’;
  4. Ajoute le drapeau de la langue :<img src= »‘.$l[‘country_flag_url’].' » alt= »‘.$l[‘language_code’].' » width= »18″ height= »12″ />
  5. Ajoute les noms de la langue originale et celle de la langue traduite, s’ils sont différents :echo icl_disp_language($l[‘native_name’], $l[‘translated_name’]);

La fonction icl_disp_language() est créée par WPML. Elle vérifie si les deux arguments (native_language_name, translated_language_name) sont différents. Si c’est le cas, elle affiche les deux, sinon, elle n’en affiche qu’un.

Nous devrions aussi ajouter du CSS pour styliser cette liste de langues. Ce CSS va centrer la liste des langues dans votre pied de page et la formater un peu :

#footer_language_list{
 margin-bottom: 25px;
 text-align: center;
}

#footer_language_list ul{
 list-style: none;
 margin:0;
 padding:0;
}

#footer_language_list ul li img{
 margin-right:5px;
}

#footer_language_list ul li{
 display:inline;
 margin:0 5px 0 5px;
 padding:0;
}

#footer_language_list ul li a, #footer_language_list ul li a:visited{
 color: #fff;
 text-decoration:underline;
}

#footer_language_list ul li a:hover, #footer_language_list ul li a:active{
 color: #fff;
}

Voici le sélecteur de langue :

Pied de page avec langues
Pied de page avec langues

Pour l’ajouter à votre thème, ajoutez l’appel à languages_list_footer dans le fichier footer.php .

* Remarque : vous pouvez facilement transformer ce sélecteur de langue horizontal en un sélecteur de langue vertical. Il suffit de supprimer l’instruction display: inline du CSS.

Sélecteur de langue avec drapeaux seulement

Fonction simple d’affichage des drapeaux liés aux traductions de la page en cours.

Language selector with flags only
function language_selector_flags(){
    $languages = icl_get_languages('skip_missing=0&orderby=code');
    if(!empty($languages)){
        foreach($languages as $l){
            if(!$l['active']) echo '<a class="wpml-ls-item" href="'.$l['url'].'">';
            echo '<img src="'.$l['country_flag_url'].'" height="12" alt="'.$l['language_code'].'" width="18" />';
            if(!$l['active']) echo '</a>';
        }
    }
}

Le rendu de cette fonction doit être stylisé séparément. Par exemple, placer la fonction dans un bloc div et définir des styles personnalisés pour les balises img.

<div id="flags_language_selector"><?php language_selector_flags(); ?></div >

Le CSS :

#flags_language_selector img{
 margin:1px;
 border:1px solid #333;
}
Sélecteur de langue Drapeaux

Sélecteur de langue affichant uniquement les langues inactives

L’exemple de code de cet article peut être utilisé pour créer un sélecteur de langue avec les caractéristiques suivantes :

  • S’affiche horizontalement
  • S’attache à un menu spécifique
  • Utilise des drapeaux de langue et les noms d’origine
  • N’affiche que les langues inactives

Vous devriez ajouter ce code au fichier functions.php de votre thème. La meilleure solution est de l’ajouter au fichier functions.php du thème enfant de votre thème.

Par défaut, le code fonctionne bien avec les thèmes par défaut de WordPress (Twenty Sixteen, Twenty Fifteen, etc.) avec theme_location == ‘primary’.

Il s'agit du sélecteur de langue du thème Twenty Sixteen lorsque la langue actuelle est l'anglais.
C’est le résultat dans le thème Twenty Sixteen lorsque la langue actuelle est l’anglais.

Faire fonctionner le code avec votre thème

D’autres thèmes peuvent utiliser d’autres emplacements de thèmes. Par conséquent, si le code ne fonctionne pas pour votre thème, veuillez suivre les étapes suivantes pour le faire fonctionner.

  1. Décommentez la ligne En d’autres termes, supprimez les doubles barres obliques (//) au début de la ligne contenant le code mentionné ci-dessus.
  2. Consultez l’interface utilisateur de votre site. Vous verrez les emplacements des thèmes comme [theme_location] => my-theme-location.
  3. Sélectionnez l’emplacement du menu que vous voulez, par exemple : my-theme-location, et changez la ligne :
if ( $languages && $args->theme_location == 'primary') {

Pour :

if ( $languages && $args->theme_location == 'my-theme-location') {

Si vous n’êtes pas sûr de savoir quel est le bon endroit à utiliser, vous pouvez simplement essayer les emplacements du menu un par un.

  1. Revenez sur les changements que nous avons faits à la première étape, de sorte que la ligne soit la même que le code original.

Le code

// Filtrer wp_nav_menu() pour ajouter des liens supplémentaires et d'autres rendus
// Afficher seulement l'autre langue dans le sélecteur de langue
// Utiliser le nouveau filtre : https://wpml.org/wpml-hook/wpml_active_languages/ 
add_filter('wp_nav_menu_items', 'new_nav_menu_items', 10, 2);
function new_nav_menu_items($items, $args) {
 // Décommenter ceci pour trouver l'emplacement du menu de votre thème
 //echo "args:<pre>"; print_r($args); echo "</pre>";

 // get languages
 $languages = apply_filters( 'wpml_active_languages', NULL, 'skip_missing=0' );

 // add $args->theme_location == 'primary-menu' au conditionnel si nous voulons spécifier l'emplacement du menu.

 if ( $languages && $args->theme_location == 'primary') {

 if(!empty($languages)){

 foreach($languages as $l){
 if(!$l['active']){
 // drapeau et langue originale
 $items = $items . '
<li class="menu-item"><a href="' . $l['url'] . '"><img src="' . $l['country_flag_url'] . '" height="12" alt="' . $l['language_code'] . '" width="18" /> ' . $l['native_name'] . '</a></li>

';
 //seulement drapeau
 //$items = $items . '
<li class="menu-item menu-item-language"><a href="' . $l['url'] . '"><img src="' . $l['country_flag_url'] . '" height="12" alt="' . $l['language_code'] . '" width="18" /></a></li>

';
 }
 }
 }
 }

 return $items;
}

Remplacement des drapeaux des pays et changement des noms de langues

WPML comprend une interface graphique pour l’édition des informations sur la langue. Accédez à WPML->Langues et cliquez sur Modifier les langues. Vous pourrez changer les noms des langues, éditer leurs valeurs locales et choisir différents drapeaux. .

'skip_missing=0&orderby=name'