Come Aggiungere il Selettore di Lingua al Sito WordPress con TranslatePress

Come Aggiungere il Selettore di Lingua al Sito WordPress con TranslatePress

Il selettore di lingua rappresenta il punto di accesso principale per i visitatori internazionali del tuo sito. Un language switcher ben posizionato e graficamente curato migliora la user experience, riduce il tasso di rimbalzo e aumenta il tempo di permanenza degli utenti stranieri. In questa guida vedremo tutte le opzioni offerte da TranslatePress per aggiungere, personalizzare e ottimizzare il selettore di lingua sul tuo sito WordPress.

Le Tipologie di Language Switcher Disponibili

TranslatePress mette a disposizione diverse modalità per inserire il selettore di lingua. Ogni opzione presenta vantaggi specifici a seconda del design del sito e del comportamento previsto dei visitatori.

Selettore Flottante (Floating Language Switcher)

Il selettore flottante appare come un piccolo elemento posizionato in un angolo dello schermo (tipicamente in basso a destra o in basso a sinistra) che rimane visibile durante lo scroll della pagina. Questa risulta la opzione predefinita e la scelta consigliata per la maggior parte dei siti.

Per attivare il selettore flottante, naviga su Impostazioni → TranslatePress → Generale e nella sezione Language Switcher seleziona Floating language selection. Puoi scegliere tra diverse posizioni:

• Bottom right — angolo in basso a destra, la posizione standard
• Bottom left — angolo in basso a sinistra, utile se in basso a destra hai una chat o un pulsante WhatsApp
• Top right / Top left — posizioni meno comuni, utili per layout specifici

Il vantaggio principale del selettore flottante consiste nella visibilità costante: il visitatore lo trova immediatamente senza dover cercare nel menu o scorrere la pagina. Lo svantaggio riguarda la possibile sovrapposizione con altri elementi flottanti come chat widget, cookie banner o pulsanti di contatto rapido.

Selettore nel Menu di Navigazione (Menu Item)

Questa opzione integra il selettore di lingua direttamente nel menu principale del sito WordPress. Il risultato finale mostra le lingue disponibili come voci del menu, con bandiere e nomi delle lingue configurabili.

Per aggiungere il selettore al menu:

1. Vai su Aspetto → Menu nella dashboard di WordPress
2. Nel pannello laterale troverai una nuova sezione chiamata Language Switcher
3. Seleziona le lingue che vuoi mostrare nel menu
4. Clicca su Aggiungi al menu
5. Posiziona le voci di lingua nella posizione desiderata (generalmente alla fine del menu)
6. Salva il menu

Il selettore nel menu risulta la scelta migliore per siti con un design pulito dove il selettore flottante potrebbe risultare troppo invadente. Si integra perfettamente nel layout esistente e non richiede spazio aggiuntivo sullo schermo. Tuttavia, su dispositivi mobili il selettore potrebbe finire nascosto dentro il menu hamburger, rendendolo meno immediato da trovare.

Selettore tramite Shortcode

Lo shortcode [language-switcher] offre la massima flessibilità di posizionamento. Puoi inserirlo in qualsiasi punto del sito: pagine, articoli, widget, header, footer o template del tema.

Varianti dello shortcode disponibili:

• [language-switcher] — selettore standard con tutte le lingue configurate
• [language-switcher display="flags"] — mostra solo le bandiere senza testo
• [language-switcher display="names"] — mostra solo i nomi delle lingue senza bandiere
• [language-switcher display="flags_names"] — mostra bandiere e nomi insieme
• [language-switcher display="short_names"] — mostra i codici abbreviati delle lingue (IT, EN, FR)

Lo shortcode risulta particolarmente utile quando vuoi posizionare il selettore in una zona specifica del template, come la top bar sopra il menu principale, il footer o una sidebar dedicata. Con Elementor o altri page builder, puoi inserire lo shortcode in un widget di testo e posizionarlo con precisione pixel-perfect.

Selettore come Widget

TranslatePress registra automaticamente un widget WordPress che puoi aggiungere alle aree widget del tema (sidebar, footer, header widget area). Il funzionamento risulta simile allo shortcode ma con una interfaccia di configurazione visuale direttamente nel Customizer di WordPress.

Personalizzazione Grafica del Selettore

Un selettore di lingua ben progettato si integra armoniosamente con il design del sito. TranslatePress offre diverse opzioni di personalizzazione visuale, e con un minimo di CSS personalizzato puoi ottenere risultati professionali.

Bandiere, Nomi delle Lingue e Codici

Nelle impostazioni del selettore puoi scegliere cosa mostrare per ogni lingua:

