WPML est doté de son propre sélecteur de langue, implémenté sous forme de liste de langues déroulante. Il est assez flexible, mais pas toujours suffisant.

Vous pouvez créer vos propres sélecteurs de langue personnalisés et les insérer dans le thème. Je vais vous montrer comment ajouter une liste des langues disponibles pour les publications et une liste de langues pour le pied de page.

Obtenir la liste des (autres) langues

Utilisez icl_get_languages​() pour obtenir une liste des traductions pour n’importe quelle page, en utilisant :

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

* N=0/1
* KEY=id/code/name (nom -> nom_traduit), (défaut : id)
* DIR=asc/desc (défaut : asc)
* link_empty_to = str (défaut : vide, fonctionne avec skip_missing=0 et permet d’utiliser des liens personnalisés pour les langues n’ayant pas de traduction pour l’élément actuel. {$lang} peut être utilisé comme espace réservé pour le code de la langue)

Remarques :

  • Le paramètre skip_missing indique à la fonction comment traiter les langues n’ayant pas de traduction.
  • La combinaison d’orderby et d’ordre permet de créer le sélecteur de langue sous forme de liste déroulante ou les sélecteurs de langue affichant les langues toujours dans le même ordre.

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

Array
(
 [0] => 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
  )

 [1] => 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
  )

 [2] => 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 sa propre gamme de paramètres que votre fonction de thème peut utiliser pour créer un sélecteur de langue.

  • id : identifiant de référence interne
  • active : il s’agit de la langue active actuellement (une seule langue est active)
  • native_name : le nom de la langue dans la langue du pays (non traduit)
  • translated_name : le nom traduit de la langue active actuellement
  • 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 s’il manque la traduction de cet élément, 0 si elle existe.

Gestion des traductions manquantes

Certaines pages ne peuvent pas être traduites dans toutes les langues. Vous pouvez indiquer à icl_get_languages quels résultats afficher pour les langues sans traduction.

Si ‘skip_missing=1’, ces langues ne s’afficheront pas dans les résultats. Si ‘skip_missing=0’, toutes les langues s’afficheront et les langues sans traduction redirigeront vers la page d’accueil dans cette langue.

Comment les utiliser dans les fonctions de votre thème

Vous pouvez créer vos propres sélecteurs de langue, selon vos propres exigences. Ici, nous allons vous montrer deux façons populaires de le faire.

Les exemples de fonctions PHP que nous montrons ici devraient aller dans votre fichier functions.php (dans le dossier du thème), pas encore ajouté au plug-in.

Cette publication est également disponible en…

Supposons que vous désiriez ajouter une ligne au bas (ou au haut) de chaque publication, indiquant dans quelles autres langues elle est disponible. Cette fonction ne devrait renvoyer que les publications traduites existantes et si aucune traduction n’est disponible, elle ne devrait renvoyer aucun résultat.

function icl_post_languages(){
  $languages = icl_get_languages('skip_missing=1');
  if(1 < count($languages)){
    echo __('This post is also available in: ');
    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. obtenir la liste des langues de WPML : $languages = icl_get_languages(‘skip_missing=1’);
  2. vérifier qu’il y ait plus d’une langue pour cette publication : if(1 < count($languages))
  3. créer le résultat, en sautant la langue d’affichage actuelle : if(!$l[‘active’])

Remarques :

  1. Le message passe par gettext. Ceci est très important car il permet que ce message, que vous ajouterez à des publications dans différentes langues, apparaisse dans la bonne langue : __ (‘Cette publication est également disponible en :’);
  2. Les noms des langues utilisés sont les noms traduits des langues. Cela permettra de garantir que toute la phrase soit écrite dans la bonne langue : $l[‘translated_name’]

Le résultat est le suivant : 

Message relatif aux publications disponibles dans d'autres langues
Message relatif aux publications disponibles dans d'autres langues

Pour inclure ce message dans les publications, ajoutez un appel à icl_post_languages​​() de single.php.

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

Même s’il existe un sélecteur de langue en haut de la page, il est judicieux d’ajouter une liste des noms de langues et des drapeaux au pied de page. Beaucoup de gens font immédiatement défiler vers le bas de la page pour avoir une meilleure idée de ce que le site réserve. Y positionner un sélecteur de langue fera une bonne impression sur vos visiteurs étrangers et en facilitera leur navigation.

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 fait ce qui suit :

  1. S’il existe une langue de traduction, elle crée un DIV et commence une liste non ordonnée : if(!empty($languages)){ echo ‘<div id= »footer_language_list »><ul>’;
  2. Elle passe en revue chacune des langues et l’ajoute comme élément de la liste.
  3. Si ce n’est pas la langue active, elle créé également un lien vers cette page dans cette langue : if(!$l[‘active’]) echo ‘<a href= »‘.$l[‘url’].' »>’;
  4. Elle ajoute le drapeau de la langue : <img src= »‘.$l[‘country_flag_url’].' » alt= »‘.$l[‘language_code’].' » width= »18″ height= »12″ />
  5. Elle ajoute aussi bien les noms originaux que ceux traduits des langues, 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 (nom_original_langue, nom_traduit_langue) sont différents. Si c’est le cas, elle les renvoie tous les deux, sinon elle n’en renverra qu’un.

Nous devrions également ajouter un peu de CSS pour donner du style à la liste des langues. Ce CSS centrera la liste des langues dans votre pied de page et la formatera 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 :

Langues dans le pied de page
Langues dans le pied de page

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

* Remarque : Vous pouvez facilement modifier ce sélecteur de langue horizontal en sélecteur de langue vertical. Il suffit de supprimer display: inline du CSS.

Sélecteur de langue avec drapeaux uniquement

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

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 href="'.$l['url'].'">';
            echo '<img src="'.$l['country_flag_url'].'" height="12" alt="'.$l['language_code'].'" width="18" />';
            if(!$l['active']) echo '</a>';
        }
    }
}

La sortie de cette fonction doit être appelée séparément. Par exemple en plaçant la fonction dans un bloc div et en définissant 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

Remplacer les drapeaux des pays et changer les noms des langues

WPML comprend une interface graphique pour l’édition des informations de langue. Rendez-vous sur WPML-> Langues et cliquez sur Modifier les langues. Vous serez en mesure de changer les noms des langues, de modifier les valeurs de leurs paramètres régionaux et de choisir différents drapeaux.

'skip_missing=0&orderby=name'