Les drapeaux de pays dans le menu d'un site sont un choix discutable. La moitié du public voit l'Union Jack comme son propre drapeau, tandis que l'autre moitié non. Le drapeau américain représentant l'anglais? Cela exclut totalement les Canadiens et les Australiens. Et les noms de langue complets («Русский», «Українська», «English») occupent la moitié du menu sur un écran mobile.

Un format compact RU | UK | EN résout les deux problèmes: il se lit instantanément, ne prend presque pas de place, et n'est pas lié à la géographie. Ce sont des codes de langue ISO à deux lettres standard, compris sans traduction dans n'importe quel pays.

Voici deux façons de remplacer le sélecteur WPML par défaut par des codes ISO. La première utilise un filtre sur les éléments de menu (une simple insertion dans functions.php). La seconde est un shortcode qui affiche le sélecteur n'importe où sur le site.

💡 Aperçu rapide:

• Méthode 1: remplacement des éléments du menu de navigation via le hook wp_nav_menu_items, pour un sélecteur intégré dans l'en-tête
• Méthode 2: le shortcode [wpml_custom_lang_ISO], insérable n'importe où dans le thème (widget, pied de page, menu mobile)
• CSS: mise en forme du séparateur |, masquage de la langue active, design responsive

À quoi ressemble le résultat

Une fois le code ajouté, le sélecteur de langue s'affiche au format RU | UK | EN, court et net. La langue active est mise en évidence ou masquée (contrôlé via CSS), tandis que les autres langues sont cliquables et mènent à la traduction correspondante de la page.

Le code utilise la fonction intégrée de WPML icl_get_languages(), qui renvoie un tableau des langues actives du site avec toutes les données pertinentes: URL de traduction, code de langue, statut actif. Il n'y a aucune dépendance tierce, uniquement l'API propre de WPML.

Méthode 1: remplacement des éléments de menu via wp_nav_menu_items

Cette méthode intercepte la sortie du menu de navigation WordPress et remplace les éléments de langue par défaut par des codes ISO compacts et un séparateur.

Où l'insérer: dans le fichier functions.php du thème enfant ou via le plugin Code Snippets (plus sûr, il ne sera pas effacé lors des mises à jour du thème).

Avant d'ajouter le code, effectuez une sauvegarde complète du site. Le code n'est pas destructif et se contente d'ajouter de la sortie, mais une sauvegarde est une bonne pratique chaque fois que vous modifiez functions.php.

1
/**
2
 * Remplace les éléments de langue WPML dans le menu par des codes ISO.
3
 * theme_location est défini pour votre menu.
4
 */
5
add_filter( 'wp_nav_menu_items', 'wpml_iso_menu_items', 10, 2 );
6
 
7
function wpml_iso_menu_items( $items, $args ) {
8
    // Vérifions que la fonction WPML est disponible
9
    if ( ! function_exists( 'icl_get_languages' ) ) {
10
        return $items;
11
    }
12
 
13
    $languages = icl_get_languages( 'skip_missing=0&orderby=code' );
14
 
15
    // Indiquez ici le theme_location de votre menu (par exemple 'primary', 'top')
16
    if ( empty( $languages ) || $args->theme_location !== 'primary' ) {
17
        return $items;
18
    }
19
 
20
    $lang_links = '';
21
 
22
    foreach ( $languages as $lang ) {
23
        $code = strtoupper( $lang['language_code'] );
24
 
25
        if ( $lang['active'] ) {
26
            $lang_links .= '<span class="wpml-lang-item active">' . $code . '</span>';
27
        } else {
28
            $lang_links .= '<a href="' . esc_url( $lang['url'] ) . '" class="wpml-lang-item">' . $code . '</a>';
29
        }
30
 
31
        $lang_links .= '<span class="wpml-lang-sep">|</span>';
32
    }
33
 
34
    // Supprimons le dernier séparateur
35
    $lang_links = rtrim( $lang_links, '<span class="wpml-lang-sep">|</span>' );
36
 
37
    return $items . '<li class="menu-item wpml-iso-switcher">' . $lang_links . '</li>';
38
}

Ce qui se passe ici. Le hook wp_nav_menu_items se déclenche lors de la construction de chaque menu du site. La condition $args->theme_location !== 'primary' restreint le remplacement au seul menu dont vous avez besoin; remplacez 'primary' par le theme_location de votre menu (vérifiez wp_nav_menu() dans votre template ou dans l'administration sous Apparence > Menus > Emplacements d'affichage).

La fonction icl_get_languages('skip_missing=0') récupère toutes les langues publiées. skip_missing=0 signifie «afficher la langue même si la page actuelle n'a pas de traduction», de sorte que l'utilisateur atterrit sur la page d'accueil de cette langue plutôt que sur une erreur 404.