• Solo bandiere — compatto e universalmente riconoscibile, ma potrebbe creare confusione (la bandiera britannica rappresenta inglese o cultura britannica?)
• Solo nomi delle lingue — chiaro e accessibile, occupa maggiore spazio orizzontale
• Bandiere + nomi — la combinazione migliore per la comprensibilità, richiede lo spazio maggiore
• Codici abbreviati — IT, EN, FR, DE — compatti e professionali, adatti a siti con molte lingue

Un aspetto importante riguarda la scelta tra bandiere nazionali e bandiere linguistiche. La lingua spagnola, ad esempio, viene parlata in decine di paesi diversi. Utilizzare la bandiera della Spagna potrebbe non rappresentare adeguatamente i visitatori ispanofoni del Sudamerica. TranslatePress permette di personalizzare la bandiera associata a ogni lingua, risolvendo questo problema.

Immagini delle Bandiere Personalizzate

Se le bandiere predefinite di TranslatePress non soddisfano le tue esigenze, puoi utilizzare bandiere personalizzate. Carica le immagini delle bandiere nella libreria media di WordPress e inserisci il percorso nel campo dedicato nelle impostazioni del plugin. Le dimensioni consigliate per le bandiere personalizzate sono:

• 18×12 pixel — per selettori compatti nel menu
• 24×16 pixel — dimensione standard, buon compromesso tra visibilità e ingombro
• 36×24 pixel — per selettori flottanti o posizioni prominenti

Utilizza il formato PNG con sfondo trasparente per risultati ottimali. Le bandiere in formato SVG garantiscono la nitidezza su ogni dispositivo e risoluzione, ma richiedono che WordPress accetti il caricamento di file SVG (di norma bloccato per ragioni di sicurezza).

Personalizzazione CSS del Selettore di Lingua

Per ottenere un selettore perfettamente integrato nel design del sito, il CSS personalizzato rappresenta lo strumento definitivo. Ecco i selettori CSS principali utilizzati da TranslatePress e come modificarli.

Selettore Flottante — Classi CSS

Il selettore flottante utilizza le seguenti classi CSS:

• .trp-floater-ls-wrap — container esterno del selettore flottante
• .trp-floater-ls-current-language — la lingua attualmente selezionata
• .trp-floater-ls-dropdown — il menu a tendina con le altre lingue
• .trp-ls-link — singolo link di lingua nel dropdown
• .trp-flag-image — immagine della bandiera

Un esempio pratico di personalizzazione CSS per adattare il selettore a un sito con tema scuro:

