Le bandiere dei paesi in un menu del sito sono una scelta discutibile. Metà del pubblico vede la Union Jack come la propria bandiera, mentre l'altra metà no. La bandiera degli Stati Uniti al posto dell'inglese? Ignora completamente canadesi e australiani. E i nomi completi delle lingue ("Русский," "Українська," "English") occupano metà del menu su uno schermo mobile.

Un formato compatto RU | UK | EN risolve entrambi i problemi: si legge all'istante, non occupa quasi spazio e non è legato alla geografia. Sono codici ISO standard di due lettere per la lingua, comprensibili senza traduzione in qualsiasi paese.

Di seguito sono riportati due modi per sostituire il selettore WPML predefinito con codici ISO. Il primo utilizza un filtro sugli elementi del menu (un semplice inserimento in functions.php). Il secondo è uno shortcode che visualizza il selettore in qualsiasi punto del sito.

💡 Panoramica rapida:

• Metodo 1: sostituzione degli elementi del menu di navigazione tramite l'hook wp_nav_menu_items, per un selettore integrato nell'header
• Metodo 2: lo shortcode [wpml_custom_lang_ISO], inseribile ovunque nel tema (widget, footer, menu mobile)
• CSS: stile del separatore |, occultamento della lingua attiva, design responsive

Come appare il risultato

Una volta aggiunto il codice, il selettore di lingua viene visualizzato nel formato RU | UK | EN, breve e pulito. La lingua attiva viene evidenziata o nascosta (controllato tramite CSS), mentre le lingue rimanenti sono cliccabili e portano alla traduzione corrispondente della pagina.

Il codice utilizza la funzione integrata di WPML icl_get_languages(), che restituisce un array delle lingue attive del sito con tutti i dati rilevanti: URL di traduzione, codice lingua, stato attivo. Non ci sono dipendenze di terze parti, solo l'API di WPML.

Metodo 1: sostituzione degli elementi del menu tramite wp_nav_menu_items

Questo metodo intercetta l'output del menu di navigazione di WordPress e sostituisce gli elementi di lingua predefiniti con codici ISO compatti e un separatore.

Dove inserirlo: nel file functions.php del child theme oppure tramite il plugin Code Snippets (più sicuro, non verrà cancellato quando il tema si aggiorna).

Prima di aggiungere il codice, esegui un backup completo del sito. Il codice non è distruttivo e si limita ad aggiungere output, ma un backup è buona norma ogni volta che si modifica functions.php.

1
/**
2
 * Sostituisce le voci delle lingue WPML nel menu con i codici ISO.
3
 * theme_location va impostato in base al vostro 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
    // Verifichiamo che la funzione WPML sia disponibile
9
    if ( ! function_exists( 'icl_get_languages' ) ) {
10
        return $items;
11
    }
12
 
13
    $languages = icl_get_languages( 'skip_missing=0&orderby=code' );
14
 
15
    // Indicate qui il theme_location del vostro menu (ad esempio '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
    // Rimuoviamo l'ultimo separatore
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
}

Cosa succede qui. L'hook wp_nav_menu_items si attiva ogni volta che viene costruito un menu del sito. La condizione $args->theme_location !== 'primary' limita la sostituzione al solo menu che ti interessa; sostituisci 'primary' con il theme_location del tuo menu (verifica wp_nav_menu() nel tuo template o nel pannello di amministrazione sotto Aspetto > Menu > Posizioni di visualizzazione).

La funzione icl_get_languages('skip_missing=0') recupera tutte le lingue pubblicate. skip_missing=0 significa "mostra la lingua anche se la pagina corrente non ha una traduzione", per cui l'utente arriva sulla home page di quella lingua invece che su un 404.

strtoupper() converte i codici in maiuscolo: ru → RU. Se ti serve il minuscolo, rimuovi la chiamata.

Metodo 2: lo shortcode [wpml_custom_lang_ISO]

Lo shortcode è più versatile: inserisci [wpml_custom_lang_ISO] ovunque, in un widget, nel corpo di una pagina o in un template PHP tramite do_shortcode(). Funziona bene per un menu mobile, un footer o un blocco sotto l'header.

Dove inserirlo: in functions.php (lo stesso file del Metodo 1). Puoi tenere attivi entrambi i metodi contemporaneamente; non entreranno in conflitto.

1
/**
2
 * Lo shortcode [wpml_custom_lang_ISO] mostra il selettore delle lingue in formato ISO.
3
 * Inserimento: [wpml_custom_lang_ISO] nel testo oppure <?php echo do_shortcode('[wpml_custom_lang_ISO]'); ?> nel template.
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
    // Rimuoviamo l'ultimo separatore
32
    $output = rtrim( $output, '<span class="wpml-lang-sep">|</span>' );
33
 
34
    return '<div class="wpml-iso-lang-switcher">' . $output . '</div>';
35
}

La differenza rispetto al Metodo 1: lo shortcode restituisce una stringa HTML invece di aggiungere elementi a un menu. Questo significa che puoi inserirlo ovunque, senza alcuna dipendenza da theme_location. Il parametro order=desc inverte l'ordine delle lingue (opzionale; rimuovilo se non ti serve).

Come trovare il theme_location del tuo menu

Se stai usando il Metodo 1, devi specificare esattamente l'argomento theme_location. Apri il file template in cui viene chiamato il menu (di solito header.php) e cerca una riga simile a:

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

Il valore tra apici singoli, ad esempio 'primary', è il tuo theme_location. I nomi comuni sono primary per il menu principale e top per la barra superiore. Sostituisci il tuo nella condizione $args->theme_location !== 'primary' nel codice sopra.

Un altro modo: nel pannello di amministrazione, vai su Aspetto > Menu > la scheda "Gestisci posizioni", che elenca tutti i valori theme_location registrati per il tuo tema.

Stili CSS per il selettore

Un set minimo di stili per mantenere il selettore pulito. Aggiungili in Aspetto > Personalizza > CSS aggiuntivo oppure nel file style.css del child theme.

1
/* Contenitore del selettore */
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
/* Link e lingua attiva */
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
/* Separatore */
31
.wpml-lang-sep {
32
    margin: 0 6px;
33
    color: #ccc;
34
    font-weight: 400;
35
}
36
 