strtoupper() convertit les codes en majuscules: ru → RU. Si vous avez besoin de minuscules, supprimez cet appel.

Méthode 2: le shortcode [wpml_custom_lang_ISO]

Le shortcode est plus polyvalent: insérez [wpml_custom_lang_ISO] n'importe où, un widget, le corps d'une page, ou un template PHP via do_shortcode(). Il convient bien à un menu mobile, un pied de page, ou un bloc sous l'en-tête.

Où l'insérer: dans functions.php (le même fichier que pour la méthode 1). Vous pouvez garder les deux méthodes actives en même temps; elles n'entreront pas en conflit.

1
/**
2
 * Le shortcode [wpml_custom_lang_ISO] — affiche le sélecteur de langue au format ISO.
3
 * Insertion : [wpml_custom_lang_ISO] dans le texte ou <?php echo do_shortcode('[wpml_custom_lang_ISO]'); ?> dans le modèle.
4
 */
5
add_shortcode( 'wpml_custom_lang_ISO', 'wpml_shortcode_lang_iso' );
6
 
7
function wpml_shortcode_lang_iso() {
8
    if ( ! function_exists( 'icl_get_languages' ) ) {
9
        return '';
10
    }
11
 
12
    $languages = icl_get_languages( 'skip_missing=0&orderby=code&order=desc' );
13
    $output    = '';
14
 
15
    if ( empty( $languages ) ) {
16
        return '';
17
    }
18
 
19
    foreach ( $languages as $lang ) {
20
        $code = strtoupper( $lang['language_code'] );
21
 
22
        if ( $lang['active'] ) {
23
            $output .= '<span class="wpml-lang-item active">' . $code . '</span>';
24
        } else {
25
            $output .= '<a href="' . esc_url( $lang['url'] ) . '" class="wpml-lang-item">' . $code . '</a>';
26
        }
27
 
28
        $output .= '<span class="wpml-lang-sep">|</span>';
29
    }
30
 
31
    // Supprimons le dernier séparateur
32
    $output = rtrim( $output, '<span class="wpml-lang-sep">|</span>' );
33
 
34
    return '<div class="wpml-iso-lang-switcher">' . $output . '</div>';
35
}

La différence avec la méthode 1: le shortcode renvoie une chaîne HTML au lieu d'ajouter des éléments à un menu. Cela signifie que vous pouvez le placer n'importe où, sans dépendance au theme_location. Le paramètre order=desc inverse l'ordre des langues (facultatif; supprimez-le si vous n'en avez pas besoin).

Comment trouver le theme_location de votre menu

Si vous utilisez la méthode 1, vous devez spécifier précisément l'argument theme_location. Ouvrez le fichier de template où le menu est appelé (généralement header.php) et repérez une ligne du type:

1
wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) );

La valeur entre guillemets simples, par exemple 'primary', est votre theme_location. Les noms courants sont primary pour le menu principal et top pour la barre supérieure. Remplacez-la par la vôtre dans la condition $args->theme_location !== 'primary' du code ci-dessus.

Autre méthode: dans l'administration, allez dans Apparence > Menus > l'onglet «Gérer les emplacements», qui liste toutes les valeurs theme_location enregistrées pour votre thème.

Styles CSS pour le sélecteur

Un ensemble minimal de styles pour garder un sélecteur net. Ajoutez-les dans Apparence > Personnaliser > CSS supplémentaire ou dans le fichier style.css du thème enfant.

1
/* Conteneur du sélecteur */
2
.wpml-iso-lang-switcher,
3
.wpml-iso-switcher {
4
    display: flex;
5
    align-items: center;
6
    gap: 0;
7
    font-family: 'Oswald', sans-serif;
8
    font-size: 16px;
9
    font-weight: 600;
10
    text-transform: uppercase;
11
}
12
 
13
/* Liens et langue active */
14
.wpml-lang-item {
15
    color: #33445d;
16
    text-decoration: none;
17
    padding: 4px 2px;
18
    transition: color 0.2s;
19
}
20
 
21
a.wpml-lang-item:hover {
22
    color: #0073aa;
23
}
24
 
25
.wpml-lang-item.active {
26
    color: #999;
27
    cursor: default;
28
}
29
 
30
/* Séparateur */
31
.wpml-lang-sep {
32
    margin: 0 6px;
33
    color: #ccc;
34
    font-weight: 400;
35
}
36
 
37
/* Masquer la langue active et le séparateur qui la suit */
38
.wpml-lang-item.active,
39
.wpml-lang-item.active + .wpml-lang-sep {
40
    display: none;
41
}
42
 