.trp-floater-ls-wrap { background: #1a1a2e; border: 1px solid #16213e; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); }

.trp-floater-ls-current-language { color: #e2e8f0; padding: 10px 16px; }

.trp-ls-link:hover { background: #16213e; }

Selettore nel Menu — Classi CSS

Quando il selettore viene aggiunto al menu di navigazione, utilizza classi CSS leggermente diverse:

• .menu-item-language — la voce di menu contenente il selettore
• .menu-item-language-current — la voce della lingua attualmente attiva
• .trp-ls-shortcode-current-language — stile della lingua corrente nello shortcode

Il CSS personalizzato va inserito nel campo CSS aggiuntivo del Customizer di WordPress (Aspetto → Personalizza → CSS aggiuntivo) oppure nel file style.css del tema child.

Selettore di Lingua Ottimizzato per Mobile

Su dispositivi mobili, lo spazio sullo schermo risulta limitato e il selettore di lingua deve adattarsi di conseguenza. Ecco le best practice per un language switcher mobile-friendly:

• Selettore flottante con dimensioni ridotte — su mobile riduci il padding e la dimensione del font per evitare che il selettore occupi troppo spazio
• Solo bandiere su mobile — elimina il testo e mostra solo le bandiere per risparmiare spazio orizzontale
• Posizionamento strategico — evita la posizione in basso a destra se il sito ha un pulsante di chat o contatto nella stessa zona
• Touch target adeguato — assicurati che ogni opzione di lingua nel dropdown abbia almeno 44×44 pixel di area cliccabile (standard Apple per la accessibilità touch)

Un esempio di CSS responsive per adattare il selettore ai dispositivi mobili:

@media (max-width: 768px) { .trp-floater-ls-wrap { bottom: 70px !important; right: 10px !important; } .trp-flag-image { width: 20px; height: 14px; } }

Nascondere il Selettore su Pagine Specifiche

In alcuni casi potresti voler nascondere il selettore di lingua su determinate pagine. Ad esempio, landing page per campagne Google Ads specifiche per un paese, pagine di checkout dove il cambio lingua potrebbe causare problemi, oppure pagine di ringraziamento post-acquisto.

Per nascondere il selettore su pagine specifiche, utilizza CSS condizionale basato sulle classi body di WordPress:

.page-id-123 .trp-floater-ls-wrap { display: none !important; }

Oppure, per nascondere il selettore su tutte le pagine WooCommerce di checkout:

.woocommerce-checkout .trp-floater-ls-wrap { display: none !important; }

Se utilizzi un plugin di page builder come Elementor, puoi anche inserire lo shortcode del selettore solo nelle pagine dove desideri mostrarlo, evitando il selettore flottante globale.

Accessibilità del Selettore di Lingua

Un selettore di lingua accessibile permette a tutti gli utenti, inclusi quelli che utilizzano screen reader o navigano da tastiera, di cambiare lingua senza difficoltà. TranslatePress include alcune funzionalità di accessibilità di base, ma puoi migliorarle ulteriormente.

Navigazione da Tastiera

Verifica che il selettore di lingua sia raggiungibile tramite il tasto Tab e che le opzioni del dropdown siano selezionabili con le frecce direzionali e il tasto Invio. Se il selettore flottante non risulta raggiungibile da tastiera, aggiungi un tabindex="0" al container tramite JavaScript personalizzato.

Etichette ARIA

Per migliorare la compatibilità con gli screen reader, aggiungi attributi ARIA al selettore:

• aria-label="Seleziona la lingua" — descrizione del controllo
• aria-expanded="false" — indica se il dropdown risulta aperto o chiuso
• aria-current="true" — identifica la lingua attualmente selezionata
• role="navigation" — identifica il selettore come elemento di navigazione

Contrasto dei Colori

Il testo del selettore di lingua deve rispettare i requisiti WCAG 2.1 di contrasto minimo (rapporto 4.5:1 per testo normale, 3:1 per testo grande). Verifica il contrasto con strumenti come il WebAIM Contrast Checker, specialmente se hai personalizzato i colori del selettore tramite CSS.

Testo Alternativo per le Bandiere

Le immagini delle bandiere devono avere un attributo alt descrittivo. TranslatePress aggiunge automaticamente il nome della lingua come testo alternativo, ma verifica che la descrizione risulti chiara e comprensibile. Ad esempio, alt="Passa alla versione inglese" risulta preferibile rispetto a alt="en_GB".

Bandiere Nazionali vs Nomi delle Lingue: Quale Approccio Scegliere

La scelta tra bandiere e nomi delle lingue merita una riflessione approfondita, dato che influenza sia la usabilità che la percezione del brand internazionale.

Vantaggi delle bandiere:

• Riconoscimento immediato e universale
• Occupano poco spazio
• Funzionano bene anche senza traduzione del testo del selettore stesso

Svantaggi delle bandiere:

• Una bandiera rappresenta un paese, non una lingua (il portoghese si parla in Brasile e Portogallo)
• Possono risultare ambigue (bandiera USA vs UK per la lingua inglese)
• Alcuni visitatori potrebbero non riconoscere le bandiere di paesi meno noti

Vantaggi dei nomi delle lingue:

• Chiarezza assoluta su quale lingua verrà visualizzata
• Nessuna ambiguità culturale o geopolitica
• Migliore accessibilità per screen reader

La combinazione bandiere + nomi rappresenta la soluzione consigliata nella maggior parte dei casi. Le bandiere attirano lo sguardo e i nomi eliminano le ambiguità. Per siti con molte lingue (sei o sette), i soli codici abbreviati (IT, EN, FR, DE, ES, PT) offrono un buon compromesso tra compattezza e chiarezza.

Consigli Finali per un Language Switcher Efficace

Ecco un riepilogo delle best practice per implementare un selettore di lingua professionale:

1. Posiziona il selettore in alto a destra — la convenzione internazionale prevede il language switcher nella zona superiore destra del sito, dove gli utenti si aspettano di trovarlo
2. Mostra la lingua corrente — il selettore deve indicare chiaramente quale lingua risulta attiva in quel momento
3. Scrivi i nomi delle lingue nella lingua di destinazione — mostra “English” invece di “Inglese” e “Deutsch” invece di “Tedesco”, permettendo ai visitatori di riconoscere la propria lingua
4. Testa su tutti i dispositivi — verifica il funzionamento su desktop, tablet e smartphone, sia in orientamento verticale che orizzontale
5. Non nascondere il selettore — un visitatore che non trova come cambiare lingua abbandonerà il sito immediatamente
6. Evita il rilevamento automatico senza fallback — se utilizzi il rilevamento della lingua del browser, mantieni sempre visibile il selettore manuale come alternativa

Se hai bisogno di supporto nella configurazione del selettore di lingua o nella personalizzazione del design per il tuo sito multilingue, contatta il nostro team. Offriamo anche soluzioni di hosting WordPress ottimizzato con configurazioni specifiche per siti multilingue ad alte prestazioni.

Articoli Correlati sulla Traduzione di WordPress

• TranslatePress Free vs Premium: Funzionalità e Quale Scegliere
• TranslatePress: Impostazioni Avanzate e Ottimizzazione Performance