37
/* Nascondere la lingua attiva e il separatore successivo */
38
.wpml-lang-item.active,
39
.wpml-lang-item.active + .wpml-lang-sep {
40
    display: none;
41
}
42
 
43
/* Adattamento 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
}

Il trucco chiave qui: il selettore .wpml-lang-item.active + .wpml-lang-sep nasconde il separatore immediatamente dopo la lingua attiva. Se la lingua attiva è nascosta, scompare anche il separatore accanto ad essa, così non resta nessun | penzolante all'inizio o alla fine della riga.

Il font Oswald è usato come esempio. Sostituiscilo con il font del tuo tema oppure rimuovi completamente la riga font-family per ereditarlo dal tema. Dopo aver aggiunto il CSS, testa il selettore alle risoluzioni mobile usando gli strumenti per sviluppatori (F12 > Attiva/disattiva la barra degli strumenti dei dispositivi).

⁉️🤔 Domande frequenti

Posso mostrare i nomi delle lingue invece dei codici ISO?

> Sì, sostituisci $lang['language_code'] con $lang['native_name'] in entrambe le varianti di codice. Otterrai "Русский | English | Українська." In alternativa, $lang['translated_name'] restituisce i nomi nella lingua della pagina corrente: se il visitatore si trova sulla versione inglese, vedrà "Russian | English | Ukrainian." Tutte le chiavi dell'array disponibili sono elencate nella documentazione ufficiale di WPML per la funzione icl_get_languages().

Come rimuovo una lingua che non ha una traduzione per la pagina corrente?

Cambia il parametro skip_missing=0 in skip_missing=1 nella chiamata a icl_get_languages(). Le lingue senza traduzione scompariranno semplicemente dal selettore, e non ci sarà nessun link rotto al loro posto. Questo è comodo per i siti in cui non tutte le pagine sono tradotte: il menu resta pulito, senza link che portano alla home page o a un 404.

Il selettore non appare. Cosa c'è che non va?

Controlla tre cose. Primo, il plugin WPML è attivo e le lingue sono state aggiunte in WPML > Lingue? Secondo, il theme_location nel codice corrisponde al menu effettivo (Metodo 1)? Terzo, lo shortcode viene chiamato tramite do_shortcode() se lo stai usando in un template PHP anziché nel contenuto della pagina (Metodo 2)? Se tutto è corretto ma il selettore ancora non appare, attiva WP_DEBUG in wp-config.php e controlla error.log; potrebbe esserci un errore di sintassi in functions.php.

Come aggiungo bandiere accanto ai codici, ad esempio 🇬🇧 + EN?

Aggiungi un'emoji di bandiera prima di $code con una condizione: if ($lang['language_code'] === 'en') $code = '🇬🇧 ' . $code;. Tieni presente, però, che le emoji di bandiera potrebbero non essere visualizzate su Windows. Un approccio più affidabile è usare bandiere CSS tramite ::before con background-image, oppure le bandiere integrate di WPML.

Questo codice funzionerà con Polylang o TranslatePress?

No: icl_get_languages() è specificamente un'API di WPML. Per Polylang la funzione equivalente è pll_the_languages(), mentre TranslatePress ha il proprio set di hook. La logica è la stessa, ma i nomi delle funzioni sono diversi.

Conclusioni: menu o shortcode

Il metodo del filtro sul menu è pensato per chi ha bisogno del selettore esclusivamente nella navigazione e conosce con certezza il proprio theme_location. Sforzo minimo: inserisci il codice, sostituisci il nome della posizione, fatto. Lo svantaggio: è legato a un singolo menu; per un secondo menu dovresti duplicare l'hook con un theme_location diverso.

Lo shortcode è la scelta giusta se il selettore deve trovarsi in un punto non standard: un pannello mobile, un footer o una sidebar. Aggiungi lo shortcode a un widget "HTML" o a un template e controlla la sua posizione tramite gli strumenti standard di WordPress. Il vantaggio: puoi inserirlo in più punti senza duplicare il codice.

In pratica, entrambi i metodi convivono tranquillamente in un unico functions.php. Configura il filtro per il menu principale e lo shortcode per la versione mobile, e otterrai un pulito RU | UK | EN su ogni dispositivo. E se ti serve il selettore una terza volta (ad esempio nel footer), aggiungi semplicemente un altro do_shortcode('[wpml_custom_lang_ISO]') al template appropriato.

Quale formato di selettore usi: bandiere, nomi o codici ISO? Condividi la tua esperienza nella configurazione di siti multilingue nei commenti; sarebbe interessante confrontare gli approcci.