43
/* Adaptation mobile */
44
@media screen and (max-width: 768px) {
45
    .wpml-iso-lang-switcher,
46
    .wpml-iso-switcher {
47
        font-size: 18px;
48
        padding: 8px 0;
49
    }
50
}

L'astuce clé ici: le sélecteur .wpml-lang-item.active + .wpml-lang-sep masque le séparateur juste après la langue active. Si la langue active est masquée, le séparateur voisin disparaît également, de sorte qu'il n'y a pas de | en trop au début ou à la fin de la ligne.

La police Oswald est utilisée à titre d'exemple. Remplacez-la par la police de votre thème ou supprimez complètement la ligne font-family pour hériter du thème. Après avoir ajouté le CSS, testez le sélecteur en résolution mobile avec les outils de développement (F12 > Afficher la barre d'outils de l'appareil).

⁉️🤔 Questions fréquentes

Puis-je afficher les noms des langues au lieu des codes ISO?

> Oui, remplacez $lang['language_code'] par $lang['native_name'] dans les deux variantes de code. Vous obtiendrez «Русский | English | Українська». Autrement, $lang['translated_name'] affiche les noms dans la langue de la page actuelle: si le visiteur est sur la version anglaise, il verra «Russian | English | Ukrainian». Toutes les clés de tableau disponibles sont répertoriées dans la documentation officielle de WPML pour la fonction icl_get_languages().

Comment supprimer une langue qui n'a pas de traduction pour la page actuelle?

Changez le paramètre skip_missing=0 en skip_missing=1 dans l'appel à icl_get_languages(). Les langues sans traduction disparaîtront simplement du sélecteur, sans lien cassé à leur place. C'est pratique pour les sites où toutes les pages ne sont pas traduites: le menu reste net, sans lien menant à la page d'accueil ou à une erreur 404.

Le sélecteur n'apparaît pas. Quel est le problème?

Vérifiez trois choses. Premièrement, le plugin WPML est-il actif et les langues sont-elles ajoutées sous WPML > Langues? Deuxièmement, le theme_location dans le code correspond-il au menu réel (méthode 1)? Troisièmement, le shortcode est-il appelé via do_shortcode() si vous l'utilisez dans un template PHP plutôt que dans le contenu d'une page (méthode 2)? Si tout est correct mais que le sélecteur ne s'affiche toujours pas, activez WP_DEBUG dans wp-config.php et consultez error.log; il peut y avoir une erreur de syntaxe dans functions.php.

Comment ajouter des drapeaux à côté des codes, par exemple 🇬🇧 + EN?

Ajoutez un emoji de drapeau avant $code avec une condition: if ($lang['language_code'] === 'en') $code = '🇬🇧 ' . $code;. Gardez toutefois à l'esprit que les emojis de drapeau peuvent ne pas s'afficher sous Windows. Une approche plus fiable consiste à utiliser des drapeaux CSS via ::before avec background-image, ou les drapeaux intégrés de WPML.

Ce code fonctionnera-t-il avec Polylang ou TranslatePress?

Non: icl_get_languages() est spécifiquement une API de WPML. Pour Polylang, la fonction équivalente est pll_the_languages(), et TranslatePress a son propre ensemble de hooks. La logique est la même, mais les noms de fonctions diffèrent.

À retenir: menu ou shortcode

La méthode du filtre de menu convient à ceux qui ont besoin du sélecteur strictement dans la navigation et connaissent leur theme_location avec certitude. Effort minimal: insérez le code, remplacez le nom de l'emplacement, et c'est terminé. L'inconvénient: elle est liée à un seul menu; pour un second, il faudrait dupliquer le hook avec un theme_location différent.

Le shortcode est la solution à privilégier si le sélecteur doit se trouver dans un emplacement non standard: un panneau mobile, un pied de page ou une barre latérale. Ajoutez le shortcode à un widget «HTML» ou à un template, et contrôlez sa position via les outils WordPress standard. L'avantage: vous pouvez l'insérer à plusieurs endroits sans dupliquer le code.

En pratique, les deux méthodes coexistent sans problème dans un seul functions.php. Configurez le filtre pour le menu principal et le shortcode pour la version mobile, et vous obtenez un RU | UK | EN net sur chaque appareil. Et si vous avez besoin du sélecteur une troisième fois (par exemple dans le pied de page), ajoutez simplement un autre do_shortcode('[wpml_custom_lang_ISO]') au template approprié.

Quel format de sélecteur utilisez-vous: drapeaux, noms ou codes ISO? Partagez votre expérience de configuration de sites multilingues dans les commentaires; il serait intéressant de comparer les approches.